More than 3 billion images are uploaded to the internet every day. With that much visual information flowing around, it's important to optimize images to be quickly and easily shared with website visitors.
Optimizing images for the web is a crucial step in improving website performance. When preparing images for the web, it is essential to focus on reducing file sizes without compromising quality. Doing so can enhance page load times, boost SEO, and improve user experience. This guide offers practical steps on how to optimize images for various online platforms, ensuring your site is both visually appealing and fast-loading.
Here's what we'll cover:
A high-quality image takes up a lot of data and can be slow to download. A low-quality image can be accessed much quicker, but might not look quite as nice.
Image optimization is the process of reducing the file size of an image without sacrificing too much quality. This can be done using a variety of techniques, including choosing the right image format, resizing image files, and compressing images.
Compressing images is a crucial step in optimizing images for the web. It involves reducing the file size of an image without compromising its quality. There are two main types of image compression: lossless and lossy.
Lossless compression maintains the same level of quality before and after compression, ensuring that no data is lost. This is ideal for images where preserving every detail is essential.
On the other hand, lossy compression discards some elements of the photo, but typically in a way that the human eye won’t notice. This method can significantly reduce file size, making it perfect for web use where speed is a priority.
To compress images effectively, you can use various image optimization tools such as Image Optimizer, TinyPNG, ImageOptim, and Squoosh—the tool we're going to focus on today!
When compressing images, consider the following factors:
Image quality: Ensure the level of image compression does not compromise the image quality.
File size: Aim for a compressed file size that is significantly smaller than the original.
File formats: Choose compressed file formats that are suitable for web use, such as JPEG for photos and PNG for graphics.
By carefully balancing these factors, you can achieve optimized images that load quickly without sacrificing visual appeal, helping improve site performance, user experience, and SEO.
Image compression might seem like magic. After all, it takes your picture and gives you a functional equivalent, at a fraction of the original file size—at least, when it works properly.
The reason why image compression can work at all is because there's a lot of unnecessary information in a typical PNG or JPEG. These images are made up of thousands of pixels. A 1,000 by 1,000 square image would have exactly one million pixels, and then each one of those pixels might have one of a million different colors.
At that scale, the human eye really can't tell the difference from one pixel to another, or from one color to another. It all blends in and creates a single image.
Image compression algorithms take advantage of this fact to turn the original image into "chunks" of single colors. Say you have a picture of a red apple. Each red pixel might have its own shade of red, meaning that the image file has to differentiate between thousands of different shades of red in order to render properly. When you compress the image, the algorithm instead says "Hey, you see these 23 pixels right here? Pretend they are all the same, just color them all the exact same shade of red."
Doing this right can make a big difference. Data for 23 pixels can cost as much as the original data for one, and the picture looks the same. On the other hand, if you compress too much, the image can get distorted—you might get weird halos around objects, or there might be big flat areas where everything is the same color.
Image optimization can improve page load times, reduce bandwidth usage, and in some cases, improve image quality. Reducing image size while maintaining quality can significantly enhance page load times and improve user experience.
The number one most important reason to optimize images is: To improve Page Load Times.
Your bounce rate—the percentage of people who click back to Google immediately after viewing your website—is one of the biggest factors in search rankings. It is also extremely sensitive to page load time. Nobody wants to wait ten seconds to look at your website when your competitor's site loads in less than one.
One report indicates that a 5-second wait time increases your bounce rate by 106%.
It might not seem like it, but images can make a huge difference here, more so than with text. Even if one image doesn't severely impact loading speed, 20 poorly optimized images on a single web page will slow things down, and negatively affect search performance.
Here at Ever Wonder, we have a Proactive Web Performance service offering, which focuses on making sure our client's marketing websites are performing at their peak performance. A big one that always crops up is “image file size is too large”.
We use the amazing Ahrefs Site Audit tools to run weekly audits and review the results regularly. A few weeks back, we noticed a small rise in “Slow Page” issues on our website, ever-wonder.com. We jumped on this immediately! Looking into the issue we found that there were 18 images with large file sizes, affecting page load times.
This highlighted a small lack of knowledge within our content team, and it’s common with a lot of our clients, too. And with tools these days, it’s easier than you think to keep on top of this.
We originally created this article to be an internal documentation resource, however, it’s great to share knowledge, tips, tricks, and amazing tools with clients, too!
We ran through the first 5 images on the audit and had the below optimizations:
| Original Size | Optimized Size | Format |
| 1100 x 800 (1.67Mb) | 1100 x 800 (103kb) 94% | PNG -> JPG |
| 4750 x 2917 (756kb) | 1300 x 798 (101kb) 87% | |
| 4751 x 2917 (165kb) | 1300 x 798 (101kb) 79% | |
| 9501 x 5834 (1.29Mb) | 1296 x 796 (535kb) 59% | JPG -> PNG |
| 9501 x 5834 (1.652Mb) | 1296 x 796 (535kb) 59% |
There isn’t a universal best image file size. However, our rule of thumb is:
You want the smallest file size possible that meets a minimum quality standard determined by your brand guidelines (or designer). How you get the smallest file size depends on numerous factors, techniques, and optimizations.
There is always a trade-off between visual quality and file size, you just need to find the right balance.
WebP is a modern image format developed by Google. It offers superior compression while maintaining image quality, making it an excellent choice for reducing file sizes and improving website performance.
We've written up a short article on webp if you'd like more information, or you can review a more technical explanation from Google.
There are many ways to optimize images, and most Content Management Systems (CMS) these days have image optimization built in! However, they can’t do it all for us, and nor should we let them. Providing optimized images in the first place is always going to result in a more optimized result.
Here’s our general process for optimizing images before uploading them to our CMS of choice, HubSpot CMS:
See each additional section for further details on specifics.
Be sure to have the image saved to your PC or laptop and then visit https://squoosh.app/
Drag and drop the image onto the large pink area and continue on.
This is "always" situational. Generally speaking, for images on website pages, blog post content, etc., the easiest way is to:
You want to find the biggest width that the image is ever rendered at on any device port. This number will be the maximum width that the image ever needs to be. Then double this number to keep retina screens looking crisp, and we get our final number:
648 x 2 = 1,296
So for this image, and in this situation, i.e. any image within the body of our blog post, 1,296px is the maximum any of our images ever need to be.
In Squoosh you can toggle Resize which then allows you to set the specific width and height of the image:
Your website visitors don't care whether your picture of a cat is a PNG, a JPG, or anything else. All they care about is that it loads quickly and looks nice.
We’ve created the decision process in this infographic below. This decision tree isn’t the be-all and end-all, but it is a “general best practice” for deciding on image formats.
Here are the rationales for using each:
JPG: JPG is kind of the default image file format. You should usually use it when your image is not a vector graphic and does not contain any transparency.
PNG: The main reason for using a PNG is when the image needs transparency and the cost of the transparency is less than the performance hit for having it.
SVG: This format, unlike the other two, is a vector-based image format. This means that it can be easily resized without significant performance issues. However, this comes at other costs, such as the level of detail of the image. SVGs are usually better for graphics than for concrete photographs. You should stick to SVG if your image is already in a vector format, and does not contain embedded images or gradients.
The overarching goal is to select whatever file type gives you the best ratio of image quality, clarity, and file size.
PNG files allow for an alpha channel, which is something that JPG files do not have. This means that if your image has some level of transparency, then generally, PNGs are the way to go. That being said, it's always good to ask yourself: Does this image really need transparency?
This is an important question because transparency increases file size by a lot! Be clear about whether transparency is required.
The main reason for using transparency is when you need to show other images or website elements behind the image - for example, a gradient background color.
Shadows generally need transparency, however, if the background color is "solid" we can easily export the image with the solid color background, negating the need for transparency but still getting the same effect.
When this doesn't work is if the image is overlayed on another image, or a gradient background, and its position cannot be fixed or determined. In this case, transparency would be required.
However, always weigh up whether the visual benefit of the transparency outweighs the performance cost of file size. In our example above, would it be more optimized to create a single image as a complete composition, with a solid blue background? Again, situational, but worth considering.
Generally speaking, SVGs for graphics will always be the most optimized approach. They look the best and can scale to any size (presuming they are made correctly). However, be careful, if a vector has an image, like our example below, the SVG will embed the image, enlarging the SVG file size by a lot—how much depends on the complexity of the image.
In the image above, if the image of the woman wasn't present, or was perhaps replaced with a vector illustration instead, this would be better suited for an SVG. However, as it's not and we need transparency, this now needs to be a PNG. We've put a small comparison table below with the varying file sizes:
| Shadow | Image | Filetype | Size |
| No | No | SVG | 27kb |
| No | Yes | SVG | 495kb |
| Yes | No | SVG | 28kb |
| Yes | Yes | SVG | 495kb |
| No | Yes | SVG | 176kb |
| Yes | Yes | SVG | 198kb |
As you can see, an SVG with an image is 1667% larger in file size—this is a huge difference and definitely something that should be considered, even at the design stage. Our decision on the image above would be:
PNG - No Shadow - Image - 176kb, assuming the image of the women is mandatory.
Squoosh has a lot of optimization settings—a lot of which go way over the scope of this article. However, we've listed below some of the common settings we use for each file type:
We would usually go with the defaults that Squoosh provides here:
However, feel free to play around with the quality slider. You get a great side-by-side comparison view in Squoosh to see what the visual quality is like. We generally find that with anything lower than 60 you start to lose too much image quality.
For PNG files our preferences are:
You can also play around with the Effort setting to see what difference it makes to quality and file size, but otherwise, leave them as above.
When you are happy with the optimizations, simply click the blue download button in the bottom right-hand corner of the screen:
You should give your image a well-thought-out, descriptive name. This is helpful for both search engines and humans visiting your website. Many people with visual impairments rely on screen readers to understand your website, so having good image names helps make your website more accessible to them. And making your website accessible can improve your position in search rankings, too.
Here are some best practices for naming your images for SEO:
The above points are all from this article: https://delante.co/does-image-name-affect-seo, but with our quick summary on things.
This is all well and good, but let's get into some examples:
Filename: navy-blue-merino-zip-next-jumper.jpg GOOD
Alt: Navy Blue Merino Zip Neck Jumper GOOD
These titles are descriptive and formatted well. A human, a visually impaired device, and a search bot will be able to understand them.
Filename: MC19VUE-used-DACIA-SANDERO-STEPWAY-HATCHBACK-09-TCe-Essential-5dr-petrol-BLACK-2019-XC-M-01.jpg TOO LONG
Alt: Vehicle image 1 BAD
These titles are mostly meaningless. A search bot or visitor using screen reading software would have no clue as to what the image shows.
Here are some best practices for image optimization:
By following these best practices, you can ensure that your images are optimized for web use, improving site performance, reducing file size, and enhancing user experience.
Image optimization is a crucial step in improving site performance, reducing file size, and enhancing user experience. By understanding the importance of image optimization, choosing the right file format, compressing images, and using advanced techniques, you can ensure that your images are optimized for web use.
Imagining something new for your website? Whether it's a sleek theme or a little extra sparkle in your content, we’re here to lend a hand. Whenever you're ready to brainstorm, reach out to us here!