I think we can all agree that pictures or graphics are one of the most essential ingredients of a blog. You probably spend a lot of time taking fabulous pictures for your posts or searching the internet for the perfect image. What you might not know though is that those pictures could be hurting your blog.
When I say hurting your blog, I mean slowing it down. Pictures are usually the number one reason blogs load slow.
A slow blog will drive readers away faster than it can load! « Click to tweet
Have no fear though. I am going to show you how to save and upload your pictures to your blog for optimum load speed (which will also help your SEO).
First, let’s do a little research. I want you to look up the width of your blog content area. To do this, you can use your browser’s developer tools. Here’s a quick video to show you how:
Now that you know the width of your blog content area, you can resize your images to display them at full width.
Whenever possible, resize your pictures to be the exact width you want it to display in your blog.
Why not use code to resize the picture?
When you use code to resize a picture, the browser has to load the natural image size first, and then shrink it to the size it has been coded to display. That is a lot of unnecessary load time! For example, say the image you upload is 1066 x 1600 px, but you are displaying it on your blog as 650 x 976 px. The browser first loads the whole image and then shrinks it down to the 650 px image. That is 1,071,200 extra pixels that the browser has to load!
Even if you are making a small change to the display size, the extra pixels are substantial. A picture with the original size of 800 x 800 px that is sized to display at 780 x 780 px still has to load 316,000 extra pixels. That is why you shouldn’t use code to adjust the display size of your image.
Why not use the size options in WordPress?
This is a better option than adding your own sizing to the code, but it still isn’t the best option. When you use a size option (medium, large, or thumbnail), WordPress makes a new copy of the image. Instead of having one image saved on your blog, you now have two images. The browser won’t have to load a large image and then shrink it down, but you are taking up more space on your server by storing the large image there.
If you absolutely need to upload a large image, but will be displaying it at a smaller size, use the size options instead of controlling the size with HTML. This way the browser doesn’t have to upload the large image and then size it to your code. It will only load the image WordPress saved at the standard size.
How to prepare pictures for your blog.
Here is how to resize your pictures using either Photoshop (my preferred method) or Picmonkey.
Resizing, optimizing, and cropping with Photoshop
If you want to the dimensions of your picture, you can resize your image during the crop. Click the crop tool, set your dimensions, and then crop the image as desired. For fastest upload, set the resolution between 72 and 96.
72 used to be the standard for web, but it is a changing world these days and with retina ready devices there is a lot of debate on which resolution to use. For pictures within posts, I still stick to 72 ppi resolution.
If you do not need to crop your picture, you can resize it by going to Image > Image Size
Click constrain properties and then adjust the image width to your desired size and set the resolution to 72.
Once you have your image sized and edited it is time to save it.
Click file and then choose Save for Web and Devices.
By saving for web and devices, Photoshop will strip any unnecessary information from the photo (like the camera and lens information). This makes it a smaller file.
If the picture does not have any fonts or graphics added to it, save it as a JPEG. If you added fonts or other artwork to the pictures, save your image as a PNG 24 file.
When saving your picture, always change the name from the default. Make sure the name clearly depicts the picture. Search engine bots read dashes as spaces, so include dashes between each word. For example, I would save the picture above as, purple-white-wedding-centerpiece.jpg
Resizing, optimizing, and cropping without Photoshop
First, use Picmonkey to resize your image. Picmonkey is a very popular, free online photo editing program.
Once you have uploaded your picture to Picmonkey, navigate to Basic edits and find the section called Resize. Under Change size to, input the width that you want the picture to display on your blog and make sure to check Keep proportions. Hit Apply
You can also resize it by using the cropping tool if you wish to change the dimensions.
Once you are done, you can save the image. Save it with a clear name that describes the picture. Use dashes between the words.
Picmonkey resizes images, but it doesn’t optimize them for the web.
To optimize them you can use any of the following free tools:
These tools strip unnecessary data from the picture (what type of camera, date, time, lens, etc). This is called a lossless optimization. It doesn’t change the quality of your image, but dramatically decreases the file size.
The proof is in the pudding.
If having a fast loading website is important to you, then take the extra time to resize your images before you upload them to your blog. Let’s take a look at the difference in file sizes.
As you can see, resizing your pictures before uploading them to your blog can significantly change the file size. (ignore the titles of the images – this is not best blog image practice.)
How to optimize past blog posts.
In a perfect world, you would go through and update all your posts with correct image sizing. Most likely, you have a few posts under your belt though and that would take AGES. Here is what I recommend:
First, go manually update your 5 most recent posts. Re-save the photos with the proper size and name. Delete the old images from the post. Upload and insert the new ones. Next, find and update your top 10 posts from the last 6 months (using Google Analytics). You want those pages to load fast! Do it over a few days or weeks. Don’t burn yourself out.
For the rest of your images, there is a plugin called EWWW Image Optimizer. It doesn’t change the size of your image, but it will go through all of your uploaded media files and losslessly compress them. This will help reduce your load speed. Once you are done with the bulk image optimization, you can delete this plugin. Since you’re going to be sizing your images before uploading them from now on, there is no need for the plugin. 😉
I recently used EWWW Image Optimizer on a clients blog. Look at the load speed of her site before and after compressing her image files:
13 seconds is a huge difference!
Don’t let images slow down your blog!
Always resize your photos from the original size before uploading them to your blog. Also make sure to optimize them using save for web and devices or using one of the lossless optimization tools listed above.
I’d love to hear how much faster your blog loads after you optimize your images. Take a test right now to see how fast it is loading. Work on optimizing your images and then come back and tell me how much faster your site loads!