5 Quick Ways to Optimize Your Images

Summary: Image optimization and SEO is often overlooked on websites, but that doesn't need to be the case with yours. Do these 5 things with your images for a boost in site and SEO performance, giving you an advantage over your competitors.
Google Photos on a computer monitor

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.

1. Put Your Images on a Diet

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.

Optimizing Image Weight

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.

Uncompressed Compressed

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.

A note about Shortpixel

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.

Now Look for Outliers

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.

GTMetrix report showing image issues
If you see either (or both) of these in GTMetrix, open them to get the specific images that need to be fixed.

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.

A GTMetrix report of images to optimize
This shows how many images need to be resized or scaled, where they are, and how much they can be compressed.

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.

How to tell if you can skip this

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.

2. Future-Proofing your Site with Next-Gen Formats

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.

3. Encourage your Images to be Lazy

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.

Swift Performance Lazy Load option
Most cache plugins can enable lazy loading with the flip of a switch. This is from Swift Performance under Settings, Images.
  • Caching improves overall performance of your website, so it's something you want to have.
  • Your host may already have a caching program in place. If yours doesn’t include it, or of you’re not happy with its performance, consider looking for a third party caching plugin. Having more than one caching solution can do more harm then good.
  • There are several good caching plugins, these are some we recommend: WP Rocket, Autoptimize, Swift Performance (this is what we usually use), and Hummingbird.

4. Image SEO

Believe it or not, there are things you can do to improve the SEO score for your images, and in turn, your pages and site.

Choose a Descriptive File Name

It’s easy to think that the file name doesn’t matter. People won’t see the image file name unless they really dig for it, so if it’s named IMG12345.JPG, who cares? If you want search engines to find and index your site, you can help their crawlers by using descriptive file names. Here’s what Google has said about the image filename.

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.

Using a descriptive file name to show how it relates to the text on the page, helps Google to help you. Remember to use keywords, but don’t go overboard.

Strategically Use Captions

You don’t always need to use captions, but if it fits with the page, it’s a good idea to use them. Why? First, refer to the above quote from Google. Second, according to Neil Patel, captions are read a lot more than body copy – on average 300% more often. When considering a caption, use it if it adds value to the image and page. When it does, include a descriptive, keyword-rich caption.

Always Use Alt Text

Always do it. This one is really easy to overlook, and it’s also easy to do. Alt text is important for two reasons:
  • It improves accessibility (for the visually impaired), as screen readers will read the text. Accessibility is becoming increasingly important and it’s already part of the Americans with Disabilities Act.
  • If for some reason an image fails to load, the alt-text will appear in its place. This is especially useful with mobile devices on spotty networks.

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.

How to Add or Edit the Alt Text, Title, and Caption in WordPress

I usually add images as I lay out the page, but you can also access this from the Media Library.
I like to name the image before uploading it, but that’s just me. Once you’ve uploaded the image you want to use, select it from the library. On the right side of the screen, you’ll see an info box like the one pictured on the right.
Fill in all three fields, then click Insert Media. Done.
This is where you add the Alt Text, Title, and Caption in WordPress

5. Stock images vs. Original Images

Finally, a word about stock images. It’s easier and cheaper to use stock images, but for SEO purposes, as well as for making a more engaging and appealing site, original images will always perform better. Original images are shared with greater frequency. Pictures of your products in action always help with sales. You don’t need to avoid stock photos entirely, but remember that original images will have a greater impact on people. I don’t know why, but people can sense stock images, and for some reason, they have a tendency to make people less receptive.

Conclusion

Image optimization is a low-hanging fruit for most websites. With WordPress, the problems can be fixed quickly and easily. Implementing these suggestions on your website will put you in a better position to rank and be seen in organic searches. Of course, this is just the beginning, so if you want to go deeper and really work on image and site optimization, we’d love to talk with you about your specific business needs.
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pocket
Pocket
Share on email
Email

Leave a Comment

Your email address will not be published. Required fields are marked *

Free Site Audit

We'll review your site and provide recommendations to make it more effective. Please give us 2-3 business days and we'll email you the audit report.

Please note: We maintain strict confidentiality. The report will be sent only to the specified e-mail address and no one else. We won’t share or sell your information with anyone. By clicking the button, you agree to have a free website evaluation performed and sent to the indicated address.

Scroll to Top