Image Optimization for SEO

The benefits of having images on your site

There have been many studies into the benefits of images on web pages. Some of the key findings are:

• Pages with images are more than two times likely to be shared on social media
  (Source: OkDork.com)
• Users are more engaged with articles that contain images and get 94% more total views than articles without images
  (Source: JeffBullas.com)
• Pages with at least one image perform better in organic search than pages without images
  (Source: Backlinko.com)

The benefits of images are evident, however, if they are not well-optimized, they can add several megabytes to your page load sizes and be extremely detrimental to your sites performance. Decreased site performance can result in lower your search engine rankings and provide a frustrating experience for users.

The good thing about image optimization is that it is dead simple and even a novice will be able to optimize their images for SEO and website performance after reading this post.

Here are the 8 aspects of image optimization that will be discussed in this post:
(Click to navigate)

1. Sourcing images – 7 sites where you can source millions of images for free
2. Using the appropriate file type – when to use JPEG, GIF, or PNG file types
3. Image resolutions – use images with the same dimensions they will display at
4. File sizes – compressing images to make your pages load faster
5. File names – use descriptive file names
6. Alt text and Title text – always use Alt text and be descriptive
7. Image Sitemaps – increase the chance of your images being found in Image Search
8. Social Media – get the most out of your images on social media

Plus a Bonus Tip!

Sourcing images

I always think it’s best to create your own unique images, but due to time constraints or resource limitations, creating your own images isn’t always a feasible option.

Luckily, there are tons websites out there with millions of free images and usually all that’s required is that you credit the image creator as the source (and sometimes credits are not necessary at all).

Here are seven recommended sites for sourcing your images:

1. Flickr.com
2. Freeimages.com
3. Publicdomainarchive.com
4. Unsplash.com
5. Pixabay.com
6. Gratisography.com
7. 500px.com

If that’s not enough for you, here’s a list of 87 sites where you can get free images.

Creating your own images is much easier if your content only requires screenshots or graphs, and in that case, you should always take a bit of time to create your own.

Most of the images on my SEO blog (SEORave.com) are created using the trusty old Snipping Tool and some quick editing in Paint.NET (you don’t need crazy Photoshop skills for simple image editing). I also use the Full Page Screen Capture extension for Chrome when I need to take a scrolling screen shot of a full webpage.

Which image file type should you use?

There are many different image file types to choose from, each with their pros and cons, but we’ll keep things simple by only looking at three file types; JPEG, GIF, and PNG.

JPEG

JPEG stand for Joint Photographic Experts Group. The most important thing to know about JPEG images is that it uses lossy compression – meaning there is a trade-off between file size and image quality. The level of compression can be adjusted to find the right balance between file size and image quality.

Transparent backgrounds are not supported, so JPEG is usually not a suitable option for website logos.

JPEG is your best option for high-color, photographic images.

GIF

GIF stands for Graphics Interchange Format. It supports simple animations, however, it only supports 256 colors from the RGB spectrum in a single image, and in a single frame for animated GIFs (each frame can use a different 256 colors).

GIF supports transparent backgrounds, making it a suitable option for logos and other page elements, like buttons.

GIFs are best used for animated images. The color restrictions in GIF images make them unsuitable for high-color, photographic images.

Please note: Animated GIFs often have large file sizes so it’s important to be aware of the file size before using them on your site.

PNG

PNG stands for Portable Network Graphics. It supports lossless data compression and was designed as a new, improved replacement for GIF.

PNG supports transparency and a wide-range of colors, like JPEG.

PNG provides unparalleled image quality for simple images when compared to JPEG, but will have a much bigger file size for high-color, photographic images.

Recommendation: use JPEG for high-color, photographic images, and PNG images for transparent logos and images with few colors. Use animated GIFs sparingly due to their large file sizes.

Image resolution

The resolution of your images plays a big part in determining its file size and we always want to keep file sizes as small as possible to ensure our pages load as quickly as possible.

For example, if your blog can only display images at a maximum width of 720px, there’s no point using an image that’s 2000px wide. The 2000px image will be resized to fit within the 720px container, but the full size image is still being loaded.

The file size difference between an image that’s 2000px wide and an image that’s 720px wide could be over 1mb!

Using images that are the exact dimensions they will display at on your site is commonly referred to as serving scaled images.

See the example in the image below. If you need an image that’s 250 x 250px, don’t use a larger image (eg. 500 x 500px) – create an image the exact size you need – 250 x 250px. Doing this will help keep your page size as low as possible, to help your pages load as fast as possible.

Recommendation: know the required resolution of your images and make them exactly that size. This will help minimize pages size, which will help pages load quickly.

Reduce image file size

Once you’ve got the correct resolution for your image, you want to squeeze every last kilobyte out of it – without sacrificing much image quality.

While there are some excellent WordPress plugins that help reduce image sizes, I am a strong believer that images should be well-optimized before you upload them. Once you’ve optimized them offline, WordPress plugins or other online tools can help you compress them further without losing any (noticeable) image quality.

Most basic image editing software gives you a preview of how your saved image will look and gives you options to configure the quality and output file size:

Generally, when saving JPEG images, setting image quality between 70 and 85 allows image quality to remain high while making significant reductions to the output file size. When using a quality setting below 70, there is usually a more noticeable decrease in image quality.

Now let’s take a look at some WordPress image optimization plugins and online tools where you squeeze a few extra kB out of your image file sizes!

WordPress image optimization plugins

WP Smush

WP Smush is very easy to use and you’ll be surprised at how many kB it can squeeze out of your images without losing quality.

The free version limits you to ‘bulk smush’ 50 images at a time, which if fine for smaller sites but could take you a while if you have thousands of images in your media library. A new feature of WP Smush is that it will convert PNGs to JPEGs where it thinks you might have chosen the wrong file type. This feature could produce big reductions to your image files.

New images are automatically ‘smushed’ on upload.

The paid version of WP Smush allows you to ‘super smush’ images for even smaller file sizes, and removes the limit of ‘bulk smushing’ only 50 images at a time.

Overall, WP Smush is a great image optimization plugin for beginners or if you have limited time to spend on optimizing images. The paid version is better for large image libraries.

EWWW Image Optmizer

EWWW Image Optimizer has many of the same features as WP Smush, but it also gives you the option to enable lossy compression if you don’t mind sacrificing some image quality for smaller file sizes.

Unlike WP Smush, EWWW Image Optimizer has no restrictions on its ‘bulk optimize’ feature – you can optimize your entire image library in one click.

Like WP Smush, new images are automatically optimized on upload.

EWWW is a good option for websites with large image libraries, especially if you don’t want to pay for the premium version of WP Smush.

Imsanity

Imsanity allows you to bulk resize your image library and set maximum resolutions for new image uploads, depending on where they are being used.

For example, you can set a maximum width for images that are uploaded to a blog post to make sure you don’t have any unnecessarily large images that are being squeezed to the width of the blog template.

Imsanity allows you to adjust the JPEG quality setting and can be set to convert BMP and PNG images to JPEG, although, this may not always be desirable.

Hopefully your images are sized correctly before you upload them, but if you have a large image library, Imsanity can help you clean up over-sized images quickly.

Imsanity is a great complimentary plugin to WP Smush or EWWW Image Optimizer.

Online image compression tools

If your website isn’t on WordPress or you don’t want to install these plugins, there are a number of free online compression tools where you can reduce your file sizes online.

Here are two websites you can use to compress your images:

1. TinyPNG.com – for compressing PNG images
2. CompressJPEG.com – for compressing JEPG images

Recommendation: reduce your image file sizes before you upload them to your site. WordPress plugins and online tools can be useful further reduce file sizes.

Use descriptive file names

Image naming is extremely simple but is something that is often overlooked.

In Google’s image publishing guidelines, they ask you to provide as much information as you can about an image, and part of doing that is giving your images a descriptive file name.

For example, an informative and descriptive image name would be labrador-puppy-sleeping.jpg not IMG002299.jpg

Or Eiffel-tower-paris-skyline-sunset.jpg not StockImage312864000.jpg

Recommendation: make sure your image filenames are descriptive of the image.

Use descriptive Alt text and Title text

Alt Text

Alt text is one of the most important elements in optimizing your images. The image alt text provides search engines with a description of what the image is and Google uses this as a strong ranking factor in image search.

The Alt text will be displayed on the page if for some reason your image fails to load, and it is also used by screen readers for the visually impaired.

I like to write Alt text to include a keyword variation and be descriptive of the image, at the same time – if your images are relevant to your content, a description of the image should naturally include related keywords.

Alt text examples:
(example modified from Google’s Image Publishing Guidelines):

Bad (no Alt text):

 <img src="labrador-puppy-sleeping.jpg" alt=""/>
 

Better (but not descriptive enough):

 <img src="labrador-puppy-sleeping.jpg" alt="puppy"/>
 

Great (perfect short description of image):

 <img src="labrador-puppy-sleeping.jpg" alt="sleeping labrador puppy"/>

Too much (keyword stuffed Alt text):

 <img src="labrador-puppy-sleeping.jpg" alt="puppy, labrador, labrador puppy, sleeping puppy, dog sleeping, sleeping labrador puppy"/>
 

You can see in this example that ‘Great‘ shows a short, simple description of the image – which is what you should always aim for. Never leave your Alt text empty, and you should be more descriptive than using a single word.

The last example shows Alt text that is ‘keyword stuffed’ – which should always be avoided because it looks like spam to search engines.

Another thing to point out is that Internet Explorer uses Alt text as a tooltip when hovering over an image. Other browsers, like Chrome, use the image Title text as a tooltip on images.

Title text

Title text is not a ranking factor for image search and is not considered to be an important aspect of image optimization.

While it won’t help your page or images perform better in search, it can be a way to provide more information to users because most modern web browsers use the Title text as a tooltip when hovering over an image.

Using the same Alt text and Title text is fine.

Note: use normal spaces in your Alt text and Title text, not “-“ or “_”.

Recommendation: use descriptive Alt text in all images. 2-6 words will usually provide a sufficient description.

Image Sitemaps

While not as important as other aspects of image SEO, you should also include images in your XML sitemaps to increase the chances of your images being found in Google Image Search.

Images can be referenced using the image:image and image:loc tags in your XML sitemap.

The good news is if you’re using a good WordPress SEO plugin, like the Yoast SEO Plugin, images are automatically added to your XML sitemap so there’s nothing you need to do!

Recommendation: use a good WordPress SEO plugin (Yoast) that adds images to the XML sitemap and submit to Google Search Console.

Social Media

OG (Open Graph) meta tags (used by Facebook and Pinterest) and Twitter Cards specify important information for social media platforms, and one of the most important things to specify is the image you would like to display when someone shares your content.

Why is the image important? A good, high-quality image can have a positive impact on CTR from social platforms, while a poor, low-quality image can have a negative impact on CTR.

You obviously want as many people as possible clicking through to your site, so make sure you specify the image you want people to see.

You can do this by adding og:image meta tags to the head section of your page.

And by adding the twitter:image meta tag to the head section of your page.

SEO plugins (like Yoast) automatically take care of adding these tags to your pages.

These plugins will specify your featured image for OG and Twitter Card images by default, but you can easily select your own image by clicking on the ‘share’ icon in the Yoast side menu. This will bring up the Facebook sharing options for you page:

Click on the Twitter icon to bring up the Twitter options and select your Twitter Card image:

You can also specify Titles and Descriptions for Facebook and Twitter in this area if you’d like them to be different to your meta title and meta description.

Pinterest tip: Pinterest uses you image Alt text as the description for your image when someone pins it. This is important in helping your images perform better in Pinterest search, which can be an amazing source of traffic.

Bonus Tip: how to further compress thumbnails in WordPress

Because thumbnail images are so small, they can often be compressed at a higher rate than the original image without losing much quality.

To compress thumbnail images at a higher rate in WordPress, add the following code to your functions.php file:
(Warning: make sure you backup your the original file before editing)

add_filter( 'jpeg_quality', create_function('', 'return 60;' ) );

The number you specify in this code is the percentage of the original image quality. For example, 60 is used above so thumbnail images will be 60% of the quality of the original thumbnail.

Usually, a setting of 60-80 (default WordPress setting is 90) results in images with no major noticeable decrease in image quality, but you can test this out to find what works well for your site and your images.

Please note, once you make the change to your functions.php file you will need to regenerate all thumbnails in order for the changes to take affect. You can easily do this with the Force Regenerate Thumbnails plugin.

Summary

Image optimization isn’t hard. Taking the time to tidy up your poorly optimized (or un-optimized) images, and ensuring new images are well-optimized, can help improve your search engine rankings and help your pages load faster. This means more traffic to your website and a better experience for users.

Have any more tips for image optimization? Got any questions about image optimization? Leave a comment below.

This article was originally published here.