We all know how important a beautiful image is to enhance our blog posts. The human eye is drawn to attractive graphics and photos much more than it is a block of text. However, extreme care must be taken when preparing an image for your blog post. A misstep here will result in extremely poor site performance and visitors will drop off of the site before your amazing content has even loaded. Why? Let me explain.
Preparing an Image
Today’s phones and cameras all have 12 megapixel resolution and above. Each new generation of camera is offering higher, and higher, resolution. That is fantastic, since it brings us amazing photographs that are getting more, and more, representative of the real-life image we’re trying to capture. But, there’s a downside to all this amazing resolution – file size. Images download direct from the camera could 6-10 megabyte and even more. Semi-professional Digital Single Lens Reflex (DSLR) cameras can yield image sizes upwards of 40MB each.
Even stock photography has options for full-resolution versions of the image which will provide you with much more flexibility when preparing the file for use but also comes in a heavy payload – upwards of 4MB. So, even here, care must be taken.
83% of site visitors expect the page to load in 3 seconds or less
Now, why does this all matter? It matters because the size of the images on your page correlates directly with the time it will take the visitor to download the page to their device. The bigger the images the longer the download time. This is especially true with mobile devices connected to the Internet across cell phone networks such as 4G.
Here are some cool, and disturbing, facts courtesy of webbymonks.com:
- 1 second delay in page load time will result in 11% fewer page views
- 83% of site visitors expect the page to load in 3 seconds or less
- More than 40% of visitors will abandon a page that loads in more than 3 seconds.
So What Can We Do?
It’s simple. DO NOT, ever, upload a photo directly from your camera or your favourite stock photo site. We must pre-process it first. Now, you do not have to be a Photoshop guru to do this. In fact, you don’t even need Photoshop, as awesome as it is! With the addition of one simple piece of software we can reduce the file size of our images by more than 90% without visible degradation. Yes! You heard that right! If we reduce the file size of our images by 90% then we reduce the load time of our pages by 90%. Just imagine if you had such a blisteringly fast site; visitors would be crawling all over it because it’s fast, it’s responsive, and it loads within their tiny attention span.
Step 1: Crop & Resize
The first step is to crop and resize the image to suit our purpose. Since we’re talking about blog posts here then I propose that the optimum image dimensions are 1280×720. Why? Because this is the optimum size, and aspect ratio(16:9), for sharing across most of the social media platforms. You are sharing all your blog posts on social media, right? I have a separate blog post that talks about automatically cross-posting your blog posts automatically to all your social media platforms so be sure to check that out.
Back to our images. First you’re going to need a lightweight photo editor. Like I said before, you don’t need a heavy-weight such as Photoshop for this job. Personally, even though I have the entire Adobe Creative Suite, I use “Preview” on my MacBook. Whichever tool you choose we will be editing the image to prepare it for upload to your blog. Here are the steps I take from within Preview:
- Open the file in Preview
- Click Tools | Adjust Size
- Change the “Width” value to 1280. Don’t touch anything else!
- Using the cursor crop the height to 720 paying careful attention to composition.
- Close the window
Look out for an upcoming training video that will take you through this process step by step. Don’t forget to sign up to our Newsletter so that you get notified when the video is live.
Step 2 – Compress the Image
Now that we have the reduced the dimensions of the file to suit our requirements we must pay attention to the physical size of the file. If you started from a very high resolution image the chances are that your file size is still above 1 megabyte. This is far too heavy to include on your page.
For Mac OSX and Linux users there is a great, free, tool called ImageOptim. I highly recommend this tool, although I have no affiliation, because it’s just so incredibly easy to use. The key to setting up ImageOptim for our use in the preferences section. Click through ImageOptim | Preferences | Quality. Here we’re going to adjust the quality settings to reduce the file sizes down to our target weight – less than 100kB. Yes! We’re going to take a multi-megabyte file and reduce its weight to below 100kB. Ready?!
Reduce the quality sliders to the following setting:
- Check the box “Enable lossy minification”
- Change all the quality sliders to 70%
- Close the preferences window.
Now, locate the file you edited in Step 1 and drag and drop it onto the ImageOptim dashboard. Watch as it magically reduces the file size by, typically, 80% or more.
Step 3 – Upload Your New Image
Now that we’ve cropped, resized, and compressed, our image it is ready to be uploaded to our blog post. How you execute this step is absolutely critical to the success of your post in terms of engagement, social media sharing, and Google search rankings.
To add the file to your blog post, open up the post and aim for the bottom right sidebar area to find “Featured Image”. This is where we will add the image and not in the body of the blog post itself. Social media sharing, as well as Google, look for the “Featured Image” so this must be set. Click on “Set Featured Image” and upload your pristine new file using the standard WordPress method. Note: it is absolutely critical that you complete the metadata (i.e. Title, Description, Alt Text, and Caption) fields on the right hand side of the Media Library window. These fields are crucial to support your Search Engine Optimization (SEO) efforts. I will dive into this topic much deeper in another blog post so look out for that one.
Once the fields have all been completed you can click “Set Featured Image” button at the bottom right of the Medial Library window. You’re all set.
Whilst having compelling, clear, beautiful images on our blog posts is critical it is also essential that these not result in slow page load times. Slow pages mean that visitors will not wait for the page to load and “drop-off”. Imagine that you could be losing up to 83% of your potential visitors just because the page took more than 3 seconds to load.
Your web designer will have worked hard to ensure that your page load times are within the best-practise limits defined for different page types. By following the simple steps in this blog post you will be able to support all that hard work by ensuring that your blog posts do not slow the site down.