File Formats

From: wpmudev

Why is choosing the right file format important?

Because more and more visitors are visiting websites on mobile devices. Not only are network speeds relatively slower when compared to dedicated networks, but not everyone has unlimited data.

And since Google penalizes pages that load too slowly by showing them lower in search results, improving load times is a no brainer way to increase traffic, sales and conversions.

When you choose the wrong image format you could be inadvertently serving up a bigger image than is necessary. Additional image file capabilities (such as transparency), unnecessary detail and too many colours all add bloat to your images. Sometimes, these are necessary and other times they’re not. If your image doesn’t have transparency, for example, then you’re really not giving anything up if you choose an image type that doesn’t support transparency.

The key is to only add what you need.

Choosing the Optimal File Size

You also need to consider the image in relation to the rest of your webpage in order to choose the optimal file size. The average webpage is presently near 2MB so you want to stay under that limit to have a relatively fast site. This means you have to look at the total of all the assets on your site, not just images.

A large detailed hero image that is 1MB won’t be a big deal if it is the only image on a page with mostly text; however, if you’re going to display 10 large images on a page that are all 1MB then it will be a slog to load. You can compromise by displaying fewer images or showing them all at a smaller size.

JPEG 24-bit colour depth lossy compression

From: TechTerms

Supports 2²⁴ or 16 million colors. (24-bit colour depth) The format also supports varying levels of lossy compression, which makes it ideal for web graphics. Three values of 0 produce pure black, while three values of 255 create pure white.

The JPEG compression algorithm may reduce the file size of a bitmap (BMP) image by ten times with almost no degradation in quality. Still, the compression algorithm is lossy, meaning some image quality is lost during the compression process. For this reason, professional digital photographers often choose to capture images in a raw format so they can edit their photos in the highest quality possible. They typically export the pictures as JPEG (.JPG) images when they are shared or published on the web.

From: JotForm "Because JPEG uses lossy compression, images saved in this format are prone to “artifacting,” where you can see pixelization and strange halos around certain sections of an image. These are most common in areas of an image where there’s a sharp contrast between colors. Generally, the more contrast in an image, the higher quality (less compression) the image needs to be saved at to result in a decent-looking final image. "

For saving small images and images with a lot of text, the GIF format is often a better alternative. JPEG images also don't support transparency. Therefore, the JPEG format is a poor choice for saving artificial images like logos, especially if they will be published on webpages with different background colors. The PNG format, which supports transparent pixels is more ideal for these types of images.