Choose the image files: PNG, JPG/JPEG, GIF, SVG

Taimoor Sattar

There are two types of images raster and a vector image. A raster image is not good at scale. If you want to display your site on a high-resolution monitor or in retina display; then raster image is not a good choice.

Raster file formats store data related to each individual pixel, whereas vector images store data as a geometric description. Two of the most commonly used raster files format are PNG and JPEG. Whereas on the other hand vector image is good at scale as it does not blur or pixelate when the image is the zoom in.

In common, JPEG/JPG, SVG, PNG, and SVG are commonly used image files format.

JPG (Joint Photographic Experts Group) use little storage and quick to download. JPG high-resolution when you want to use photograph image as it supports a different range of color. This image format saves us storage space. When zooming into the image you will see the pixel become distorted and blur.

SVG (Scalable Vector Graphics) is a mathematically shape and curve; not a pixel. It is a lossless file format. It also supports transparent background. One of the advantages of using SVG is that it does not pixelate or blur because it is a vector image.

GIF (Graphics Interchange Format) is lossless and retain all the data in your image and it supports 256 indexed colors. One of the advantages of using GIF is that they can animate but audio is not supported. Choose fps (frame per second) that define the speed of animation of GIF image.

PNG (Portable Network Graphics) supports 256 indexed colors. One of the advantages of using PNG is the transparency and are more preferred for creating an image with no background like the logo.

Which file format you should use?

  • JPG file format is good for photo and it will save you large storage space; saves your load time of the image.
  • SVG and PNG are preferred when you want to use to display graphics assets as well on a high-resolution monitor.
  • GIF is preferred when you want to display some motion in the image like show some content of the video in image format.