When optimizing frontend performance, images play a crucial role, especially in First Contentful Paint (FCP) and Largest Contentful Paint (LCP). I've noticed that articles about image formats are often incomplete or outdated.

Let's examine the average request sizes from HTTP Archive: Page Weight data:

The average request size for total web resources follows this pattern

For image resources, the average request size looks like this

Images represent a significant portion of all web resources, making it essential to understand them systematically.

Understanding Pixel, Color, and Binary Relationships

Images captured through scanners, digital cameras, or other devices are initially converted into arrays of pixels (picture elements). Each pixel represents a small area of the image with specific color information.

In computing systems, pixels are represented using binary numbers. Different image formats have varying relationships between pixels and binary bit counts. More bits per pixel allow for more color variations, resulting in better image quality but larger file sizes.

A single binary bit represents two colors (0|1 corresponding to black|white). For an image format with n binary bits, it can display 2^n different colors.

Colors are typically represented using the Red-Green-Blue (RGB) model, where each channel has values from 0 to 255. In binary terms, one byte (8 bits) can represent any value from 0 to 255 (since 2^8 = 256). Therefore, each color channel can be represented by 8 binary digits. For example, a red channel value of 255 appears as 11111111 in binary.

Image Format Overview

After digitization and color assignment, images can be saved in various file formats. Here are common image formats, their use cases, and differences:

Extension	MIME Type	File Extensions	Summary	Compression	Transparency	Animation
APNG	image/apng	.apng	Good for lossless animated sequences (better than GIF). AVIF and WebP offer superior performance but less browser support.	Lossless	Supported	Supported
AVIF	image/avif	.avif	High-performance royalty-free option for images and animations. Better compression than PNG or JPEG, supports higher bit depth, animation frames, transparency. Include fallback formats for browser compatibility.	Lossless	Supported	Supported
GIF	image/gif	.gif	Suitable for simple images and animations. Consider PNG for static indexed images, WebP/AVIF/APNG for animations.	Lossless	Supported	Supported
JPEG	image/jpeg	.jpg, .jpeg, .jfif, .pjpeg, .pjp	Ideal for lossy compression of static images. PNG for precise reproduction, WebP/AVIF for better compression.	Lossy	Not Supported	Not Supported
PNG	image/png	.png	More accurate source reproduction compared to JPEG, preferred when transparency needed. WebP/AVIF offer better compression but limited browser support.	Lossless	Supported	Not Supported
SVG	image/svg+xml	.svg	Vector image format; suitable for UI elements, icons, charts requiring precise rendering at different sizes.	Can be compressed during transmission using HTTP compression or as .svgz files.	Supported	Supported
WebP	image/webp	.webp	Excellent for both static and animated images. Better compression than PNG or JPEG, supports higher bit depth, animation frames, transparency. AVIF offers slightly better compression but less browser support.	Lossless and Lossy	Supported	Supported

Detailed Format Analysis

Let's examine the strengths and weaknesses of each format along with common usage scenarios.

GIF vs APNG

GIF was introduced in 1987, while APNG is newer, developed by Mozilla in 2004.

APNG is essentially an extension of PNG (the name reveals this). APNG adds three segments: acTL, fcTL, fdAT, which we won't discuss in detail.

What happens if a device or software supports PNG but not APNG? No worries - the first frame of APNG is stored in the IDAT segment just like regular PNG.

Regarding compression: GIF uses LZW algorithm (GIF's LZW previously had patent restrictions), while APNG uses Deflate. Testing shows ANPG has smaller file sizes than GIF after optimization.

For color and transparency: GIF supports up to 256 colors, leading to lower image quality. While GIF supports transparency, it only allows marking entire colors as transparent, meaning no semi-transparency support, causing edge artifacts.

Conversely, APNG faces no such restrictions.

APNG's main drawbacks are compatibility and widespread adoption issues.

Both formats are primarily used for animated displays.

JPEG/JPG

Some developers are unclear about the difference between JPG and JPEG. Let's clarify:

JPEG (Joint Photographic Experts Group) and JPG refer to the same image format with no fundamental difference. "JPEG" refers to the organization and standard, while "JPG" is the file extension.

JPG advantages are clear: when compressing images to under 50% of original size, JPG maintains around 60% quality. JPG stores individual images in 24-bit format, supporting up to 16 million colors, explaining why visual degradation remains imperceptible.

JPG has excellent compatibility, commonly found in web backgrounds, carousels, and marketing materials.

However, it has notable disadvantages: lossy compression causes data loss during compression. While visually unnoticeable, multiple edits and saves degrade image quality. When processing vector graphics and logos with strong lines and high color contrast, compression artifacts become obvious.

It's unsuitable for simple graphics, icons, or text since these don't require complex color information, and JPG compression may cause blurriness.

Additionally, it doesn't support transparency, requiring alternative formats.

PNG-8 vs PNG-24

We primarily use PNG for small logos, simple high-contrast images, or backgrounds.

PNG typically refers to PNG-8 and PNG-24, with PNG-32 being less common. Here are the differences:

The numbers 8 and 24 indicate the maximum number of colors the format can index and store.

PNG-8: Stores up to 256 colors (2^8 = 256).

PNG-24: Stores up to 16 million colors (2^24 = 16,777,216).

Their transparency differs:

PNG-8: Supports 1-bit boolean transparency only, no semi-transparent effects.

PNG-24: Supports alpha semi-transparent transitions, perfectly rendering gradients from opaque to fully transparent.

Finally, their compression rates differ, affecting final file sizes. PNG-24 files are significantly larger than PNG-8, making PNG-24 unsuitable for photos with many colors and rich details. It's better for images requiring transparency with simple colors, such as logos, image watermarks.

SVG

SVG differs from JPG and PNG. SVG - Scalable Vector Graphics gets its name from its working principle, which differs fundamentally from traditional bitmap graphics (JPEG, PNG).

Vector graphics use mathematical formulas and geometric shapes rather than collections of pixels.

Scalability: SVG images are mathematically based, allowing lossless scaling to any size. Images remain crisp and sharp regardless of scaling, with 1 SVG adapting to n resolutions.

Small file sizes: SVG files are typically smaller than bitmap files since they don't store color information for each pixel. Instead, they store mathematical equations and attributes defining the graphics, creating more compact files.

Text and encoding: SVG files are text files written in XML format. This allows editing in text editors like code. You can define SVG like code, embed it in HTML, make it part of the DOM, or save descriptions in independent .svg files. This text-based nature enables searching, indexing, and scripting of SVG files.

Interactivity: SVG supports CSS and JavaScript, enabling styles and behaviors on SVG elements for dynamic and interactive graphics. They can respond to user actions like hover and click events.

Example: A simple SVG icon that changes color on hover:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" class="hover-circle">
    <title>Hover over me!</title>
  </circle>
</svg>

<style>
  .hover-circle:hover {
    fill: red;
    cursor: pointer;
  }
</style>

Or: Adding click event to the same SVG circle to change size:

<svg width="100" height="100" id="interactive-svg">
  <circle cx="50" cy="50" r="40" fill="blue" class="click-circle">
    <title>Click on me!</title>
  </circle>
</svg>

<script>
  const svgContainer = document.getElementById('interactive-svg');
  const targetCircle = svgContainer.querySelector('.click-circle');

  targetCircle.addEventListener('click', function() {
    let currentRadius = parseInt(targetCircle.getAttribute('r'));
    let updatedRadius = (currentRadius === 40) ? 60 : 40;
    targetCircle.setAttribute('r', updatedRadius);
  });
</script>

Or: Including SVG as separate files in HTML:

<img src="filename.svg" alt="">

These examples demonstrate SVG's flexibility.

In actual development, we frequently use the latter approach. Designers often provide SVG files, or we use icon libraries like Alibaba's iconfont. For vector graphics, we need only grasp core characteristics for practical application.

However, I've encountered some SVG issues: while SVG typically smaller than bitmap images, text-based SVG files with high vector element complexity can exceed binary-encoded rasterized images in size.

Base64

Base64 isn't an image format but an encoding method. Base64 reduces HTTP requests for webpage images, improving performance by converting binary data (like images) into ASCII strings. However, it increases overall page size since Base64-encoded strings are larger than original binary data (this is why Base64 suits small images, not large ones).

This resembles sprite sheets, though the principles differ. Sprite sheets combine multiple small images into one large image, using CSS background-image and background-position properties to reference specific areas, reducing HTTP requests, improving loading speed, and allowing preloading of potential images.

Both technologies complement each other, optimizing webpage performance depending on specific scenarios and requirements.

WebP and AVIF

Both emerged after 2010, called modern image formats. Their advantages are clear: they cover features of traditional formats (JPG, PNG) like animated images and lossless compression. Traditional formats have single characteristics, while modern formats support animated images, lossless compression, and more, with reduced file sizes. Compared to jpg, webp typically reduces file size by about 10%, while avif reduces it by over 40%.

The main drawback is compatibility (though WebP's compatibility has improved significantly). Here's a comparison:

Technical approach:

• WebP: Based on VP8 codec, combining lossy and lossless compression methods for smaller files. Lossy compression resembles JPEG but includes optimizations improving image quality. Its lossless compression uses predictive coding technology predicting adjacent pixel values and encoding only differences between actual and predicted values.
• AVIF: Uses AV1 codec, reducing file size without quality loss, featuring intra prediction (predicting block content based on neighboring blocks) and adaptive quantization (adjusting compression levels based on image complexity). It's both advanced and royalty-free.

Color support:

• WebP: Supports 8-bit and 10-bit color depth
• AVIF: Supports 8-bit, 10-bit, and 12-bit color depth, showing AVIF's superiority in color accuracy and vibrancy

AVIF excels for high-quality images (photos), while WebP serves as an ideal universal image format with broad browser support.

Optimizing Performance with Modern Image Formats

From our study, using webp, avif and other modern formats significantly optimizes frontend applications dealing with large image resource volumes, long loading times, and high CDN costs. How do we implement this?

Answer: The <picture> element

Here's MDN's definition of the picture element:

The <picture> element allows including multiple image format child elements and automatically loads one format based on browser compatibility, ensuring optimal image format delivery to all users.

Here's sample code:

<picture>
  <source srcset="optimized-image.avif" type="image/avif">
  <source srcset="optimized-image.webp" type="image/webp">
  <source srcset="original-image.png" type="image/png">
  <img src="fallback-image.jpg" alt="Alternative Image Description">
</picture>

• The <picture> element contains source elements and one img element.
• Each source element has a srcset attribute specifying the image URL and a type attribute describing the MIME type. Browsers decide which image to load based on this information and compatibility.
• If all source elements lack support, the img element serves as the fallback. This contains a JPEG image (or other well-supported format), providing a safety net.

This ensures all users load the best supported format for their devices, providing better web experience and performance.