Most Used Image Formats on the Web

One of the freshest web design trends  is using quality, large images as backgrounds or parts of the content. Images do not only enrich your website’s appearance, but tell stories and help visitors get oriented through content. They build your brand identity.

What is Important to Know about Your Website’s Images?

There are two main types of image files: raster and vector. The raster image is a dot matrix data structure which represents a grid of pixels or points of color. That’s why when such an image is enlarged you may see lots of tiny squares called pixels.

Information on vector images is stored as curves and vector functions. Zooming in and out does not influence quality which means that you might scale vector images to any size without getting pixelated and loosing quality.

Which are the Most Common Types of Image Formats around the Web?

JPEG/JPG  (Joint Photographic Experts Group) – Raster Format

JPEG is the most widespread image format. This file type enables you to compress size allowing JPEG images to load quickly on the Web. JPEG supports 16 million colors which makes them a perfect choice for digital photography.

If your JPEG file is larger than necessary, you can easily compress it. There is a lot of free online and offline software that can enable you resize images. You can opt for compression ratio and balance in quality and file size (scalability). The common image scaling is as follows: 80-100% – high quality; 60-80% – medium quality; below 60% – low quality. Compression below 51% leads to considerably worse image quality and a big difference when compared to the original.

JPEG is the Best File Format for Photos.

• small size
• rich colors
• no transparency
• no animation

GIF (Graphics Interchange Format) – Raster Format

The GIF format is used for creating tiny, short animated images. It allows a separate palette of up to 256 colors for each frame which makes the GIF well-suited for graphics or logos, but less suitable for reproducing color rich photographs. Unlike JPEG, GIF supports transparency. This enables you to put the GIF over other elements of your website and avoid their overlapping.

GIF is the Best File Format for Animated Images.

• small size
• animation
• transparency
• only 256 colors

PNG (Portable Network Graphics) – Raster Format

PNG was developed to build upon the purpose of gifs. There are two types of PNG files – PNG-8 and PNG-24. We decided to focus your attention on the second type, since the first one supports only 256 colors and we do not recommend it so strongly. PNG-24 offers a range of attractive features such as color depths, support for sophisticated image transparency and higher quality than GIF. It is suitable for painted images, navigation buttons and logos. Due to the high resolution and rich color palette the file size is unsuitably large and may lead to difficulties with your website’s proper functioning.

PNG File is the Best File Format for Painted Images.

• transparency
• rich colors
• large file size
• no animation

SVG (Scalable Vector Graphics) – Vector Format

One of the most noticeable web trends in 2016 is wider use of SVG. SVG is a vector-image format unlike JPEG, GIF or PNG. This makes it great for responsive design websites since the image looks equally good on different screen resolutions across devices.

SVG enables you also to create custom animated images. What is more, you can make interactive animation by integrating Java Script so that your website visitors trigger animations when clicking or performing other actions.

SVG was developed by W3C (World Wide Web Consortium) and is supported on most web browsers.

SVG is suitable also for the new retina displays which reproduce high quality images.

• small size
• quality with all types of resolution
• interactive format
• can not be used for photos
• still not popular format