Image Optimization: A Comprehensive Roundup - pt.1

In the beginning, the World Wide Web was all about optimization. Standard speed was around 3 kb per second, and hosting space larger than 5 MB was expensive. Then broadband became available for everyone, and web designers grew less and less obsessed with image optimization. Nowadays, younger web developers have almost forgotten optimization principles, so… why not having a quick recap?

The first images on the world wide web were only in JPEG and GIF format, PNG support was added later by Mozilla (Internet Explorer supported it since version 4, but transparency did not come until version 7). The SVG format added, finally, support for vector images.

We assume that everybody knows about these formats and when to use them, so we’d like to elaborate a bit more on situations in which a particular format is not the best option.

When to use it - Suitable for every photographic image.

When not to use it:

When to use it:

When not to use it - Basically, GIF's should be rarely used since in most cases 8 bit PNG performs better.

When not to use it - Basically, GIF's should be rarely used since in most cases 8 bit PNG performs better.

When not to use it:

When to use it - When you need to embed vector graphics that should retain high quality in every situation (typically when designing for retina displays).

When not to use it

It's assumed that every web designer has had at least some training to understand which image format should be used in different cases, but many developers did not get this kind of training although they have to deal with images, too. So it's not a bad idea to give out a few pieces of advice.

Some clients, with a limited understanding of how web works, ask for very high image quality and suggest to use PNG, since it's a lossless format. This is a very bad choice: saving in JPEG with a comparable quality produces significantly smaller files without a noticeable difference in quality. Always make tests and compare the results if superior image quality is asked for; you may easily save hundreds of kilobytes per image.

SVG is a relatively recent addition, and it's also the most complicated graphical format to handle. That explains why not everyone uses it and, when dealing with a company's logo, the preferred choice is PNG. But using an SVG logo is certainly the best choice around for this kind of graphics. Logos usually are vector graphics: PNG converts it to a bitmap format, while SVG keeps it native. The vector version will be smaller and crisper at every resolution. Recently, SVG has added another point to its score: it's the ideal solution for retina displays. You don't need to have two versions of the same image, one normal and one for high-res displays, as with all other formats: one SVG will fit all.

Optimization is a word with a positive nuance, but when you optimize you lose something, and sometimes the compromise is simply unacceptable. When producing a full-screen background header image, it's best to make it very big so that it can cover most of the resolutions without scaling up too much. The common breakpoint for that is the typical 1920 x 1200 pixels of high-end displays, and most background images fit this resolution. Unfortunately, when dealing with larger screens, these images often fail to properly fit into the available space because the height of the header stays pretty much the same, while the width is considerably larger. In such a case you need a different background image with a proper ratio. It will be much larger than your original one and you will be probably scared by it's size (but if you use proper media queries, it will be rarely downloaded), but it's better than to show a misplaced header to some users (with high-end equipment).

We have good news: you can make your assets smaller. There are tools around that excel at shrinking existing images with very little quality reduction. They are so efficient that they should be used in every project, even with a low number of graphic assets. JPEG optimizers have been around for a while but, since the format is already compressed, the gain was negligible. Today, compression algorithms are much more effective and they can reach a decent 10%: if you have many large images, it's a fair amount of saving. But the real sweet part comes about PNGs: one of the first and best known PNG optimizers, Tiny PNG, can normally save around 60%, and it's not uncommon to get even to 80%. This service converts 24 bit PNGs to 8 bit ones; there is a loss of quality but it's usually quite small so it would not be noticed. Considering the huge saving, the trade-off is clearly on its side.

As said before, SVG files aren't always small. Since they are vectors, dimensions do not matter, but if the file is made up of lots of paths and layers, it can become heavy and slow to render. In addition, we need to consider that SVGs are basically XML files and, when generated by vector programs like Adobe Illustrator, they are usually bloated with unnecessary code. An optimization tool, like SVGOMG can do wonders but it has to be used with care because it might remove important pieces of information in the optimization process.