HTML Image Formats Tutorial - JPEG, PNG, WebP, AVIF and SVG

Understanding HTML Image Formats

Web images are available in several file formats, each designed for different types of visual content, compression, transparency, animation, and image quality.

Choosing an appropriate image format can improve image quality, reduce file size, and help webpages load more efficiently.

Raster and Vector Images

Web image formats generally represent graphics as either raster or vector images. Raster images are constructed from a grid of individual pixels, while vector images describe shapes using mathematical information.

JPEG, PNG, WebP, AVIF, and GIF are raster formats. SVG is a vector format and can usually be resized without the loss of sharpness that occurs when a raster image is enlarged beyond its original dimensions.

JPEG Images

JPEG, commonly identified by the .jpg or .jpeg extension, uses lossy compression to reduce file size. It is widely used for photographs and other images containing many colors and gradual changes in tone.

<img src="/img/images/image-600x400.jpg"
     alt="JPEG image example"
     width="600"
     height="400">

JPEG does not support transparent backgrounds. Increasing JPEG compression can produce smaller files, but excessive compression can also introduce visible image artifacts and reduce quality.

PNG Images

PNG uses lossless compression and supports transparent and partially transparent pixels. It is useful for graphics that require transparency or need to preserve sharp edges and image detail.

<img src="/img/images/image-600x400.png"
     alt="PNG image example"
     width="600"
     height="400">

PNG files can be larger than compressed photographic formats, particularly when they contain detailed photographic content.

WebP Images

WebP is a modern raster image format designed for efficient delivery on the web. It supports both lossy and lossless compression as well as transparency and animation.

<img src="/img/images/image-600x400.webp"
     alt="WebP image example"
     width="600"
     height="400">

WebP can often provide smaller files than older formats while maintaining comparable visual quality, making it useful for many types of webpage images.

AVIF Images

AVIF is a modern image format that provides efficient compression and supports features including transparency and high dynamic range image data.

<img src="/img/images/image-600x400.avif"
     alt="AVIF image example"
     width="600"
     height="400">

AVIF can produce very small files at good visual quality, although encoding and decoding requirements can be greater than with some older image formats.

GIF Images

GIF is an older raster image format that supports simple transparency and frame-based animation. Its limited color palette makes it poorly suited to most photographs and other images containing many colors.

<img src="/img/images/example-animation.gif"
     alt="Animated image example">

GIF remains recognizable for simple animations, although modern formats can provide better compression and image quality for many uses.

SVG Images

SVG is a vector image format based on XML markup. Instead of storing a fixed grid of pixels, an SVG file describes shapes, paths, text, colors, and other graphical information.

<img src="/img/images/example-graphic.svg"
     alt="SVG graphic example"
     width="600"
     height="400">

SVG is especially useful for logos, icons, diagrams, and other graphics that need to remain sharp at different sizes. SVG is covered in greater detail later in this Images section.

Choosing an Image Format

The best image format depends on the type of visual content and how the image will be used. There is no single format that is best for every image.

JPEG: Often suitable for photographs and complex images when small file sizes are important.
PNG: Useful when lossless image data or transparency is needed.
WebP: A versatile modern choice for photographs, graphics, transparency, and animation.
AVIF: Useful when highly efficient compression and modern image features are desired.
GIF: Primarily encountered for simple frame-based animations and older web graphics.
SVG: Well suited to logos, icons, diagrams, and other scalable graphics.

HTML Image Format Example

The following examples display the same 600 by 400 image saved in several raster image formats.

<h1>HTML Image Format Examples</h1>

<h2>JPEG</h2>
<img src="/img/images/image-600x400.jpg"
     alt="JPEG image example"
     width="600"
     height="400">

<h2>PNG</h2>
<img src="/img/images/image-600x400.png"
     alt="PNG image example"
     width="600"
     height="400">

<h2>WebP</h2>
<img src="/img/images/image-600x400.webp"
     alt="WebP image example"
     width="600"
     height="400">

<h2>AVIF</h2>
<img src="/img/images/image-600x400.avif"
     alt="AVIF image example"
     width="600"
     height="400">

Using the same source graphic makes it easier to compare the formats without differences in the image content affecting the example.

Play in Editor

Image Format Best Practices

Choose an image format based on the type of visual content rather than using the same format for every image.
Balance image quality with file size and webpage performance.
Use transparency only when the design or content requires it.
Avoid saving photographs as unnecessarily large lossless files when an appropriate compressed format will provide acceptable quality.
Use SVG for suitable vector graphics that need to remain sharp at different sizes.
Optimize image files before publishing them to reduce unnecessary download size.
Test important images in the browsers and devices your website supports.

Summary

JPEG, PNG, WebP, AVIF, GIF, and SVG provide different combinations of compression, transparency, animation, scalability, and image quality. Choosing a format that matches the type and purpose of an image can improve both visual quality and webpage performance.