Fast-loading websites use optimized images because people won’t wait. This point was driven home for me a couple of months ago. I was explaining to one of my kids what life was like in the dial-up internet days that preceded broadband and WiFi. It was a horror story, especially when I explained how long it would take to download a movie. To top it off, I explained how we used to have to use a dial up modem, and I even found an audio file of the sounds modems made when connecting. Ah, the memories.
Today’s world is one where people – like my child – expect instant answers, regardless of how mundane or complex the question is. A 2 hour movie should download in a few minutes, and should start streaming instantly. People expect websites to load quickly, even if they are on a slow network, so it’ important that your site be fast.
As a result of this expectation, Google factors in page load speed into its SEO results. This started for desktop way back in 2010, and for mobile, it was in 2018. If you want more visitors from search engines, you need a fast-loading site. When a site is slow to load, one of the first culprits to check is the image size and optimization. To get the most from your images, we’ve made a list of simple things you can do for both technical- and on-page SEO.
Images are content kings now, but that doesn’t mean they should be big and heavy. When talking about images, there is the size – how big it is in pixels – and the weight – the file size. For size, your images should only be as big as they need to be. So if a 600 X 400 size image works, don’t use a 1,200 X 800 image. For weight, you always want it to be as small as possible. On rare occasion, you’ll be given a recommended size, so use that if offered. More often, you won’t, and while there is no set-in-stone size guide for images, to the right are some good rules to follow for image size. Focus on the width and keep the scale locked so that the height adjustment is automatic.
Image files contain a lot of information that’s unnecessary on the internet. This includes metadata like the camera, ISO speed and F-stop information, as well as color spectrum that humans can’t see. To remove this and make it “lighter” the image needs to be compressed. Compression removes unnecessary parts of the image that make it heavier but don’t contribute to image quality. Keep in mind that the more pixels, the heavier the image will be, so a hero image should be heavier than a thumbnail. Look at the picture below (I enjoy mountain biking, so I decided to use an image from Kay Liedl on Unsplash) and as you move the slider, you can see some changes, but the compressed image works fine on a screen.
As far as weight, the uncompressed image is 227 kb and the compressed image is 134 kb, about a 39% reduction in weight.
There are many options for image compression including online services like Compress JPEG, or TinyPNG. Applications like Photoshop can also do it for you. I prefer to use a plugin like Smush or ShortPixel. Both have free and paid versions, and both work very well. With Smush, the paid version offers greater compression (compared to the free version), while with ShortPixel, the paid version offers more images to compress per month (the free version lets you compress 100 images per month – which you’ll use faster than you realize). At RDM, we most often use ShortPixel because it creates different sized images and selects the best size to use when you place it. For example, if you use an image as a hero on a page and need it to be 1300 pixels wide, ShortPixel will insert that file. If on another page you use the same image but it only needs to be 500 pixels wide, ShortPixel will use the image closer to that size. It saves time by not having to manually scale images and upload them to your site.
There are two different ShortPixel plugins: Shortpixel Image Optimizer and Shortpixel Adaptive Images. Both are great, but we recommend using Adaptive Images (AI) for these reasons:
Shortpixel AI installation & configuration is simple. Click here for a walkthrough video.
These plugins have a couple of other advantages too. First, you don’t have to take the extra steps of uploading images to a service, waiting for them to compress, downloading them, then uploading them to your server. Second, They both support next generation image formats (Smush requires the paid version for this). We’ll talk about next gen formats in just a minute. Third, they do everything automatically.
This is the most time-consuming part. The good news is, you can probably skip it.
After compressing and scaling all images on your site, there may still be some that aren’t optimized. To find them, go to GTMetrix & test your site. Image optimization is a “low-hanging fruit,” so if there are issues, they’ll usually be at the top of the PageSpeed or YSlow tabs.
The GTMetrix report is great in that if it finds any problem images, it will tell you where they are AND give you a recommended size. For these, you’ll need to manually resize them which you can do in WordPress (the easiest way if it’s already inserted into a page), Photoshop, or use an online service like ResizeImage.net. After resizing them (if you didn’t use WordPress), you’ll need to upload it and make sure the proper-sized image is being used on the page.
As a general rule, you don’t want to resize using HTML or CSS – that slows the page. The first image has an original size of 900 x 600 but is displaying at 263 x 175. Manually resizing it will fix it. I like to go a little bigger than the size it gives, so for this image I would resize it to 300 or 325 pixels wide. Always leave the scale locked so the height is automatically adjusted.
I mentioned earlier that this is the most time-consuming part. The good news is it may not be necessary. First, if the report says your page is loading quickly (2 seconds or less), you can probably skip this. If you only have a couple of images, and the savings is minimal, you can probably skip this. At the end of each explanation it reads, “Serving a scaled image could save X Kib (X% reduction).” 1-2 images under about 30KiB can likely be ignored, unless you have time and inclination to fix them. A dozen images at that size should be fixed. In case you’re wondering, this is from a report for a client before doing anything to their site. We used Smush Pro for this site and it automatically fixed half of these images.
Another great testing tool that’s similar to GTMetrix is web.dev by Google. After running their test, one improvement you’ll likely see is to “serve images in next-gen format.” What does this mean?
Right now, the most common image file formats for web pages are .JPEG and .PNG. However, Google has created a newer, faster-loading file format called WEBP (there are also JPEG2000 and JPEG XR formats) that can compress JPEG files 25-35% more than current file formats. Lighter images make faster pages, so why hasn’t every page already switched? Some web browsers don’t support WebP yet, and where it’s a new format, it’s sometimes not quite as easy to work with WebP as JPEG & PNG files.
This isn’t something you need to do right now, but if you’re going to pay for one of the previously mentioned compression plugins (or look for another option), you might as well use the next gen functionality. With Smush Pro and ShortPixel, you simply need to enable it in the settings. What these plugins do is look first to see which browser is being used and serve WebP images to compatible browsers.
The biggest reason to consider this is if you’re in a very competitive industry (especially when it comes to mobile searches), using next gen formats could give you a competitive advantage.
In most instances, laziness isn’t a good trait. However, for faster loading, you want your site to lazy load images.
It sounds strange, so what exactly is lazy loading?
To get a page to load faster, it would make sense to have it load everything from top to bottom. But browsers load web pages in batches, so they load all the images together, all the text together, etc. Since there is usually a big image at the top of the page, the browser starts with it, then loads all the images. Meanwhile, any visible text that needs to appear at the top of the page is waiting for images that you can’t even see farther down on the page. Lazy loading fixes that by telling the browser to only load images as they scroll into view. This makes the web page viewable and usable faster.
Lazy loading is part of caching, which we’ll cover when we talk about Technical SEO (coming soon), but here are the basics.
Google extracts information about the subject matter of the image from the content of the page, including captions and image titles. Wherever possible, make sure images are placed near relevant text and on pages that are relevant to the image subject matter.
If the image doesn’t load, alt-text gives the person a feel for what the image is and how it relates to the article.
With file names, captions, and alt text, use keywords, but don’t go crazy – keyword stuffing used to be all the rage, but you’ll be penalized for it today. How do you know if you’re avoiding keyword stuffing? Read your copy aloud. If it sounds normal – something you’d say in a conversation – you’re okay. If it sounds unnatural, you need to rework it.
