What is the Right Image Format for Your Website

As of March 2017, more than 65 percent of web content was made up of images. This is not a surprise: images are beautiful and powerful carriers of information that intuitively connect with and tell your site’s visitors. But on both sides of the coin, when used incorrectly, images can often be the culprit for slow web pages and poor user experience. The proper use of images on a web page has the following two points:

  • Choose the right image format
  • Optimize your images

In this article, I will discuss the first point. I’ll focus on the image formats that work best on the web and the ones that are most appropriate for that situation. But before I get to that, let’s briefly clear up some terminology.

Raster images vs vector images

Raster images consist of a two-dimensional grid of pixels. Each pixel stores a value for color and transparency. Raster images don’t scale well: if you zoom in on a raster image, the sharpness and sharpness of the image decrease. At present, the mainstream raster image has these formats: JPEG(JPG), GIF and PNG. A vector diagram, by contrast, consists of lines, shapes, and waypoints. The various information of a vector map is not stored in pixels, but in precise painting instructions, which are completely pixel independent. Alex Walker has expressed his love for SVG as the best vector graphics on the web:

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

Resolution independence means you can zoom in on a vector image and focus it wherever you want: images will always look great, especially for Retina display.

Lossy vs lossless

Lossy and lossless here refer to the scenarios in which Venga compression technology compresses digital media files, i.e., pictures, audio and video. Lossy compression:

Some data will be lost. As a result, the decompression cannot be 100% restored. Lossy compression can compress a file to a much smaller size, but some of the original pixels, sound clips, or video frames are permanently lost. PCMag.com Encyclopedia

This means that, in practice, the more you compress a file, the smaller the “finished product” you get. At the same time, with smaller file sizes, you also create some irreversible mass loss. For lossy compression, you need to make a reasonable trade-off between a smaller file size and file quality. JPEG is the most lossy image type seen today. Lossless compression, by contrast, does not lose data during compression. This means that compression does not result in a reduction in file quality. But because of this, lossless files tend to be larger than lossy files. The most common lossless image formats are GIF and PNG. This information can be useful whenever you need to choose which image format to display your content in.

JPEG

JPEG is a lossy image developed by the Joint Photographic Experts Group. Today, almost 3% of all Internet files are JPEG images. The format is so popular because:

  • JPEG images can display millions of colors. So JPEG is always the best choice when it comes to displaying photography on a website.
  • Because of the lossy image, you can greatly reduce the size of the image by compressing it. JPEG images offer a variety of compression options: 60% is suitable for web images, but more than 75% will degrade the image significantly.
  • JPEG images are supported on all internet-enabled devices, so developers can use them without worrying about compatibility.

One important point to note is that JPEG images do not support transparency. Therefore, JPEG images are not a wise choice if you are going to beautify the background with a transparent effect on the page.

GIF

GIF stands for Graphics Interchange Format and is an 8-bit lossless picture Format that supports up to 256 colors. This limitation makes the GIF format useless for displaying multi-color or photographic images. Here are some reasons why GIF support has long been used on websites:

  • Because only 256 colors are supported, file sizes are usually small
  • Support transparent
  • Animation support makes GIFs ideal for displaying endless loops of animation such as ICONS, emoticons, advertising bars, etc.
  • It’s great for simple color images, but not for photos

PNG

PNG stands for Portable Network Graphics. This image format, developed by the W3C, can replace GIFs in most scenarios. Like GIF, PNG uses a lossless compression algorithm and supports both 8 and 24 bits. Both support transparency. It is worth mentioning that 24-bit PNG image transparency supports RGB. So while GIF and 8-bit PNG images become completely opaque or completely transparent, each pixel of a PNG image offers up to 256 levels of transparency. When used, 24-bit PNG has the following characteristics:

  • A web image with multiple levels of transparency
  • Support for complex photos and graphics
  • For images that often need to be exported: PNG lossless compression ensures no quality degradation after compression

SVG

SVG, which stands for Scalable Vector Graphics, is an XML-based Vector file type. Although SVG has been around since 2001, it has only become popular in recent years. The reason for this delay is that browser support for SVG has not been very friendly for a long time. Fortunately, AS I write this, SVG is already supported by all the major browsers, although there are still some incompatible bugs at times. SVG images have so many nice features that it can be a great choice for websites, especially for displaying small image logos, maps, ICONS, etc.

Advantages of the SVG format

  • SVG images are usually much smaller than raster images, especially if you make special optimizations and enable Gzip compression
  • They are scalable, which means that SVG images can look sharp on screens of all resolutions
  • You can reduce the number of requests by throwing SVG code into HTML
  • You can DIY any SVG using CSS
  • The cool thing is that you can animate your SVG using JavaScript or CSS

Avoid using very complex SVG images on web pages, as this will cause the file size to become much larger. In the end, SVG is not a good choice for images like photography, so you’re better off sticking with JPEG or webP.

WebP

WebP has been around since 2010, and it would be a mistake to say that WebP is still a new image format and not nearly as popular as JPEG or PNG. This format of pictures, from the bone is specifically for the site and born. WebP is an open source image format developed by Google that has these features:

WebP is a modern web image format that provides an excellent compression level for images on web pages. WebP lossless compression is 26% smaller than PNG, and WebP lossy compression is 25-34% smaller than JPEG of the same quality. Lossless compression of webP supports transparency but only a 22% increase in bytes. For example, lossy webP also supports transparency while supporting lossy compressed RGB, and the file size is one-third that of PNG. WebP website

The beauty of WebP is that it combines the best of JPEG and PNG in a much smaller size. At the moment, browser support for webP is good: Google’s own son, after all, and all blink based browsers now support webP. In order to achieve backward compatibility in some unsupported browsers, some smart developers have also implemented compatible solutions in IE/Edge, Firefox, and Safari. Here are some great webP resources you can use to get started:

  • WebP Frequently Asked Questions
  • What is the WebP Image Format (And Why Does It Matter)?
  • How to Select the Perfect Image Format to Optimize Your Website
  • Guide To Using WebP Images Today: A Case Study
  • Using WebP Images

Conclusion

In this article, I explain some image formats and briefly discuss their applicability. JPEG, GIF and PNG are currently the dominant image formats on the web and have been in use for a long time. SVG and webP are exciting new image formats. SVG is suitable for illustration and simple image presentation, while webP is a better choice for scenarios where JPEG and PNG are used. Have you started using SVG and webP in your development? What challenges do you face? Did you taste the performance boost?