How to Optimize Images for The Web

There are many ways an image can benefit your website. Sure, an eloquent style of writing can be enough to attract an audience, but an image can always be a nice addition. Especially when you’re running a photography website – how else can you display your best work without using the best quality high-resolution pictures?

That said, images with good quality come with a bigger size – which can be a problem for your site’s performance. So, how to maintain your performance while still putting crisp-looking images on display? Well, the answer is simple: through image optimization. You can cut down the size of your pictures up to half of the original size or even more – and your picture will still look good! Today, I’m going to show you how to optimize images for web and other things that you need to know such as choosing the right image file format and compression type.

Why Is Optimizing Images Important to Your Website?

Making sure your site is up to standard is every web developer’s responsibility. Out of many important aspects, images are what you should be looking out for if you wish to deliver the best experience for your visitors aesthetically. Here’s how image optimization can benefit your site.

• It can help your page load faster. Basically, it takes less effort to load images with small size – which adds to the overall user experience of your site and reduces bounce rate as speed increases.
• It uses less bandwidth and storage space. Smaller image files don’t take up much space. It’s a great boon to have – especially if your hosting package plan doesn’t come with unlimited storage.
• It’s beneficial for SEO. It will be easier for search engines to crawl your site and collect data. Google will appreciate it and may consider moving up your site on the search engine result page.

What Image Formats to Use for Your Site?

First of all, different image formats have their own uses. If you’re not sure what an image format is, take a look at the last three letters after the dot in the image file name (e.g. example.jpg).

Knowing which ones to use is the first step toward utilizing images effectively. So, let’s take a look at the four commonly used image types below.

JPEG

JPEG is the most common image format you’ll find anywhere. Images with this format are compressed, which results in a smaller size.

That’s what makes it ideal for photos. With a smaller size, you can store a whole lot more pictures on your site.

However, the compression causes some details to be lost – that’s why it’s called “lossy compression.” If you constantly take screenshots with text or small details, it’s better if you steer clear of this format as compression might make them look choppy and the text unreadable.

But, it’s completely fine to use this format for photography (it’s even recommended) because the difference is often unnoticeable even though the format provides a much smaller image size.

PNG

PNG stands for Portable Network Graphics. Different from JPEG, this image format is based on lossless compression meaning the image fully maintains its quality. It’s a perfect choice for screenshots and logos as details typically look crisp and clear.

What’s more, this format supports transparency and makes for an obvious choice if you’re running an online store that sells editable visual elements such as clip arts or templates.

GIF

If you see an animated picture, you’re most likely looking at a GIF format image. The compression of this format is lossless, but the size can be smaller than a JPEG. Using GIF for photography may not be ideal as you’ll notice a difference in quality between this format and the original file. This is because GIF has a more limited color range than JPG (only 256 indexed colors).

However, its unique feature is what makes GIF irreplaceable, as almost no other image format has the ability to put animation in pictures. If your site needs animated images to spice up the visuals, add flair or explain subjects, then GIFs are the go-to option.

SVG

SVG which stands for Scalable Vector Graphics is representative of its name. Since it’s a vector format, you don’t have to worry much about the quality. It’s based on lines and curves. So, when you zoom in, you won’t see little choppy blocks – pixels – like you would with many raster file formats out there (JPEG, GIF, etc.).

The same reason is also why SVGs are highly scalable. You can set its resolution to any size no matter how large – and you still won’t see any decline in quality at all.

It’s perfect for sites with themes that support retina displays. However, SVG can’t handle photographs well since it’s too complicated to scale so many lines and curves at once. If you need to scale two-dimensional pictures (such as logos or icons) without losing quality, SVG is a suitable choice.

Image Optimization and Compression

One of the most effective ways to reduce the size of your images without sacrificing much of the quality is through image compression. Earlier, I have mentioned quite a bit about lossless and lossy compression. In the following sections, I’ll shed more light onto the two and which one you should choose.

What is Image Compression?

Simply put, image compression will trim non-essential information from your image so that it can become smaller in size. Now, the standard of presentability lies on the author’s intent. So the compression ratio is completely up to you.

For example, if an image is supposed to be displayed on the header for a photography site, reducing the size too much won’t be ideal. A header needs to have a large resolution, and choppy pixels will be more visible on a large resolution image.

The amount of quality to be removed depends on whether you go for lossy or lossless compression.

Lossy vs Lossless Compression

There are two types of compression that you can use – lossy or lossless. Same as the image file formats, knowing the difference between the two is important to get the most of your picture.

When to Use Lossy Compression?

So, with lossy compression, the most commonly used method transform encoding. It’s an algorithm that attempts to balance out the color using the DCT method (Discrete Cosine Transform).

The process gets rid of some of the colors and causes the image to have larger pixels. Despite this, it doesn’t necessarily mean that the quality will be bad. The decreasing quality will only be noticeable when the process is repeated several times, or you opt for a heavy compression ratio.

Lossy compression can be ideal for an online store where you have lots of products to display. Usually, the resolution for a product thumbnail can be rather small too. But still, in large quantities, the pictures can take a lot of storage space. With lossy compression, each thumbnail can be suppressed even further, and the small resolution will keep the pictures looking crisp and clear.

All in all, lossy compression is there if you think the image’s size is too big and where you can sacrifice some image quality. If your image won’t be zoomed in on or is a small one, you’ll definitely find luck with using lossy compression.

When to Use Lossless Compression?

With lossless compression, the data contained in the original image file is preserved. Basically, when using lossless compression, the data responsible for displaying the image is untouched, but metadata attached to it is removed, leaving it somewhat bare. While the reduction in file size will most likely be nowhere close to lossy compression, it’s still a great choice.

You can choose lossless compression if you can’t justify a decrease in quality to any degree, yet still, wish to reduce size.

If you need a lot of detail in your images, lossless is the way to go.

So, if you’re running a tutorial website that uses lots of screenshots with a text on it, lossless compression will be the right choice.

What Tools Help Optimize Images for the Web?

Now that you have learned about the differences among various image file formats and between the two compression types, it’s time to try it yourself.

There are lots of image compression tools out there that you can use. I’m going to show you the top five image compression tools for their features and functionality.

1. Imagify – WordPress Image Optimization Plugin

If you build your site on WordPress, Imagify is a great choice to optimize your images in just minutes! Installing it is also easy – just go to Plugins –> Add New, search for “Imagify,” then install and activate it.

With this plugin, you get to optimize multiple images in your media library at once while also choosing the compression level you want to apply. “Normal” offers you lossless compression, “Aggressive” lets you compress an image with only a slight decrease in quality but a larger size reduction, while “Ultra” cuts down the size the most with the consequence of lesser image quality.

What’s more, the plugin adds an informative interface on your dashboard that lets you see the size comparison between the original file and the resulting image. You can also set the output options to resize your image or convert it to another format.

Automation is also possible with this plugin. Once you set the preferences, any image that you upload to your media library will automatically be optimized.

2. Kraken.io – Online Image Optimizer

Whether you’re a designer, developer, or a WordPress/Magento user, Kraken.io is a powerful image optimization tool that won’t let you down.

It has a web interface so that you can just upload your pictures and compress them whenever you want. And, if you want to use Kraken.io on your application, you can also do so by getting your hands on its Kraken API Key.

Lastly, Kraken.io provides you with the official plugin for WordPress and Magento that lets you automate the optimization process, similar to Imagify.

As for the customization options, you get to choose a compression level between Lossy, Lossless, and Expert. If you’re familiar with how image compression works, you may want to get more involved with the under-the-hood interface by choosing Expert. You get to dictate the image quality by number, set the automatic orientation, and which chroma subsampling ratio to use.

3. JPEG Optimizer

For those who prefer a more straightforward approach to image optimization, look no further than JPEG Optimizer.

All you have to do is visit the website, and you’ll be shown the interface to upload your picture right away.

There may not be as many customization options as the other tools on this list, but that fact alone makes it suitable for easy image optimization on the fly with less distraction. You can set the compression level by number and resize your photo as well.

It’s completely free, and it doesn’t require any signup, download, or installation to enjoy its features to the fullest.

What Else? 5 Ways to Improve Image Optimization for Web

So, you have made your website faster by reducing the size of images on your site. It will certainly make a positive impact on your SEO. Not to mention, it’s likely to reduce your bounce rate as well. What’s next?

If you still want to optimize your images further – which is what I recommend – you can do so by following these extra tips below.

1. Always Use Alt Text

Alt text is short for alternative text – it’s a description you insert to explain or describe the function or/and the appearance of the image.

Why does it matter? Well, having alt text for every image you have will point toward a positive score for SEO. Alt text will help Google understand your image easier. The information obtained from the alt text can help match the image with the given context.

Without alt text, Google may misunderstand the purpose of the image and mismatch it with a different keyword than the one you have in mind. Plus, it’s also crucial for people who use screen readers to describe the picture.

2. Think Responsive

Did you know that 56% of traffic came from mobile phones in 2018? It’s certainly a lot of people – that’s why it is important to always think responsive.

What does responsive mean? Well, websites typically are shown differently on different devices. This is because their screen has a different size.

Responsive (more specifically, mobile responsive) makes sure that a website and its content has a good layout when viewed on tablet and mobile devices.

A bad layout can have a negative impact on how your images look. The image resolution can be too large on mobile and your visitors may have to scroll or zoom out to see the whole image. This makes for a poor browsing experience, and it justifies a rise in bounce rate.

Make sure to use a mobile-responsive theme on your site or tools that can help you redesign your layout for mobile and tablet view.

3. Image Sitemaps

On a website where images make up for the majority of your content, doesn’t it make sense to also aim for a spot on Google Image Search?

That’s why you should never overlook the importance of creating an image sitemap, which is one of the methods that’ll help Google obtain the information that they otherwise wouldn’t be able to find.

So, how can you do it? If you already have a regular sitemap, you can just add images to the list along with relevant details such as captions, the geographic location, image title, and the license URL of that image (if available).

By doing this, you can also dictate which one of the images you prioritize to be indexed by Google (assuming you don’t include every picture on your site). In the end, your images will have a better chance of being shown on Google Image Search results and new traffic will start racking in.

Read more about image sitemaps here.

4. Consider a CDN (Content Delivery Network)

If you want to take image optimization to a whole new level, I can’t emphasize enough the benefits of using a CDN (Content Delivery Network).

A CDN will allow your content to be distributed across various servers placed around the globe. In fact, Netflix is a good example of CDN implementation. Instead of pulling the content from its primary server in the U.S, you’ll get your content from the nearest point of presence.

From the web owner perspective, this is a huge boon that allows for much faster loading times and better performance as well as scalability.

In turn, this will make for better user experience, leading to more traffic and a reduction in bounce rate.

5. Think About Lazy Loading

Going to great lengths to ensure satisfaction for your visitors is a must. That’s why you shouldn’t make them load images that they don’t want to see. Otherwise, it will be a waste of time and resources, especially if your visitors have a bandwidth cap.

The solution to this is lazy loading. This method allows visitors to suspend the loading of an image until they “request” it.

Let’s say you’re scrolling a web page with a few pictures spread throughout the article. Then, as you read the page, you see a blurred image that’s not fully loaded. You need to click on it to make it appear (or any other prompt such as hovering, etc.).

This way, it will obviously reduce loading time by a significant amount and save a lot of data. Sounds great, right?

Wrap Up

Images are great for delivering a message that mere words can’t fully express. Although, it’ll come and bite you if you leave them un-optimized.

In the age where speed is an important aspect, image optimization will be your friend in maintaining the accessibility and performance of your website, which is essential if you care about reeling in tons of traffic. So, make sure to take proper care of your images.