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
- Users are more engaged with articles that contain images and get 94% more total views than articles without images
- Pages with at least one image perform better in organic search than pages without images
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)
- Sourcing images – 7 sites where you can source millions of images for free
- Using the appropriate file type – when to use JPEG, GIF, or PNG file types
- Image resolutions – use images with the same dimensions they will display at
- File sizes – compressing images to make your pages load faster
- File names – use descriptive file names
- Alt text and Title text – always use Alt text and be descriptive
- Image Sitemaps – increase the chance of your images being found in Image Search
- Social Media – get the most out of your images on social media
Plus a Bonus Tip!
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:
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 this site 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 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 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 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.
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.
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 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.
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:
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
Use descriptive Alt text and Title 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 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.
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.
Here’s an example of images being referenced in an XML sitemap:
http://www.example.com/page-name/ http://www.example.com/images/descriptive-image-name.jpg http://www.example.com/images/another-descriptive-image-name.jpg
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!
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 the following OG meta tags to the head section of your page:
And by adding the following 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.
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.
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.
Here are the 8 aspects of image optimization that are discussed in this post:
1. Sourcing images
7 sites where you can source millions of images for free (plus a link to an article with an additional 80 free image sites).
2. Using the appropriate file type
Using the right file type will help keep your image files small:
- Use JPEG for high color images
- Use GIF for animations (but be aware of potentially large file sizes)
- Use PNG for simple, low color images or where transparency is needed, eg. logos
3. Image resolutions
Use images with the same dimensions they will display at on your site. This helps keep file sizes small and pages loading fast.
4. File sizes
Minimize file sizes when you save your images. You can further compress images with WordPress plugins:
- WP Smush
- EWWW Image Optimizer
Or use online tools to further compress images:
5. File names
Always use descriptive file names, eg. use labrador-puppy-sleeping.jpg not IMG002299.jpg
6. Alt text and Title text
Use a 2-6 word description of the image as your Alt text. Never leave it blank and never keyword stuff.
Bad (no Alt text): alt=""
Better (but not descriptive enough): alt="puppy"
Great (perfect short description of image): alt="sleeping labrador puppy"
Too much (keyword stuffed Alt text): alt="puppy, labrador, labrador puppy, sleeping puppy, dog sleeping, sleeping labrador puppy"
7. Image Sitemaps
Add images to your sitemaps to increase their chances of being found in Image Search. Most SEO plugins (like Yoast) do this for you.
8. Social Media
Specify images in Facebook OG tags Twitter Cards. Most SEO Plugins (like Yoast) make this very easy.
Plus a Bonus Tip at the end :)