Nowadays, images are an indispensable part of the web. However, it wasn’t always like that. Only in 1993, the Mosaic browser would introduce images along with content in web pages. Some formats, like GIF and JPEG, already existed in that time and others like PNG and SVG, would only appear in the 90s. Images are used for multiple purposes, like showing pictures, branding, illustrations, charts and many other things.

Because of this variety of use cases and formats, sometimes choosing the right approach can be confusing. Should logos be SVG or PNG? A screenshot, JPEG or PNG? How good the quality of an image can be without generating a file too large? Understanding how each image format works and what are the trade-offs for each one can help answering these questions.

Over the past years, working with both digital design and front-end development, researching and testing different tools helped me to clarify some of these questions. In this article, I’ll show a little bit about how each format works, in which aspects each one is good at and ways to compress and save them for use on the web.

JPEG

Created by the Joint Photographic Experts Group in 1992, and named after them, JPEG is a lossy raster image format, which means that every time a compressed JPEG is saved, some information will be left behind, irreversibly.

JPEG takes advantage of flaws in the perception of the human eye — we tend to be more sensitive to lightness than to colors — so it uses a compression algorithm that discards information we are not good at perceiving, hence the naming “lossy format”. The amount of compression applied to a given image will be directly related to the quality and size of the resulting file. The technical side of JPEG compression goes far beyond this if you want to go deeper, check out this article written by David Austin.

Uses for JPEG

Because it works with luminance and color compression, JPEG will work very well for pictures and