Optimizing Images for Web

Nowadays image weight on a website can come up to 21%, so it’s really important to bring that size to a minimum...

If you ask Google what an image is, the most common answer you’ll get is that it’s a visual representation of something. Without the viewer being able to pick up, touch and feel what you are displaying, the image you provided is his only source of knowledge, hence why it should be high-quality, crisp and clean.

Good quality photos often come at a cost, because they clutter the site by taking up too much space, leading the page to load slower and rank lower on search engines. 47% of Internet users expect a website to load in 2 seconds and 40% of them will exit if it takes 3 second or longer. Crazy, right? Well, not exactly. A total page size should be about 1 to 2MB to be as fast as possible. It may seem impossible at first, considering only a single picture taken with a phone can weight up to a few MB. That’s why you should always optimize the photos you’re going to use on your site.

To back up my statement, let’s review the benefits you get with optimizing your photos:

We covered the benefits, now let’s talk business, shall we?;) Through my experience as a web developer (oh wow so fancy), I’ve concluded that there are 5 most important (never to underestimate and neglect) steps to image optimization. You may ask – but how? You ask, I deliver!

1. Naming your images appropriately and setting the alt attributes

Coming straight from your camera, your images are going to have random names. In order for you website to come up higher on a search engine, you must take care of the image SEO, where – you guessed it – naming is very important. As much as we like to think computers are smarter than us, well, for me they are only as smart as we allow them to be. Typing in a query into a search engine works with keywords. The browser is only going to put your website higher in results if those keywords relate to your image title.

Setting the alt attributes is also very important, because that’s the text that will be displayed when your picture isn’t loading correctly. Alt attributes are also what browsers for visually impaired people a.k.a screen readers use.

2. Choosing the right file format

Surely you must have noticed that when you’re done editing a picture and you’re about to save it a long list of different file formats pops up.

The three most common file formats used in websites are .jpeg (or .jpg), .png and .gif. I am not going to go much in detail about each of those, but in short, choosing the right file format will contribute to the size of the photo.

For example, JPEGs are good to use for photos with lots of colours, shadows, gradients and complex patterns, because they have a huge colour pallette to work with.

PNGs support transparency and are good to use for smaller images with transparent background, because they come with a bigger size.

GIFs are mostly used for animated images, since they only use 256 colours.

To get a slightly better idea about what I’m talking about, I’ve exported the same picture to the three different formats:

JPEG – 317.5KB in size

PNG – 2.9MB in size

GIF – 1.2MB in size

Your picture will come off with a different size solely based on the extension you go for. So which one are you going to use on your website?

3. Sizing them appropriately and optimizing for thumbnails

You should always plan your image sizes depending on where it’s going to be used. For example, if it’s making some sort of a heading section where the image is displayed in full width, you might want to consider making it slightly bigger (lets say – 2000-4000 pixels in width), so that it looks crisp even on 4K monitors. However, if you are using it somewhere else on your page, say, in a gallery, it doesn’t really have to be so big.

Optimizing for thumbnails is also really important, ‘cause ain’t nobody want a 3K or a 4K pic put in a 150×150 box!:D

4. Saving for web, which determines the quality of an image

When you choose to save for web, there are a couple parameters that you are able to twig in order to reduce the file size – change the photo quality and resize it.

We already tackled why resizing is important, so I’m going to focus more on the “image quality” thingy here. If you have an image that is pixel-perfect, sharp as a knife, you don’t really have to save it at a 100%. Speaking from my own experience, really good-quality photos can be saved down to a 50% and they look just the same. I am in no way saying that you should overlook quality in favour of size. You can experiment and see for yourself that it does have a huge impact on the file size, without really reducing the quality.

Photoshop actually has an option to save for web – when you’re done editing your image, click File -> Save for web and devices -> Choose quality and resize (if you haven’t already) -> and you’re done:)

There’s another free tool that I like to use as well, because it’s much lighter than PhotoShop and because, duh, it’s free! It’s called GIMP and here’s a link if you’d like to download it and try it for yourself. When you’re done editing your image, go to File -> Export as -> “Export” button on the bottom left -> Set quality -> Hit Export.

5. Using an image compressor to reduce the file size even further

As we said before, images take up a lot of space on a website, making it heavier and difficult to load. That’s why we must always ensure that the photos we are using are completely optimized and as small as possible.

The last step to optimizing your images would be to use an image compressor to reduce the file size even further.

There are 2 types of compression: lossy and lossless.

In lossy compression some of the data from the original file is lost, but it does lower the size significantly. Lossless compression on the other hand reduces the image without any quality loss, but doesn’t really change the size so much.

A couple of online tools I recommend for image compression are tinypng (which uses lossy compression) and compressor.io (where you can select either lossy or lossless compression). You absolutely do not have to limit yourself to the tools we suggest, rather do your own research and find out for yourself which one gives you the best results. Tell us what you found!

P.S. Are you interested in reading more about lossy vs. lossless compression?

6. Conclusion

Nowadays image weight on a website can come up to 21%, so it’s really important and essential to make sure you’ve done everything possible in order to bring that size to a minimum.

Do you have any extra tips and tricks up your left sleeve on how to optimize our images? Share with us!

Who wrote this article

Learn more about the author

Mirela Vaseva

Website Creator & Head of QA

/ IT, Software Engineering graduate 💻
/ good music, horror films, detective novels and delectable food 👌
/ YouTube videos junkie 🎥
/ animals, nature, water lover 🐱

Comments

Would you like to share something?

Optimizing Images for Web