Unsplash

Image optimization is the process of compressing images to reduce their file size without compromising image quality.

Why should we do that?

Because Google – as well as users – does not take kindly to slow websites. Delays of even a half-second cause lower conversions, and boosting the page load speed by just 2 seconds results in 15% more sales.

Since heavy image files contribute the most to slow websites, you should make every effort to optimize your images and make Google fall in love with you.

Image optimization is nothing new and every site owner does it. Consider it a part of your job as a marketer to ensure that the sites you are managing remain nimble and agile, and a delight to load.

Use this guide to understand everything there is to know about image optimization so you can create economical websites with high-quality visuals.

What is Image Optimization?

Image optimization is the art of creating, saving, and delivering website images in the smallest size possible, with the most optimum quality. This means, using formats, dimensions, and size variations to ensure that the file of each image size is small but the quality is not affected.

For example, when you make a communication logo for your brand or design a favicon for the website, the right format, size, and dimensions can be the difference between a logo/icon that loads immediately and the one that goes berserk when you try to zoom it in.

There are a variety of reasons to achieve image optimization but the most important one is page speed. Large images cause the page to load slowly. When that happens, visitors get frustrated and leave the site. This translates to a bad user experience and Google penalizes the site by ranking it lower in SERPs.

We’ll go into other reasons shortly but we hope this one is sufficient to appreciate that image optimization is truly a big deal.

Why Do We Optimize Images?

There are several reasons to do that. One we explained above. Let’s get to the rest.

·        Optimized images create lighter web pages.

Experts recommend keeping a web page’s total weight under 1MB ideally. 2MB at the most. Of this allocated weight, un-optimized images take up the most space. Around 75% to be precise. These heavy, high-resolution files may make the site look fancy but at the cost of site ranking, visits, and conversions.

When we optimize the images, we un-bloat these pages and drastically reduce the overall weight of the page as well as the site. Lighter sites load quickly and nobody can detect the change in quality.

·        Google ranks optimized imagers higher than other visuals.

 

Google prefers optimized images – with lower sizes, good quality, and proper alt-tags – over-bloated images with incomplete information.

When Google finds unique images from your site that contribute to faster page loading and offer a great user experience, Google ranks them higher on its image search. If they are truly unique and people click on them to get to your site, it increases your brand reach and repute with Google.

It is especially true for e-commerce sites that are usually image-heavy. Optimizing your product pages, as you can gauge, can go a long way in improving your SERPs.

·        Optimized images improve conversions

Images that are lighter to load increase page load speed and retain a large number of visitors on site. More visitors mean more potential buyers browsing your products. It directly influences sales and improves your conversion rates.

Leaner pages with optimized images also reduce the page bounce rate which again helps Google rankings and brings more visitors to the site.

·        Lighter load on network resources

This is an often-overlooked aspect of the debate and we need to talk about it. Not all of us view the web with the most abundant resources. While your heavy and complex site may be quick to load on someone’s superfast Wi-Fi, what about mobile-only users who have to contend with data limitations and resource restrictions?

When you don’t optimize your images (and your sites on the whole), you only focus on a tiny minority of users with swanky devices and lightning-fast connections.

To create websites that cater to all demographics with less reliance on network resources, optimization is the way to go.

·        Healthier websites with quick uploads and instant backups

Smaller file sizes are easier and quicker to upload. If you run an eCommerce store, optimized images can lessen your upload time to half. Creating backups will also be quicker and more efficient. No more waiting for hours on end to get all your inventory online. You can reduce that time exponentially and also ensure no page freezes with bloated product images to fight with.

Image Optimization Methods

There are different ways to optimize images. Here are the top 3 most common ones to start with:

·        Image Compression

Source

This is the golden standard in image optimization. Conduct a quick Google search and all answers start with image compression. But it’s for a reason. Image compression is fail-proof. It always works and is the easiest, most straightforward way to get your images to behave.

Tons of software programs and online tools are available where you can compress your images for free and in just seconds.

If you are a photographer or a designer, you can even create your images in formats that support high-quality with low sizes. Photoshop and Illustrator both allow you to do that.

·        Vector images

Source

Ask your design team to create all their brand identity work in vector graphics.

Raster graphics on the other hand start to form pixels or entirely lose their shape when stretched beyond a point.

But keep these formats for graphical images only, such as logos, infographics, and images that contain geometric shapes. For original photographs such as product images, stick with JPEG and JPG, etc.

·        Image caching

An image cache is one of the most efficient ways to optimize web images. It uses preprocessed images stored in the cache that allows for quicker processing when the request is sent for the image. Instead of permanently storing images in a location, it uses temporary memory to retrieve and deliver the image snapshot.

It means lesser load on network resources, quicker image retrieval, faster page loads, and low page weight.

How Do We Optimize Images for the Web?

As we try to keep the balance between acceptable quality and smallest file size, three factors play a huge role:

·         The type of image file

·         Reducing the file size A.K.A image compression

·         Image dimensions

We start by choosing the right type of image file. We also look at image dimensions to see if there is any room for change there, and it usually is. We then proceed to compress the un-optimized images so they become more suitable for web performance.

Here is a detailed look at each of these factors to see how they come together to create optimized visual experiences.

·        Choosing the right type of image file

Almost all images on the web fall under these three categories: JPEG, PNG, and GIF. There are others too, WebP, for example, but since it is not supported by all browsers so it doesn’t make much sense to discuss it.

For this guide, we are going to stick with file formats that are used by everyone and supported by all browsers. So, coming back to them…

JPEG: It is a raster graphic file. Great for digital photography as it supports a huge color library. Details aren’t that sharp, though. Smallest file sizes.

PNG: Supports the sharpest details. Great for screenshots, drawings, images, etc. that need to retain their details. Perfect for transparent images. Use for higher quality images.

GIF: Supports animated images. Uses only lossless compression.

Choosing the right image file means you are starting the work correctly. From here on, if the image needs compression, you won’t have to worry too much about quality reduction as the image will already be in a much better shape.

·        Working with image dimensions

Dimensions deal with the height and width of the photo. When we source images from a phone or a digital camera, we get file sizes that are huge in size and dimensions. 5000 pixels, 2MB weight, and a whole lot of fine detailing.

While these pictures are of the highest quality, uploading them as is on your site means putting a huge barrier on your door and keeping everyone away. Since you don’t want that, these files will need to be compressed. There are no two ways about it.

So, here is what you can do. You can choose several image compression tools to bring the file size to something more appropriate for the web. This manual exercise can take up a lot of time but will ensure that you view each picture before it’s finalized so quality control is maintained.

On the other hand, there are tons of web plugins that automatically compress large file sizes to create optimized web pages. The method is quick but there is less control on quality. You may need to check individual images to make sure. We suggest using this method when there are fewer pictures to work with.

·        Compressing the images

Now, we come to the heart of the matter. Image compression is the art of finding the balance between quality and size.

All the major photo editing software – Photoshop, Affinity Photo, and others – take care of compression automatically. With built-in features, they allow you the freedom to optimize images as per your needs before you save the edited file.

If you are not a designer, online tools abound let you compress images in seconds with just a few clicks of a button.

Since image compression is mostly an automatic thing, I want to talk about the art that goes behind it.

–          Lossy Compression

It’s a compression technique that reduces the file size significantly, but at the cost of quality. If the original file is not high-quality in the first place, lossy compression can damage it beyond care.

If the original file is of good quality, you may be able to get away with quality reduction as the difference may not be too noticeable. JPEG formats use lossy compression and create irreversible file alterations.

Simple words: you cannot undo it, and cannot retrieve the earlier, original version.

But: it does reduce the size the most.

–          Lossless Compression

Perhaps you can gauge from the name, it is a compression method with no loss. I mean, the file size is brought down a little but the quality is not compromised (and that’s why the size reduction is not too significant).

PNG formats support lossless compression and you can retrieve the original files as the changes are reversible.

Image Optimization Tools and Programs

We have mentioned Adobe Photoshop and Affinity Photo as two of the many image editing programs that allow for automated image optimization. However, you have a whole treasure of them to choose from.

I’m going to list 5 (actually, 6) that are popular, efficient, and quick.

1.     Tiny PNG + Tiny JPG

These sister websites take your unnecessarily large images and make them smarter, lighter, and quick to engage. Using simple drag and drop features, you can simply upload (drag) your PNG, JPG, and even WebP files and get them fresh-from-the-oven optimized in minutes.

2. TinyImage

TinyImage is a free online image compression tool from Attrock that compresses and optimizes your images without compromising on their quality. You can leverage this tool to reduce the size of your JPG and PNG images with ease. The tool is user friendly and allows you to compress your images with a single click and download the compressed images instantly. You can compress up to 5 images at once.

2.     ImageOptim

It allows you to create images that are lean, light and optimized. By removing redundant details, you get images that are poised to increase your image rankings and influence your SEO KPIs in all the right ways. It works with drag-and-drop features like all the smart tools out there and helps with both JPEG and PNG compressions.

3.     JPEG Mini

Another great image compression tool – it now supports video compressions too to offer you visual optimization across assets. It’s not a browser-based tool, though, and you’ll have to download its trial version to see what you are getting. Please also note that it only supports JPEG. For your PNG and GIF images, you’ll have to go elsewhere.

4.     EZ GIF

It’s a very straightforward tool with no gimmicks. You upload the image that needs compression. Choose your preferred file type and click convert. The image will be compressed and converted into your chosen format. It offers multiple conversion and optimization choices. Best thing: it’s free to use.

5.     Image Resizer

Another image compression tool that’s available for free. It works on your browser (no need to download anything) and can compress multiple images (20) in one go. Supports both JPEG and PNG and retains the image quality to a point where you won’t be able to spot the difference.

Image Optimization Best Practices

People have been optimizing images for a long time now and there are some established practices, rules of thumb, and general good ideas that you should follow when you start your own image optimization journey.

Here are a few nuggets of knowledge that we have gathered for you.

a)      Use descriptive file names

When naming your image files, instead of using device-assigned names (IMG-20221602.JPG), try using titles that describe the image (cat-doodle-drawing.jpg).

It helps search engines that are crawling web pages for relevant information and can be a step towards a strong image-SEO strategy.

b)     Use captions and alt-text

Captions are the smaller texts that show underneath an image to describe what’s happening in the picture. They not only enhance the reading/viewing experience but are helpful for Google and other search engines when they are crawling for information.

Alt-text (alternative text) are also image descriptions that are used by screen readers to help viewers with visual disabilities. An alt-text that succinctly describes the image using appropriate keywords is ranked higher and also improves brand reach.

c)      Compress the files

We have already talked about it at length but sharing here just for good measure. Try to strike the right balance between quality and size. If you are using a plugin that compresses files, aim for one that stores those files on external serves to further reduce the burden on your website.

d)     Use vector graphics

Again, we have talked about it but it’s worth mentioning. Many simpler on-site elements require graphics. Logos and icons, for example. Creating them in vector gives you sharper and more trustworthy images that scale well at all sizes and retain their quality. SVG is the most commonly used vector graphic format.

e)     Avoid placing text within images

The practice is dated and more suited for amateur Instagram quote blogs than a professional website. Always try to use web fonts as they take up less space and can hold well when stretched far and wide.

f)       Utilize lazy loading for images

It is an image optimization technique that loads the content of the page in order of its importance to the viewer.

For example, when you visit a page, there is a lot of content that you can only see when you scroll down. With lazy loading in place, that content will only be loaded to the page IF you scroll down. If you don’t, it will never be loaded, hence reducing the pressure on the page performance.

g)      Use responsive images

Responsive images respond to the size and orientation of the device. They automatically adjust themselves to fill up the screen for the best viewing experience. Ask your design and development team to send you responsive images to work with so you can ensure that every time you run a campaign, its visuals are doing their best to engage with the users, with no device restrictions in sight.

Conclusion

Image optimization is one of the most potent tools you can employ to boost your image-SEO. It keeps your photos functional, pages lighter and breezier, and the overall user experience poised for great conversions.

Having said that, I want to mention that this guide, though comprehensive, does not cover every aspect of the process. You can use it as a strong starting point but you’ll really learn the nuances of it when you have to deal with image optimization daily. We hope this article has given you enough to go on and will be helpful to you as you settle into your new marketing role.

---