How to Optimize Images for Web: A Practical Guide

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:

• What is image optimization?
• How does image compression work?
• Why is image optimization important?
• Highlighting poor image optimization
• What is the webp format?
• How to optimize images for the web
• Best practices for image optimization
• Conclusion

What is image optimization?

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

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.

How does image compression work?

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.

Why is image optimization important?

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.

Highlighting poor image optimization

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!

Our optimization results

We ran through the first 5 images on the audit and had the below optimizations:

What is the ideal image file size?

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.

What is the webp format?

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.

How to optimize images for the web?

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:

1. Upload the image to Squoosh
2. Figure out the max file size we want
3. Find the right image size
4. Select the ideal file format, such as JPG and PNG images
5. Configure quality settings
6. Download the optimized image
7. Rename the image and update the alt text

See each additional section for further details on specifics.

1. Upload your image to Squoosh

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.

2. Figuring out the max size

This is "always" situational. Generally speaking, for images on website pages, blog post content, etc., the easiest way is to:

1. Right-click on an image and click Inspect Element
2. Then hover over the image code
3. This will then display the "rendered" image width and height

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.

3. Adjust the image dimensions

In Squoosh you can toggle Resize which then allows you to set the specific width and height of the image:

4. Figuring out the ideal file formats

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.Most images will be either a JPG, a PNG, or a SVG.

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.

A quick note on transparency

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.

When should you use transparency?

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.

A quick note on SVGs

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:

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.

5. Configure quality settings

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:

JPEG Settings

We would usually go with the defaults that Squoosh provides here:

• Type: MozJPEG
• Quality: 75

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.

PNG Settings

For PNG files our preferences are:

• Type: OxiPNG
• Interlaced: Unchecked
• Effort: 2

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.

6. Download the optimized image

When you are happy with the optimizations, simply click the blue download button in the bottom right-hand corner of the screen:

7. Rename the file and update the alt text

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:

1. Make Sure File Names Are Relevant: Imagine describing the image to someone with a blindfold on. A full description, like "man-wearing-yellow-shirt-eating-hamburger" is what you should aim for.
2. Use Keywords: This is more opportunity to add further related content to the topic being covered. Think of what keywords are relevant to the image in question, however...
3. Do not "keyword stuff": If you can get your target keyword in the file name, great, but don't force it. Keep it natural sounding.
4. Be brief: Focus on the core of the image when describing.
5. Space Words with Hyphens: This gives images URL-friendly names and is good practice i.e. `man-in-blue-jumper.jpg`
6. Keep filenames all lowercase: Instead of "Cat Playing With Toy", make it "cat-playing-with-toy".
7. Make Alt Text SEO-Friendly: Do your best to be descriptive, yet short—try not to go beyond 125 characters.
8. Don’t Use Complex Strings: We correctly name images for bots, but also humans—an image with fd87yhhd89f.png looks suspicious. As a rule of thumb, if it is the default name your phone gives an image, change it.

The above points are all from this article: https://delante.co/does-image-name-affect-seo, but with our quick summary on things.

Examples

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.

Summary: Best practices for image optimization

Here are some best practices for image optimization:

• Use the right file format: Use JPEG for photographs, PNG for graphics, and GIF for animations.
• Compress images: Use image optimization tools to reduce file size.
• Resize images: Resize images to the correct dimensions before uploading.
• Use alt tags: Use alt tags to describe images for search engines and accessibility.
• Use descriptive file names: Use descriptive file names that include target keywords.
• Optimize for mobile: Optimize images for mobile devices to ensure fast loading times.

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.

Conclusion

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!