Web design isn’t always cheap. But of all web design costs to the designer, we should first consider the user’s costs.
Mobile users often pay for every byte they download (and upload) away from wifi. HTML and CSS files, while getting larger every year, aren’t as large as hefty JPG, PNGs and animated GIFs. Conscientious designers know that best practice includes making websites and apps that download as quickly as possible. It’s like trimming out extra adverbs from copy, or extra div elements from markup.
If users don’t need pixels, don’t send them.
As we’ve seen, thinking “responsive” is more than slapping media queries into our code. Responsive images have their own set of challenges that designers must overcome. To make sites that work well and look great on a variety of screens, they need a smart strategy for images from the beginning.
Difficult? Perhaps. Worth the effort? Yes. A picture may be worth a thousand words, but if it weighs a million bytes, then users may give up before the picture downloads.
Choosing the Right Format for the Job
JPG, SVG, GIF and PNG (and PNG-24) — anyone new to web design may confuse the three. That’s not surprising when even seasoned veterans opt for JPG when a SVG would do, or default for PNG-24 instead of PNG-8.
JPG
Or JPEG, short for Joint Photographic Experts Group, was developed in 1991 and published in 1992 as a means to standardize pictures transmitted over the internet. Bandwidth was at a premium, so users prefered files that showed more picture for fewer bytes.
The JPG format uses lossy compression, meaning that once applied, an image can never be fully decompressed back to the original quality. It trades smaller files for reduced quality on a scale of 0 – 100. Oddly, files with 100% JPG compression have the highest quality and the worst file size. 0% compression yields the smallest files with the worst quality.
Artifacts are parts of an image that JPG compression changes for the sake of file size. They resemble blocks of homogenous color, when visible, as if herding colors into areas about 20 pixels square. Hard edges in images are the first victims of artifacts. That, and because JPG compression can look natural on complex images, means that this format is ideal for photos.
Bottom line: JPG compression works well for complicated images with lots of detail, like photos.
PNG (8-bit)
Unlike JPG, Portable Network Graphics files use lossless compression that doesn’t compound as the file is opened and resaved. Instead, PNG-8 files include a list of every unique color they use.
And by unique, I mean unique as in #FFFFFF is not #FFFFFE, although to the unaided human eye they’re indistinguishable. Each pixel is assigned to a color in the file’s list, reducing the need for identical pixels to waste precious bytes reproducing what’s already been said.
If the first hundred pixels use RGB(255,255,255), there’s no need to say so — just state that pixels 1–500 belong to color #1. For this reason the PNG format is great at compressing images with perfectly flat colors.
Bottom line: The PNG-8 format can hold up to 256 unique colors in its list, called a color table. It can also make pixels fully transparent. These facts make PNG-8 ideal for today’s trendy “flat color” look.
PNG (24-bit)
Files that use PNG’s other variety, PNG-24, look great because they use no compression. Nor do they use a color table. Every detail is preserved when saving PNG-24 files … and that’s the problem.
Opacity is another problem. While pixels in PNG-8’s images can be transparent, it’s all or nothing. Either you see them or you don’t.
Bottom line: Pixels in PNG-24 files can have partial opacity, meaning they tint elements behind them. Again, at the expense of file size.
GIF
Graphical Interchange Format, or GIF, resembles PNG-8 in many ways.
It’s universally accepted by every browser. It’s established, having been around since 1987 (somewhat younger, PNG debuted in 1996). GIF uses color tables. It’s compression is slightly less efficient, on average, than PNG. And it can make its pixels completely transparent.
Where GIFs shine is their ability to hold more than one “image” per file, and show them sequentially. That is, GIF supports animation. Animated GIF files usually find their way into content more than design, as their animations can’t be started and stopped — they’re not truly interactive. That and their slightly-higher file sizes mean that designers often prefer PNG over GIF for flat-color images.
Bottom line: If you need simple animations, GIF is the way to go. Otherwise you’re probably better off with PNG-8’s slightly more efficient compression scheme for simple images (like flat-color illustrations) or JPEG for complicated images (like photos).
Squeezing Every Byte
Compressing image files — the act of reducing file size by eliminating redundant data or altering the image for easier downloads — is crucial to making websites load quickly. Fast websites, in turn, earn more users.
Most image editors like Photoshop, Sketch and Pixelmator export compressed, web-friendly files without fuss. But they’re not always ideal. Other tools can help compress images even further.
Compression Services
As the name implies, this free, online service takes extra bytes out of any JPG file without sacrificing quality.
Compress JPG slimmed down the above image, saved in Photoshop at 70%, from 217KB to a svelte 160KB. Quality remains untouched.
2. TinyPNG
Another free service squeezes 8-bit and 24-bit PNG files for faster load times.
TinyPNG reduced the above image from 16KB to 12KB by eliminating nearly redundant colors in its color table — without affecting its quality.
How Much is Too Much … or Too Little?
Although it varies per image, our goal is to get the best quality image in as few bytes as possible. At some point, we trim too much out.
But how much? Is there a sweet spot for compression?
For JPGs
To find out, we saved the crowd photo above with increments of JPG compression. Results ranged from 45KB at 0% compression to 479KB at 100%. Contrary to what the term suggests, remember that the highest compressed JPGs have the highest quality (and largest file size).
This chart shows a dramatic decrease in the higher compression ranges. Just dropping the quality from 100% to 70% reduced the file size by almost half — a real bargain. The lower compression percentages, though, didn’t see as much of a difference. Although bytes fell from 0 – 20%, we saw quality drop too quickly to be worth the savings.
The image was 45KB at 0% compression (left) and 94KB at 30% compression (right). Although it halved the file size, the increase in artifacts, or blocky areas where JPG compression takes effect, wasn’t worth the savings.
Best practice: Don’t compress JPG files higher than 70%, or lower than 20%. This is a guideline rather than a hard rule, but we’ve found it the 20–70 range covers most cases.
For PNGs
The story gets more complicated when we look at PNG files. We ran the same experiment on this graphic:
Notice that these colors aren’t strictly flat. There’s a fine gradient over the entire composition. To account for that, we need dithering: a pattern of dots that simulate subtle gradients.
Unlike JPG, the PNG format doesn’t use percentages. The number of colors in its color table determine its quality and, to an extent, its file size. With 88% dithering, the results were, well …
In general we saw a relationship between the number of colors and file size. But not much. Photoshop struggled to find the best patterns with limited color tables. In fact, 40 colors had about the same number of bytes as 25, meaning the same file size but with much higher quality.
Best practice: For best results when squeezing every byte out of a PNG, the best approach is to experiment with different color tables. Unfortunately the right amount is a subjective matter that varies per image. When it looks “right” is up to you.
SVG
Scalable Vector Graphics, or SVG, use lines instead of pixels — vectors instead of raster images — to display line art. SVGs are actually a form of XML, easily created in programs like Inkscape and Adobe Illustrator.
SVG files can generate gradients without dithering, and scale up to fit containers of any size from older smartphones to widescreen TVs. They don’t lose resolution because, as vectors, browsers connect the dots on the fly. They can be animated with JavaScript. And instead of files that must be downloaded separately, which ties up time and server power, SVG can be embedded right in HTML documents.
Above: vector art (left) scales up well. On the other hand, raster art (right) looks blocky and pixelated.
But like PNGs and GIFs, SVGs suffer as images become more complex. They’re terrible for photos and grow quickly in file size as they gain points and curves.
Best practice: If you’re looking for the flat 2.0 look, with its sharp lines and gentle gradients, and aim for recent browsers (IE8 is out of luck), SVGs are the way to go.
