In this guide, we'll cover the image file types generally supported by web browsers, and provide insights that will help you select the most appropriate formats to use for your site's imagery.

Common image file types

The image file formats that are most commonly used on the web are listed below.

The following list includes image formats that appear on the web, but which should be avoided for web content (generally this is because either they do not have wide browser support, or because there are better alternatives).

Image file type details

The following sections provide a brief overview of each of the image file types supported by web browsers.

In the tables below, the termbits per component refers to the number of bits used to represent each color component.For example, an RGB color depth of 8 indicates that each of the red, green, and blue components are represented by an 8-bit value.Bit depth, on the other hand, is the total number of bits used to represent each pixel in memory.

APNG (Animated Portable Network Graphics)

APNG is a file format first introduced by Mozilla which extends thePNG standard to add support for animated images.Conceptually similar to the animated GIF format which has been in use for decades, APNG is more capable in that it supports a variety ofcolor depths, whereas animated GIF supports only 8-bitindexed color.

APNG is ideal for basic animations that do not need to synchronize to other activities or to a sound track, such as progress indicators, activitythrobbers, and other animated sequences.For example, APNG isone of the formats supported when creating animated stickers for Apple's iMessage application (and the Messages application on iOS).They're also commonly used for the animated portions of web browsers' user interfaces.

AVIF image

AV1 Image File Format (AVIF) is a powerful, open source, royalty-free file format that encodesAV1 bitstreams in the High Efficiency Image File Format (HEIF) container.

AV1 is a coding format that was originally designed for video transmission over the Internet.The format benefits from the significant advances in video encoding in recent years, and may potentially benefit from the associated support for hardware rendering.However it also has disadvantages for some cases, as video and image encoding have some different requirements.

The format offers:

• Excellent lossy compression compared to JPG and PNG for visually similar compression levels (e.g., lossy AVIF images are around 50% smaller than JPEG images).
• Generally, AVIF has better compression than WebP — median 50% vs. 30% compression for the same JPG set (source:AVIF WebP Comparison (CTRL Blog)).
• Lossless compression.
• Animation/multi-image storage (similar to animated GIFs, but with much better compression)
• Alpha channel support (i.e., for transparency).
• High Dynamic Range (HDR): support for storing images that can represent bigger contrasts between the lightest and darkest parts of the image.
• Wide Color Gamut: Support for images that can contain a larger range of colors.

AVIF does not support progressive rendering, so files must be fully downloaded before they can be displayed.This often has little impact on real-world user experience because AVIF files are much smaller than the equivalent JPEG or PNG files, and hence can be downloaded and displayed much faster.For larger file size the impact can become significant, and you should consider using a format that supports progressive rendering.

AVIF is supported in Chrome, Edge, Opera, Safari and Firefox.As support is not yet comprehensive (and has little historical depth) you should provide a fallback inWebP,JPEG orPNG format usingthe<picture> element (or some other approach).

BMP (Bitmap file)

TheBMP (Bitmap image) file type is most prevalent on Windows computers, and is generally used only for special cases in web apps and content.

BMP theoretically supports a variety of internal data representations.The simplest, and most commonly used, form of BMP file is an uncompressed raster image, with each pixel occupying 3 bytes representing its red, green, and blue components, and each row padded with0x00 bytes to a multiple of 4 bytes wide.

While other data representations are defined in the specification, they are not widely used and often completely unimplemented.These features include: support for different bit depths, indexed color, alpha channels, and different pixel orders (by default, BMP is written from bottom-left corner toward the right and top, rather than from the top-left corner toward the right and bottom).

Theoretically, several compression algorithms are supported, and the image data can also be stored inJPEG orPNG format within the BMP file.

GIF (Graphics Interchange Format)

In 1987, the CompuServe online service provider introduced theGIF (Graphics Interchange Format) image file format to provide a compressed graphics format that all members of their service would be able to use.GIF uses theLempel-Ziv-Welch (LZW) algorithm to losslessly compress 8-bit indexed color graphics.GIF was one of the first two graphics formats supported byHTML, along withXBM.

Each pixel in a GIF is represented by a single 8-bit value serving as an index into a palette of 24-bit colors (8 bits each of red, green, and blue). The length of a color table is always a power of 2 (that is, each palette has 2, 4, 8, 16, 32, 64, or 256 entries).To simulate more than 255 or 256 colors,dithering is generally used.It istechnically possible to tile multiple image blocks, each with its own color palette, to create true color images, but in practice this is rarely done.

Pixels are opaque, unless a specific color index is designated as transparent, in which case pixels colored that value are entirely transparent.

GIF supports simple animation, in which following an initial full-size frame, a series of images reflecting the parts of the image that change with each frame are provided.

GIF has been extremely popular for decades, due to its simplicity and compatibility.Its animation support caused a resurgence in its popularity in the social media era, when animated GIFs began to be widely used for short "videos", memes, and other simple animation sequences.

Another popular feature of GIF is support forinterlacing, where rows of pixels are stored out of order so that partially-received files can be displayed in lower quality.This is particularly useful when network connections are slow.

GIF is a good choice for simple images and animations, although converting full color images to GIF can result in unsatisfactory dithering.Typically, modern content should usePNG for losslessand indexed still images, and should consider usingAPNG for lossless animation sequences.

ICO (Microsoft Windows icon)

The ICO (Microsoft Windows icon) file format was designed by Microsoft for desktop icons of Windows systems.However, early versions of Internet Explorer introduced the ability for a website to provide an ICO file namedfavicon.ico in a website's root directory to specify afavicon — an icon to be displayed in the Favorites menu, and other places where an iconic representation of the site would be useful.

An ICO file can contain multiple icons, and begins with a directory listing details about each.Following the directory comes the data for the icons.Each icon's data can be either aBMP image without the file header, or a completePNG image (including the file header).If you use ICO files, you should use the BMP format, as support for PNG inside ICO files wasn't added until Windows Vista and may not be well supported.

JPEG (Joint Photographic Experts Group image)

TheJPEG (typically pronounced "jay-peg") image format is currently the most widely used lossy compression format for still images.It's particularly useful for photographs; applying lossy compression to content requiring sharpness, like diagrams or charts, can produce unsatisfactory results.

JPEG is actually a data format for compressed photos, rather than a file type.The JFIF (JPEGFileInterchangeFormat) specification describes the format of the files we think of as "JPEG" images.

PNG (Portable Network Graphics)

ThePNG (pronounced "ping") image format uses lossless compression, while supporting higher color depths thanGIF and being more efficient, as well as featuring full alpha transparency support.

PNG is widely supported, with all major browsers offering full support for its features.

SVG (Scalable Vector Graphics)

SVG is anXML-basedvector graphics format that specifies the contents of an image as a set of drawing commands that create shapes, lines, apply colors, filters, and so forth.SVG files are ideal for diagrams, icons, and other images which can be accurately drawn at any size.As such, SVG is popular for user interface elements in modern Web design.

SVG files are text files containing source code that, when interpreted, draws the desired image.For instance, this example defines a drawing area with initial size 100 by 100 units, containing a line drawn diagonally through the box:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">  <line x1="0" y1="80" x2="100" y2="20" stroke="black" /></svg>

SVG can be used in web content in three ways:

1. An<svg> element can appear directly within the HTML. It can containSVG elements to draw the image.
2. An SVG image can be embedded in HTML using elements such as<iframe>,<object> and<embed>.
3. It is possible to use SVG images anywhere where other image types can be used, including with the<img> element, thebackground-image CSS property, and so forth. However, there areadditional restrictions when SVG is used in this way.

SVG is an ideal choice for images which can be represented using a series of drawing commands, especially if the size at which the image will be rendered is unknown or may vary, since SVG will smoothly scale to the desired size.It's not generally useful for strictly bitmap or photographic images, although it is possible to include bitmap images within an SVG.

TIFF (Tagged Image File Format)

TIFF is a raster graphics file format which was created to store scanned photos, although it can be any kind of image.It is a somewhat "heavy" format, in that TIFF files have a tendency to be larger than images in other formats.This is because of the metadata often included, as well as the fact that most TIFF images are either uncompressed or use compression algorithms that still leave fairly large files after compression.

TIFF supports a variety of compression methods, but the most commonly used are the CCITT Group 4 (and, for older fax systems, Group 3) compression systems used for by fax software, as well as LZW and lossy JPEG compression.

Every value in a TIFF file is specified using itstag (indicating what kind of information it is, such as the width of the image) and itstype (indicating the format the data is stored in), followed by the length of the array of values to assign to that tag (all properties are stored in arrays, even for single values).This allows different data types to be used for the same properties.For example, the width of an image,ImageWidth, is stored using tag0x0100, and is a one-entry array.By specifying type 3 (SHORT), the value ofImageWidth is stored as a 16-bit value:

Specifying type 4 (LONG) stores the width as a 32-bit value:

A single TIFF file can contain multiple images; this may be used to represent multi-page documents, for example (such as a multi-page scanned document, or a received fax).However, software reading TIFF files is only required to support the first image.

TIFF supports a variety of color spaces, not just RGB.These include CMYK, YCbCr, and others, making TIFF a good choice for storing images intended for print, film, or television media.

Other than Safari, browsers do not natively support TIFF images in web content except by using special libraries or browser add-ons.As such, TIFF files are not broadly used for displaying web content,but it's common to provide downloadable TIFF files when distributing photos and other artwork intended for precision editing or printing.

WebP image

WebP supports lossy compression via predictive coding based on the VP8 video codec, and lossless compression that uses substitutions for repeating data.Lossy WebP images are on average 25–35% smaller than JPEG images of visually similar compression levels.Lossless WebP images are typically 26% smaller than the same images in PNG format.

WebP also supports animation: in a lossy WebP file, the image data is represented by a VP8 bitstream, which may contain multiple frames.Lossless WebP holds theANIM chunk, which describes the animation, and theANMF chunk, which represents a frame of an animation sequence.Looping is supported.

WebP now has broad support in the latest versions of major web browsers, although it does not have deep historical support.Provide a fallback in eitherJPEG orPNG format, such as withthe<picture> element.

XBM (X Window System Bitmap file)

XBM (X Bitmap) files were the first to be supported on the Web, but are no longer used and should be avoided, as their format has potential security concerns.Modern browsers have not supported XBM files in many years, but when dealing with older content, you may find some still around.

XBM uses a snippet of C code to represent the contents of the image as an array of bytes.Each image consists of 2 to 4#define directives, providing the width and height of the bitmap (and optionally the hotspot, if the image is designed as a cursor), followed by an array ofunsigned char, where each value contains 8 1-bit monochrome pixels.

The image must be a multiple of 8 pixels wide.For example, the following code represents an XBM image which is 8 pixels by 8 pixels, with those pixels in a black-and-white checkerboard pattern:

#define square8_width 8#define square8_height 8static unsigned char square8_bits[] = {  0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55};

Choosing an image format

Picking the best image format for your needs is likely easier than video formats, as there are fewer options with broad support, and each tends to have a specific set of use-cases.

Photographs

Photographs typically fare well with lossy compression (depending on the encoder's configuration).This makesJPEG andWebP good choices for photographs, with JPEG being more compatible but WebP perhaps offering better compression.To maximize quality and minimize download time, consider providing bothusing a fallback with WebP as the first choice and JPEG as the second.Otherwise, JPEG is the safe choice for compatibility.

Icons

For smaller images such as icons, use a lossless format to avoid loss of detail in a size-constrained image.While lossless WebP is ideal for this purpose, support is not widespread yet, so PNG is a better choice unless you offer afallback.If your image contains fewer than 256 colors, GIF is an option, although PNG often compresses even smaller with its indexed compression option (PNG-8).

If the icon can be represented using vector graphics, considerSVG, since it scales across various resolutions and sizes, so it's perfect for responsive design.Although SVG support is good, it may be worth offering a PNG fallback for older browsers.

Screenshots

Unless you're willing to compromise on quality, you should use a lossless format for screenshots.This is particularly important if there's any text in your screenshot, as text easily becomes fuzzy and unclear under lossy compression.

PNG is probably your best bet, but lossless WebP is arguably going to be better compressed.

Diagrams, drawings, and charts

For any image that can be represented using vector graphics, SVG is the best choice.Otherwise, you should use a lossless format like PNG.If you do choose a lossy format, such as JPEG or lossy WebP, carefully weigh the compression level to avoid causing text or other shapes to become fuzzy or unclear.

Providing image fallbacks

While the standard HTML<img> element doesn't support compatibility fallbacks for images, the<picture> element does.<picture> is used as a wrapper for a number of<source> elements, each specifying a version of the image in a different format or under differentmedia conditions, as well as an<img> element which defines where to display the image and the fallback to the default or "most compatible" version.

For example, if you're displaying a diagram best displayed with SVG, but wish to offer a fallback to a PNG or GIF of the diagram, you would do something like this:

<picture>  <source srcset="diagram.svg" type="image/svg+xml" />  <source srcset="diagram.png" type="image/png" />  <img    src="diagram.gif"    width="620"    height="540"    alt="Diagram showing the data channels" /></picture>

You can specify as many<source>s as you wish, though typically 2 or 3 is all you need.

See also

• Guide to media types and formats
• Web media technologies
• Guide to video codecs used on the web
• TheHTML<img> and<picture> elements
• The CSSbackground-image property
• TheImage() constructor and theHTMLImageElement interface