Image optimization is one of the simplest and most effective ways you can speed up your site.

But in today’s highly visual world where high-resolution images have become the norm, many sites fail to factor it in. This leads to slow page speeds, losing potential (and impatient) customers, a drop in search rankings, and a hit to your bottom line.

Fortunately, with the right tools and an understanding of how image optimization works, it’s never been easier to get this crucial part of overall site optimization right.

In this article, we’ll explore every aspect of what you need to know so you can ensure your site is performing at its best when it comes to serving up visual content.

What is Image Optimization?

In a nutshell, image optimization refers to the process of delivering a high-quality image using the right image format, dimensions, resolution, and compression, all while keeping the smallest possible file size.

We’ll go through what you need to know about image formats, dimensions, and resolution later in this article. But for now, let’s focus on compression, as this is what people typically associate with image optimization.

There are two methods for image compression:

• Lossy – Some of the data from the original image file is lost. The process is irreversible, and once you convert to lossy you can’t go back. JPEGs and GIFs are both lossy image formats.
• Lossless – The image is reduced without any quality loss. Usually, this is done by removing unnecessary metadata from JPEG and PNG files. RAW, BMP, GIF, and PNG are all lossless image formats.

Lossless is the most popular form of compression, though whether you use lossy or lossless really depends on the image you’re compressing (as we’ll go through below). Often, lossy changes to an image aren’t immediately obvious to the naked eye.

In the example below is a lossy image to the left and a lossless version to the right. The difference to the eye is negligible, though the difference in file size is not – the lossy version is just 60KB and the lossless image is 351KB.

Why Image Optimization is Crucial for Page Speed (and Conversions)

Ultimately, it’s all about speed. Optimizing your images helps boost your page speed, which in turn creates a faster and more enjoyable user experience, keeping users happy and more likely to stay on your site and spend money.

The fact is, page speed can make or break a website. Nearly half of web users expect a site to load in 2 seconds or less, and will usually abandon a site that doesn’t load within 3 seconds.

How quickly your pages load impact the site metrics that matter most – user experience, bounce rate, search rankings, conversions, and page views.

Econsultancy research has found 88% of users who are dissatisfied with a website’s performance are less likely to buy from the same site again. And according to Hubspot, if your site makes $100,000 per day, a 1-second improvement in page speeds brings $7,000. Meanwhile, a 1 second delay in page load time means an 11% loss in page views.

Does Image Optimization Really Matter? Isn’t the Internet Getting Faster?

The speed with which the broadband revolution has hit most countries has led to a certain nonchalant approach to image optimization for many. After all, what’s a few kilobytes when most users stream HD video on their phones?

Yes, the internet is getting faster. Browsers, caching, faster networks, CDNs and other technology are making the web faster for users. But this is no reason to let your website carry extra fat, so to speak.

Speed matters – and nowhere more so than on mobile.

Our Mobile Reality

Mobile users who are dealing with bandwidth constraints and/or prohibitive data limits and rates simply don’t have the time or money to download websites with large or unnecessary images.

So when reviewing the mobile version of your site, think about whether you really need an image or if it’s just eye-candy. When you have limited screen real estate, every image counts.

The bandwidth and data limits of your users will vary from country to country, but there’s a great online calculator, What Does My Site Cost, that can tell you the cost, in dollars, of your pages in locations around the world.

How to Optimize Your Images for the Web

Common Image Formats for the Web

When it comes to displaying images online, there are only two formats you need to worry about: PNG and JPEG.

Typically, JPEG is the best format for photos, images with gradients, and images with millions of colors, while PNG is best-suited to images with limited colors, such as logos, and images with transparency.

For example, I saved this image as a JPEG because it’s a photo and has lots of colors:

And I saved this image as a PNG because of its transparent background:

This image is also a perfect candidate for PNG for its limited use of color:

Resizing and Cropping Images

Say you’ve just downloaded an image from Unsplash, which you want to use as a feature image for a blog post on your WordPress site. I can guarantee you right now that it’s way too big for your site.

How do I know this? Well, Unsplash images are always high-resolution, so it’s not unusual to download a photo that’s in the range of 3000px by 2000px in size. And for a typical website, these dimensions are huge.

So before uploading any images to your site, it’s important to know the image dimensions required for your site.

For example, on this page you’re reading right now, if you’re viewing the desktop version of the Barrel Roll site, you’ll see the feature image at the top is 1080px wide. Likewise, the container size of this blog is also 1080px (i.e. the width of the column of blog text).

In this case, if I want an image to display full width, I should crop and resize it to 1080px wide. Any images I upload that are smaller than this width will display at their original dimensions.

Here’s an example to show you what I mean about cropping and resizing appropriately. The original version of the image below was 6000px by 3376px and 2.5MB in size. I cropped a bit off the top and bottom of the image to make it thinner horizontally and then resized it to fit this blog’s container. The result? An image that’s just 156KB (47KB after compression with EWWW – more on that below).

Tip: When taking a screenshot, resize your browser window or zoom in/out to achieve the required dimensions before taking it. This will ensure your image is sharp and already the correct size you need. Because if you have to resize it later, parts of the image such as text will turn out blurry. Also, don’t forget to use the “save for the web” feature offered by many image editors.

Delivering Responsive (and Retina) Images for Multiple Devices

Different devices, including those with high-resolution Retina displays, usually require images in different dimensions and resolutions. However, while design “best practice” dictates that websites should deliver multiple versions of every image in various sizes and resolutions, this simply isn’t practical. I mean, who has the time to resize and save different versions of every image on their website?!

WordPress creates four additional versions of each image you upload; thumbnail, medium, medium-large and large. Themes sometimes use these dynamically, placing smaller or larger versions into layouts as needed. More and more WordPress users are designing with page builders and themes that can handle image scaling automatically. Plus, using images designed for desktop users means they’ll look great on small Retina devices anyway. This means both desktop users and mobile users should see a crisp version of your site.

Image optimization is a complex topic and involves much, much more than we’ve covered in this article. But for the everyday site owner who just wants their images to look sharp and fantastic on every device, the most important things you need to do are:

1. Understand the required image dimensions for the desktop version of your website and always crop and resize accordingly.
2. Use an image compression tool to further optimize your images and achieve the smallest possible file size.

Image Compression Plugins

So far in this post, we’ve covered how image optimization works, looked at cropping and resizing, and how to handle images for responsive layouts. Now, with all that prep out of the way, you’re ready to compress your images

Compression is simply the process of algorithmically removing image information that the human eye can’t see. When compressing an image, the aim is to achieve a balance of the lowest possible file size and the highest possible image quality.

While there are many WordPress plugins that can help you achieve this, Barrel Roll recommends EWWW Image Optimizer. Not only does it achieve best-in-class results, it has a great set of easy to use features and it’s actively maintained and supported by the developer who has also put together excellent and easy to understand documentation.

For a full analysis of the top six image compression plugins for WordPress, check out The Best WordPress Image Optimization Plugins Tested and Compared.

Optimizing Images for SEO

So far we’ve concentrated on the display properties of images, but SEO optimization is of equal importance to your site’s overall success. Let’s quickly review the basics:

• Filenames: Use descriptive filenames that showcase your keywords rather than meaningless generic names. For example, use “green-child-bicycle.jpg” rather than “BX8A132E.JPEG”.
• Alt tags: Provide a succinct, non-spammy alt tag for each image for reasons of SEO and wider accessibility. For example, “alt=’Side view of a child’s green bicycle’”.

You can find more detailed information on the subject here or over at Yoast’s excellent guide to optimizing images for SEO.

Conclusion

Optimizing your site’s images is hands down the easiest way to achieve faster page speeds, not to mention improved SEO and happier visitors. If you haven’t already started optimizing your images, here’s a checklist to get you started:

1. Make sure you select the appropriate image format for your images.
2. Crop and resize images using the correct image dimensions for your website.
3. Compress your images using EWWW Image Optimizer.
4. Use proper filenames and alt tags to boost your SEO.

Lastly, once you’ve uploaded your images to your site, consider using a CDN like Cloudflare for image delivery and further speed gains.