What Is the Right Image Format for Your Website?

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

As of March 2017, images make up over 65% of web content.

This is not surprising: images add beauty, communicate messages, tell stories and create connections with your website visitors.

The flip side is that, if not used correctly, images are often the main cause of a slow website and poor user experience.

Using images correctly on the web mainly involves two things:

• Choosing the right image format
• Optimizing your images.

In this article, I discuss the first point. In particular, I introduce the image formats that work best on the web and what kind of images they are most suitable for.

But before I go any further, let's briefly clarify some terminology.

Raster/Bitmap vs Vector Images

Raster or bitmap images are made of a two-dimensional grid of pixels. Each pixel stores color and transparency values.

Raster images don't scale very well: if you enlarge a raster image, it will lose sharpness and quality. Popular raster image types for the web are JPEG or JPG, GIF and PNG formats.

Here are two raster images (JPG) of an apple. The first one is the image at its natural size. The second one shows a detail of an enlarged version of the same image

[caption id="attachment_151787" align="alignleft" width="400"] Example of raster image at its natural size.[/caption]

[caption id="attachment_151788" align="alignleft" width="300"] Detail of raster image enlarged well over its natural size.[/caption]

Notice the degradation of the enlarged version of the image with respect to the original copy.

By contrast, vector images are made of lines, shapes, and path points. Information for vectors are not stored in pixels. Rather, they are stored in mathematical drawing instructions, which are completely pixel-independent. Alex Walker puts it very well as he refers to SVG, the most popular vector format for the web, as follows:

SVG isn’t an image format — it’s more of an image recipe.

Why JPEGs are like McDonalds Apple Pies (and SVGs are not)

One implication of being resolution-independent is that you can scale vector images to your heart's content: they will always look crisp and awesome, perfect for retina screens.

[caption id="attachment_151794" align="alignleft" width="236"] SVG graphic at a small scale.[/caption]

[caption id="attachment_151796" align="alignleft" width="300"] Detail of enlarged SVG graphic.[/caption]

Both images above are views of the same vector graphic, but in the second one, the vector is rendered at more than double the size with respect to the first. Yet, there is no loss of quality.

Lossy vs Lossless

Continue reading %What Is the Right Image Format for Your Website?%

by Maria Antonietta Perna via SitePoint