Great quality images are a very important part of your blog posts and pages and along with that, image sizes. If you’ve ever looked at the size of photos straight from your camera, or even photos you can purchase and download from stock shops (or even free shops), you will see that they can be well over 4,000 pixels wide, which is just way too large for the web.
Sure, you can use those large images because now we have “responsive sites” which means they will automatically fit your blog columns, but that doesn’t mean that you should. If you use a lot of very large images on your blog, those large images still have to load, which can take some time to load and take space on your web server. Eventually, you’d have to purchase the next web host package up for more storage space and that can be expensive and totally unnecessary.
I tell my clients to use images no bigger than 1200 pixels wide and no smaller than 500 pixels wide (height self adjusts). So how do you resize large images? There are a lot of free online sites that will resize images, but we are going to use Canva, a FREE and EASY online graphic program. Of course you can do a lot more in Canva, but for the sake of this tutorial, I’m just going to show you how to RESIZE an image for your blog.
Resize Images in Canva
1) Create a free account in Canva and setup your account settings and go through the quick tutorial shown.
2) Up at the very top right hand side click on the USE CUSTOM DIMENSIONS button.
3) A pop-up will appear to put in a custom width and height. Put in 1200 width and 800 height. Be sure that px is shown in the next box, if not, use the down arrow and select it.
4) Click on Design!
5) A new Canva window will open in your browser.
6) On the left hand side, click on UPLOADS.
7) Click on UPLOAD YOUR OWN IMAGES or drag and drop images from your desktop or folder into the space below that button. The image is large, so it may take a while to load.
8) When the image is done uploading, click on the image and it will appear in the right canvas pane. The white area is the size you specified and where you want your image to fit.
9) You will notice in the canvas pane that the image looks like it may be smaller than you wanted (1200 pixels wide IS bigger than what is showing), that is because it’s showing at a percent smaller of the size needed and that’s okay.
10) Use the black dots (see above screenshot) to drag and resize the image to fit within the white area.
11) You are now done resizing the image, wasn’t that easy?
12) Click on the Download button at the top.
13) In the drop down, use the recommended PNG file type and click on Download to save the resized image to your desktop or file folder of your choice.
14) The image will have a file name of UntitledDesign.png or something similar. You should rename it to something that is more relevant and appropriate to the blog post, which is good for SEO.
You are now done resizing your image and can now upload to your media library and use it in a blog post!
WordPress 4.7 Update: Problems!
The WordPress Editor is Changing Soon – Please Read!
Project: Science by the Bay with Mrs. A
Project: Cheezy Solutions to Lesson Planning
Tip of the Day – Keeping WordPress Updated
Yaay!! Amazing points.
Really helpful. I will recommend your post to beginners.
I admire your work. Thanks for sharing it.
Thanks so much Emily, I appreciate it!