How To Optimize Images For Web

Images are everywhere on the web — without them, websites look bleak, and shops can’t sell anything. But they matter even more for SEO and your bounce rate: unoptimized pictures will slow down your site’s loading times, which will make your visitors leave. What’s even more, Google will downgrade you in the search results. But don’t despair: optimizing images is not hard. We’ll show you how.

Read also: Reasons Your Website Might Need A Redesign

How to optimize images for web

First things first: it’s not only about image sizes but also SEO. Your images must be good enough both for humans and robots. 

Choosing the right format

There are a lot of formats out there, from the good old JPEG to weirder ones like HEVC and WEBP. But let’s start with the most widespread — JPG. It’s the best when it comes to photos and artwork. It’s great when it comes to compression, but be careful — sometimes one can overdo it, resulting in a mess. 

PNG is good for lossless compressions. Use PNG if you have a screenshot with tons of details or a logo with transparent elements. But in 2022, there’s a third player out there called WEBP. It’s essential for faster load times, so when possible, use WEBP. CMS like WordPress can create WEBP automatically, optimizing your images for you.

So, to sum up, in most cases, JPEG is the best, most versatile choice. PNG is a good alternative. But for faster load times WEBP is the king.

Image size

That is what matters the most when it comes to loading speeds. Even though modern download speeds are blazing fast compared to how they were 15 years ago, you still have to consider image size. As per BBC, about 50% of people won’t wait for your site to load if it takes more than three seconds. So, do everything to make each image smaller. Here are a couple of options:

Adobe Photoshop (and almost every single photo editing tool) has a Save for Web option. It allows you to reduce the size of your image without seriously impacting its size. There are other options: Optimage for batch processing; Squoosh is a great tool that allows you to resize a picture right in your browser (TinyPNG works too). And if you have a Mac, it already has an option to convert (and resize) a picture built in the Finder.

But what size is the best? We advise you never to upload pictures that take more than 200 kilobytes. And ideally, you should target 70 kilobytes. 

ALT attributes

After you’ve optimized your picture, it’s time to think about attributes. They are significant both for SEO value and accessibility.

Alt attributes allow the browser (and Google) to understand what a picture is without loading it. Appropriate attributes will help you with SEO, bringing you more visitors. Don’t forget about attributes if you want your pictures to appear in Google images. 

And by the way, proper naming is also important: your image must bear the name of what it represents (don’t make it overly long).