Smartly saved images load faster, and customers like that, especially when they have poor reception (on the countryside, at a festival or in the subway), and I really know about optimizing websites and web apps as a professional web developer. Since this topic still causes a great deal of confusion, here is a sketch along with some analogies and explanations. Feel free to link to or quote them.
Sketches and Notes about File Size, Image Size, and Image Quality
- Handycam(era): large images displayed small unless I zoom in.
- Quality: JPEG as a mosaic with square-shaped artifacts, GIF palette as pointillism (dithering), both avoidable or else deliberately employed as an artistic retro aesthetic (see below)
- 2 kilo sounds like a lot, but digitally. 2 kilo(bytes) are very little.
The packaging comparison is not a perfect analogy, postage may match better. Because, digitally, skilful packaging often leads to shrinking and thus more efficient and more environmentally friendly data transfer. Similar to a vacuum-sealed pillow that can be stored much flatter and more compactly than in its fluffy form.
However, it’s often the weight deciding about shipping costs, and in the web it’s the so-called file size.
Image Sizes (Dimensions) and Image File Sizes (Pack Size)
The topic of file sizes confuses many, as the word image size has two different meanings. Size in the sense of dimensions appears more obvious, but also not at first sight. The richness of detail in a mobile phone photo only becomes apparent when zooming in. Differences in quality can also be identified more easily this way.
However, even visually identical images can take up different amounts of storage. Versions compressed by modern algorithms results in smaller, “lighter”, files retaining the same dimensions and quality. When we talk about shrinking image files, then it’s not a matter of cropping to specific image sections or smaller pixel dimensions, but about reduced file size to save storage space and loading time.
File size measurement actually sounds similar to weights. 2 kilo may sound a lot when you think of two kilograms. But digitally, “2 kilo” stands for two kilobytes, and that is very little. Too little for a normal photograph. On the other hand, “2 M” (megabyte) are not “mega” at all, but mostly alwaystoo much of a good thing. As a rule of thumb: except for full-page posters, each image file on the internet should always be always significantly smaller than 1 megabyte, better yet significantly below 500 kilobytes.
But how are such small file sizes even possible, given that smartphone cameras save image files that consume several megabytes of storage space per photo?
Lossless Reduction of Image Data
First, I’ll explain lossless reduction using the analogy of a pillow, so that we can easily picture it from now on:
There’s a lot of air inside a fluffy big pillow. There are vaccum packages, from which we can suck out the air to make the pillow completely flat and small. Astonishingly, after unpacking and shaking it out, it will return to being just as big and fluffy as before.
We don’t damange anything, but we still end up with a much smaller package size. Practical for storing as well as for shipping, because a smaller parcel tends to cost less in postage.
In fashion, shapewear and slim-cut pants work in much the same way, only using stretch instead of a vacuum cleaner.
So there are two types of “image sizes”: the size of the content and the size of the container.
The vacuum package, the slim shirt and the tight pants respectively stand for lossless compression in this example: same pillow, flatter pouch. Same leg, narrower pants. The content remains the same, but the volume has shrunk.
Lossy Image Data Compression
However, sometimes it doesn’t matter if the original content is completely preserved. The word loss is misleading, though, for the goal still remains to reduce the pack size (file size) without losing anything essential in the process.
Technically speaking, we do lose quality when using lossy file formats such as JPEG, WebP, or AVIF. In practice, smart software with cleverly chosen default settings should also result in a smaller file here, without visible or significant loss of quality. Smart software in this sense specifically means so-called perceptive algorithms that effectively mimic human vision. All important details should and can be preserved. If in doubt, it helps to have a look using human eyes. Specifically, very dark areas can be simplified, or very similar color tones harmonized. Limited, however, to image areas where this is barely or not at all noticeable.
Staying with the analogy of packing, we’ll forgo everything that we don’t need anyway.
Taking a short trip, for example, I don’t need a full tube of toothpaste or a whole bottle of shampoo.
brauche ich beispielsweise keine ganze Tube Zahncreme oder eine ganze Flasche Shampoo. Samples objectively contain less product, so in that sense, something is lost. But I’m not really missing anything.
Incidentally, destruction that entails significant loss can be deliberately accepted or actively pursued for artistic reasons. More on this at the end of this article.
Metadata
Apart from the actual file content, the word packaging already imples adding something like an address label or a delivery note. Such so-called metadata contain a clear specification of the image format and image size in terms of dimensions to begin with, for example, 4000 x 2000 pixels, encoded in the AVIF format.
However, there are also many optional details to add, such as location and date, information about camera, lense and other photographic details like exposure time, photographer, and a free-text comment are also common.
Additionally, depending on the format, color profiles and preview images can be embedded, which also makes the task easier for file managers and archiving software.
Finally, metadata can tell a lot that isn’t visible by merely looking at the image. Those who want to insist on strict privacy should check and possibly (let) remove their metadata. In the example on the right, despite metadata, there’s still a lot that literally remains in the dark.
However, metadata does not play a major role in the file size. Usually, metadata in image files are very small (kilobytes) compared to the actual image content (kilo to megabytes).
More important than metadata, to achieve small file sizes, is the choice of a suitable file format and compression level.
Digital Package Waste
The real digital package waste arises from choosing the wrong packaging (or size).
When I save logos or similar high-contrast line drawings, also called vector graphics, in the lossy JPEG format, then I need unusually large dimensions and unusually hight quality levels, to prevent so-called artifacts such as the dreaded unwanted stair-stepping effects in lines that should be smoothly diagonal.
And an unnecessarily high quality level increases file size without gaining any visual quality.
In general, it rarely makes sense to (mis)use an inherently lossy file format by using a quality setting of 90% or even 100%.
Likewise, when I save a photograph in a PNG or even GIF file format, I waste unnecessary storage space without improving the image quality.
So, what is the correct file format, and how do I find out which one is the best match?
The following is an overview of image formats and file name extensions, so that we can pronounce them correctly and remember them more easily.
File Formats Overview: When to use which one?
In general, there are three different ways to store image data:
- lossless vector fomat => SVG
- lossless raster graphics => PNG, GIF, WebP, AVIF
- lossless raster graphics => JPEG, WebP, AVIF
SVG: the Scalable Vector Format
Drawings with monochrome areas and clear lines profit most of lossless vector formats, or rather the one and only relevant vector format in the web, SVG, or alternatively from the raster format PNG (and formerly GIF). For logos and clear graphics, the vector format SVG beats mostly all other formats in every respect: it can be scaled up to any size without any loss of quality, free of jagged edges and artifacts, and saved in surprisingly small files.
Photos with many details, gradients and shades, on the other hand, require a photographic image format. In practice they also need at least a quick human glance to decide whether the quality still feels high-end, or, depending on the intended use, good enough. Jewelry in an online shop, with reflecting lights, skin and hair in front of a semi-transparent curtain behind which flowers and trees sway in the wind, are aesthetically either cheesy or actually beautiful, but also a major challenge when it comes to data minimization. This is even more true for the same scenery as a moving full-screen video.
Pronunciation of SVG: letter by letter (ess-vee-gee, and in German alternatively English or German: Ess-Vee-Gee). In the plural form, both languages add an -s angehängt, thus ess-vee-gees or alternatively SVG-graphics (ess-vee-gee graphics).
File name suffix: .svg
JPEG Image Format: the Classic of Photography
File name suffixes: .JPG, .jpg or .jpeg
Pronunciation: “Jay Pegg”.
It probably wouldn’t be good advice to say that “Jay Pegg” is the reverse of Peggy Jay, as the lady is less known internationally than the file format. JPEG is the abbreviation for “Joint Photographic Expert Group”, thus a united group of photography experts whose united expertise created a classic of compression, that was developed back in the 1980 already and that is still used today.
Image Formats WebP und AVIF: the Modern Successors
File name suffixes: .webp and .avif respectively
Pronunciation of AVIF: Ah! Viv! (stressing the first sillable) or like the city of Tel Aviv
Pronunciation of webp like two English words: web pee (?!)
Modern web formats like WebP and AVIF nowadays often replace JPEG, PNG, and GIF, for offering drastically smaller file sizes for the same quality. For reasons of compatibility, thus for devices and software that can’t display the new image formats yet, alternatives are often provided (graceful fallback via picture elements in HTML, or server-sides variants via accept and vary HTTP headers). WebP and AVIF support both lossless and lossy compression. That is one of their greatest advantages. PNG still remains the standard for lossless screenshots, the file sizes of which can be correspondingly large.
While JPEG came from the times of photography, AVIF and webp profit from experiences with digital video formats, many of which resembled JPEG initially. WebP is based on the video codec VP8, AVIF on AV1. Webp already reduced the file sizes without visible losses usually by around 30% compared to JPEG. AVIF goes one step further and reduces the size by another 20 – 25%.
The figures sound tempting, but realistically we must limit our expectations for these are average figures and the savings in any individual case depend heavily on the specific content of the images..
GIF: animated History, Dithering, and Glitch Art
The oldest file format mentioned here, looks back on a long history.
The pronunciation of GIF, as a word, and in German clarly starting with a hard G, has been discussed controversially in English, for some said “giff” and others said “jiff”. In any case, one thing is clear: it was never called “gee-eye-eff”.
From a technical perspective, GIF is no longer of great importance, the original GIF format results in unnecessarily large files and it’s technically obsolete. But the term GIF is still often used as a synonym for moving images (animated gifs), as back then, GIF first made them possible. Techncially, animated graphics are now mostly stored as webp or as videos, even though they might sill be called “GIF” for the sake of simplification.
Another aspekt is its reduced color palette and the dithering, in which, much like in early 20th-century pointillist painting or analog television, areas are rendered through a mixture of many small, colored dots that should ideally only be visible as such when viewed from too close a range. However, due to data-saving practices and the low resolution of screens at the time, dithered GIFs appeared visibly dotted, and also the reduced number of colors, due to the shortage of graphics cards and storage space at the time, was clearly discernible.
All that gives genuine GIF files a distinctive retro aesthetic, that, similar to classic home computers or analog video devices, which are sometimes deliberately used for artistic purposes.
Artistically it reminds, as we said, of Pointillism, among other things, but also of the coarse resolutions and palettes of weaving or industrially perforated metal sheets, like here in a work of art at the Albertina Museum in Vienna, the creator of which, unfortunately, I don’t recall at the moment.
In the past, entire software programs were stamped into punch cards in much the same way and delivered to customers.
There was absolutely no talk of megabytes back then.
Conclusion
Basic knowledge of image file formats is no artistic or technophile hobby, but important to save image files in a reasonable way, prevent digital package waste, and thereby save storage space and speed up webpage loading times.
