Image file type and format guide

Since the beginning, the web has included some level of support for displaying images on a page. Though rudimentary at first, the ability to present images from icons to photos to simple animation sequences has been a key part of the success of the web. There are a variety of file types used to contain images. 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

There are a vast number of image file formats in the world. However, the ones listed below are generally recognized as being used on the web, with the possible exception of XBM, for which support has largely been removed from modern browsers, and BMP, which is generally not recommended as browser support is limited. They are included here for the benefit of developers who may have adopted older projects.

File type (short) File type (long) MIME type(s) File extension(s)
APNG Animated Portable Network Graphics image/apng .apng
BMP Bitmap file image/bmp .bmp
GIF Graphics Interchange Format image/gif .gif
ICO Microsoft Icon image/x-icon .ico, .cur
JPEG / JFIF Joint Photographic Expert Group image image/jpeg .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics image/png .png
SVG Scalable Vector Graphics image/svg+xml .svg
TIFF Tagged Image File Format image/tiff .tif, .tiff
WebP Web Picture format image/webp .webp
XBM X Window Bitmap file image/xbm .xbm

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 term bits 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 the PNG 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 of color depths, whereas animated GIF supports only 8-bit indexed 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, activity throbbers, and other animated sequences. For example, APNG is one 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.

MIME type image/apng
File extension(s) .apng
Specification https://wiki.mozilla.org/APNG_Specification
Browser compatibility Chrome 59, Edge 12, Firefox 3, Opera 46, Safari 8
Maximum dimensions 2,147,483,647 x 2,147,483,647 pixels
Supported color modes
Color mode Bits per component (D) Description
Greyscale 1, 2, 4, 8, and 16 Each pixel consists of a single D-bit value indicating the brightness of the greyscale pixel
True color 8 and 16 Each pixel is represented by three D-bit values indicating the level of the red, green, and blue color components
Indexed color 1, 2, 4, and 8 Each pixel is a D-bit value indicating an index into a color palette which is contained within a PLTE chunk in the APNG file; the colors in the palette all use an 8-bit depth
Greyscale with alpha 8 and 16 Each pixel is represented by two D-bit values: the intensity of the greyscale pixel and an alpha sample, indicating how opaque the pixel is
True color with alpha 8 and 16 Each pixel is comprised of four D-pixel color components: red, green, blue, and the alpha sample indicating how opaque the pixel is
Compression Lossless
Licensing Free and open under the Creative Commons Attribution-ShareAlike license (CC-BY-SA) version 3.0 or later.

BMP (Bitmap file)

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

Note: You should typically avoid using BMP for web site content, as it's not a generally-accepted use of the format.

BMP theoretically supports a variety of internal data representations. The simplest, and most commonly used, form of BMP file is a simple, uncompressed raster image, with each pixel occupying three bytes of space representing the red, green, and blue components of each pixel, and each row padded with 0x00 bytes to a multiple of 4 bytes wide.

While other data representations are defined in the specification, they are not widely used and are 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).

Additionally—again, theoretically—several compression algorithms are supported, and the image data can also be stored in JPEG or PNG format within the BMP file.

MIME type image/bmp
File extension(s) .bmp
Specification No specification; however, Microsoft provides general documentation of the format: https://docs.microsoft.com/en-us/windows/desktop/gdi/bitmap-storage
Browser compatibility All versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari
Maximum dimensions Either 32,767 x 32,767 or 2,147,483,647 x 2,147,483,647 pixels, depending on the format version
Supported color modes
Color mode Bits per component (D) Description
Greyscale 1 Each bit represents a single pixel, which can be either black or white
True color 8 and 16 Each pixel is represented by three values representing the red, green, and blue color components; each is D bits
Indexed color 2, 4, and 8 Each pixel is represented by a value which is one 2, 4, or 8 bits, serving as an index into the color table
Greyscale with alpha n/a BMP has no distinct grayscale format
True color with alpha 8 and 16 Each pixel is represented by four values representing the red, green, blue, and alpha color components; each is D bits
Compression Several compression methods are supported, including both lossy and lossless algorithms
Licensing Covered by the Microsoft Open Specification Promise; while Microsoft holds patents against BMP, they have published a promise not to assert its patent rights as long as specific conditions are met. This is not the same as a license, however. BMP is included under the Windows Metafile Format (.wmf).

GIF (Graphics Interchange Format)

In 1987, the CompuServe online service provider introduced the GIF (Graphics Interchange Format) image file type to provide a universally-compatible format for compressed graphics that all members of their service would be able to use. GIF makes use of Lempel-Ziv-Welch (LZW) compression to provide lossless compression of 8-bit indexed color graphics. GIF was one of the first two graphics formats supported by HTML, along with XBM.

Each pixel in a GIF file 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 two (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 is technically possible to tile multiple image blocks, each with its own 255 or 256 color palette, to create true color images, but in practice this is rarely done.

Pixels are generally 100% opaque, unless a specific color index is designated to represent a transparent pixel, in which case pixels having that value are entirely transparent. In addition to supporting basic 8-bit graphics compression, GIF supports simple animation sequences, in which following an initial full-size frame, a series of images reflecting the portions of the image that change with each frame of the animation sequence are provided.

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

Another popular feature of the GIF format is support for interlacing, wherein rows of pixels are stored out of order, so that partially-received files can be displayed and potentially be recognizable. This was particularly useful when network connections were typically very slow.

GIF is a good choice for simple images and animations, although converting full color images to GIF can result in unsatisfactory results if dithering isn't acceptable. Typically, modern content should use PNG for lossless still images, and should consider using APNG for lossless animation sequences.

MIME type image/gif
File extension(s) .gif
Specification GIF87a: https://www.w3.org/Graphics/GIF/spec-gif87.txt
GIF89a: https://www.w3.org/Graphics/GIF/spec-gif89a.txt
Browser compatibility All versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari
Maximum dimensions 65,536 x 65,536 pixels
Supported color modes
Color mode Bits per component (D) Description
Greyscale n/a GIF does not include a dedicated greyscale format
True color n/a GIF does not support true color pixels
Indexed color 8 Each color in a GIF palette is defined as 8 bits each of red, green, and blue (24 total bits per pixel)
Greyscale with alpha n/a GIF does not provide a dedicated greyscale format
True color with alpha n/a GIF does not support true color pixels
Compression Lossless (LZW)
Licensing While the GIF format itself is open, the LZW compression algorithm was covered by patents until the early 2000s. As of July 7, 2004, all relevant patents have expired, and the GIF format may be used freely

ICO (Microsoft Windows icon)

The ICO (Microsoft Windows icon) file type was designed by Microsoft to contain icons for use on the desktop of Windows systems. However, early versions of Internet Explorer introduced the ability for a web site to provide a file named favicon.ico, of this type, in a web site's root directory in order to specify a favicon—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 icon. Following the directory comes all of the data for the icons. Each icon's data can be either a BMP image (without the file header), or a complete PNG image (including the file header). If you use ICO files, you should use the BMP format, as support for using PNG inside ICO files wasn't added until Windows Vista, and may not be well supported.

ICO files should not be used in web content. Additionally, their use for favicon files has subsided in favor of using a PNG file and the <link> element, as described in Providing icons for different usage contexts in <link>: The External Resource Link element.

MIME type image/vnd.microsoft.icon (official), image/x-icon (used by Microsoft), image/ico
File extension(s) .ico
Specification  
Browser compatibility All versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari
Maximum dimensions 256 x 256 pixels
Supported color modes
Icons in BMP format
Color mode Bits per component (D) Description
Greyscale 1 Each bit represents a single pixel, which can be either black or white
True color 8 and 16 Each pixel is represented by three values representing the red, green, and blue color components; each is D bits
Indexed color 2, 4, and 8 Each pixel is represented by a value which is one 2, 4, or 8 bits, serving as an index into the color table
Greyscale with alpha n/a BMP has no distinct grayscale format
True color with alpha 8 and 16 Each pixel is represented by four values representing the red, green, blue, and alpha color components; each is D bits
Icons in PNG format
Color mode Bits per component (D) Description
Greyscale 1, 2, 4, 8, and 16 Each pixel consists of a single D-bit value indicating the brightness of the greyscale pixel
True color 8 and 16 Each pixel is represented by three D-bit values indicating the level of the red, green, and blue color components
Indexed color 1, 2, 4, and 8 Each pixel is a D-bit value indicating an index into a color palette which is contained within a PLTE chunk in the APNG file; the colors in the palette all use an 8-bit depth
Greyscale with alpha 8 and 16 Each pixel is represented by two D-bit values: the intensity of the greyscale pixel and an alpha sample, indicating how opaque the pixel is
True color with alpha 8 and 16 Each pixel is comprised of four D-pixel color components: red, green, blue, and the alpha sample indicating how opaque the pixel is
Compression BMP-format icons nearly always use lossless compression; however, lossy methods are available. PNG icons are always compressed losslessly.
Licensing

JPEG (Joint Photographic Experts Group image)

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

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

MIME type image/jpeg
File extension(s) .jpg, .jpeg, .jpe, .jif, .jfif
Specification https://jpeg.org/jpeg/
Browser compatibility All versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari
Maximum dimensions 65,535 x 65,535 pixels
Supported color modes
Color mode Bits per component (D) Description
Greyscale n/a JPEG has no distinct greyscale mode
True color 8 Each pixel is described by the red, blue, and green color components, each of which is 8 bits
Indexed color n/a JPEG does not offer an indexed color mode
Greyscale with alpha n/a JPEG does not support an alpha channel
True color with alpha n/a JPEG does not support an alpha channel
Compression Lossy; based on the discrete cosine transform
Licensing As of October 27, 2006, all United States patents have expired

PNG (Portable Network Graphics)

The PNG (pronounced "ping") image format uses lossless compression to provide higher compression rates and support for higher color depths than GIF offers, as well as full alpha transparency support.

PNG is widely supported, with all major browsers offering full support for its features. Internet Explorer, which introduced PNG support in versions 4 and 5, did not fully support it until IE 9, and there were many infamous bugs with the support it did have for many of the intervening years, including in the once-omnipresent Internet Explorer 6. This slowed adoption of PNG substantially for a while, but it is now commonly used, especially when precise reproduction of the source image is needed.

MIME type image/png
File extension(s) .png
Specification https://www.w3.org/TR/PNG
Browser compatibility
Feature Chrome Edge Firefox Internet Explorer Opera Safari
PNG support 1 12 1 5 3.5.1 (Presto)
15 (Blink)
1
Alpha channel 1 12 1 5 6 (Presto)
All (Blink)
1
Gamma correction no yes 1 8 1 broken
Color correction no yes 3 9 no no
Interlacing no ? 1 broken 3.5.1 no
Maximum dimensions 2,147,483,647 x 2,147,483,647 pixels
Supported color modes
Color mode Bits per component (D) Description
Greyscale 1, 2, 4, 8, and 16 Each pixel consists of a single D-bit value indicating the brightness of the greyscale pixel
True color 8 and 16 Each pixel is represented by three D-bit values indicating the level of the red, green, and blue color components
Indexed color 1, 2, 4, and 8 Each pixel is a D-bit value indicating an index into a color palette which is contained within a PLTE chunk in the APNG file; the colors in the palette all use an 8-bit depth
Greyscale with alpha 8 and 16 Each pixel is represented by two D-bit values: the intensity of the greyscale pixel and an alpha sample, indicating how opaque the pixel is
True color with alpha 8 and 16 Each pixel is comprised of four D-pixel color components: red, green, blue, and the alpha sample indicating how opaque the pixel is
Compression Lossless
Licensing Copyright © 2003 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. No known royalty-bearing patents.

SVG (Scalable Vector Graphics)

SVG is an XML-based vector 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 capable of describing diagrams and other images which can be accurately drawn at any size. As such, SVG is popular for user interface elements in modern responsive design.

SVG files are text files containing the source code that, when interpreted, draws the desired image. For instance, this simple example defines an object whose initial size is 100 by 100 pixels, containing one line drawn diagonally through part of the box.

<?xml version="1.0" standalone="no"?>

<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 within web content in two ways:

  • You can directly write the <svg> element within the HTML, containing the SVG elements to draw the image.
  • You can display an SVG image anywhere you can use any of the other image types, including with the <img> and <picture> elements, the background-image CSS property, and so forth.

SVG is an ideal choice for any 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 at render time. It's not generally useful for strictly bitmap or photographic images, although it is possible to include bitmap images within an SVG drawing.

MIME type image/svg+xml
File extension(s) .svg
Specification https://www.w3.org/TR/SVG2
Browser compatibility
Feature Chrome Edge Firefox Internet Explorer Opera Safari
SVG support 4 12 3 9 10 (Presto)
15 (Blink)
3.2
SVG as image (<img> etc) 28 12 4 9 10 (Presto)
15 (Blink)
9
Maximum dimensions Unlimited
Supported color modes Colors in SVG are specified using CSS color syntax.
Compression SVG source may be compressed during transit using HTTP compression techniques.
Licensing Copyright © 2018 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. No known royalty-bearing patents.

TIFF (Tagged Image File Format)

TIFF is a raster graphics file format which was designed originally specifically to store scanned photos, although it can be used for 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 variety of metadata often included, as well as the fact that the vast majority of TIFF files are uncompressed. However, both lossless and lossy compression methods are supported by the TIFF specification.

Every value stored within a TIFF file is specified using its tag (indicating what kind of information is contained, such as the width of the image) and its type (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 if there's only one value). This allows different data types to be used for the same properties. For example, the width of an image, ImageWidth, is stored using tag 0x0100, and is a one-entry array. By specifying type 3 (SHORT), the value of ImageWidth is stored as a 16-bit value:

Tag Type Size Value
0x0100
ImageWidth
0x0003
SHORT
0x00000001
1 entry
0x0280
640 pixels

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

Tag Type Size Value
0x0100
ImageWidth
0x0004
LONG
0x00000001
1 entry
0x00000280
640 pixels

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 also supports a variety of color spaces, rather than only allowing RGB to be used. CMYK, YCbCr, and other color spaces are supported, making TIFF a good choice for storing images intended for eventually being printed or used in film or television media.

Long ago, some browsers supported using TIFF images in web content; today, however, you need to use special libraries or browser add-ons to do so. As such, TIFF files are not useful within the context of web content; however, if's fairly common to provide downloadable TIFF files when distributing photos and other artwork intended for precision editing or printing.

MIME type image/tiff
File extension(s) .tif, .tiff
Specification https://www.adobe.io/open/standards/TIFF.html
Browser compatibility No browsers integrate support for TIFF; its value is as a download format
Maximum dimensions 4,294,967,295 x 4,294,967,295 pixels (theoretical)
Supported color modes
Color mode Bits per component (D) Description
Bilevel 1 A bilevel TIFF stores 8 bits in each byte, one bit per pixel. The PhotometricInterpretation field specifies which of 0 and 1 are black and which is white
Greyscale 4 and 8 Each pixel consists of a single D-bit value indicating the brightness of the greyscale pixel
True color 8 All true color RGB images are stored using 8-bits each of red, green, and blue.
Indexed color 4 and 8 Each pixel is an index into a ColorMap record, which defines the colors used in the image. The color map lists all of the red values, then all of the green values, then all of the blue values (rather than rgb, rgb, rgb...)
Greyscale with alpha 4 and 8 Alpha information is added by specifying that there are more than 3 samples per pixel in the SamplesPerPixel field, and indicating the type of alpha (1 for an associated, pre-multiplied alpha component, and 2 for unassociated alpha (a separate matte); however, alpha channels are rarely used in TIFF files and may be unsupported by the user's software
True color with alpha 8 Alpha information is added by specifying that there are more than 3 samples per pixel in the SamplesPerPixel field, and indicating the type of alpha (1 for an associated, pre-multiplied alpha component, and 2 for unassociated alpha (a separate matte); however, alpha channels are rarely used in TIFF files and may be unsupported by the user's software
Compression Most TIFF files are uncompressed; however, lossless PackBits and LZW compression is supported, as is lossy JPEG compression.
Licensing No license required (aside from any associated with libraries you might use); all known patents have expired

WebP image

WebP suports both lossy and lossless compression, with lossy compression performed using predictive coding based on the VP8 video codec and lossless compression that uses substitutions for repeating data. Lossy WebP images average about 25-35% smaller than comparable JPEG formats using visually similar compression levels. Lossless WebP images are typically 26% smaller than the same images stored 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  supports the ANIM chunk, which describes the animation, and ANMF chunk, which represents a frame of an animation sequence. Looping is supported in the WebP format.

WebP now has broad support in the latest versions of the major web browsers, although it does not have deep historical support. It may be wise to provide a fallback in either JPEG or PNG format.

MIME type image/webp
File extension(s) .webp
Specification

RIFF Container Specification
RFC 6386: VP8 Data Format and Decoding Guide (lossy encoding)
WebP Lossless Bitstream Specification

Browser compatibility
Feature Chrome Edge Firefox Internet Explorer Opera Safari
Lossy WebP support 17 18 65 no 11.10 (Presto)
15 (Blink)
no
Lossless WebP 23
25 on Android
18 65 no 12.10 (Presto)
15 (Blink)
no
Animation 32 18 65 no 19 (Blink) no
Maximum dimensions 16,383 x 16,383 pixels
Supported color modes Lossy WebP always stores the image in 8-bit Y'CbCr 4:2:0 (YUV420) format. Lossless WebP always uses 8-bit ARGB color, with each component taking 8 bits for a total of 32 bits per pixel
Compression Lossless (Huffman, LZ77, or color cache codes) or lossy (VP8)
Licensing No license required; source code is openly available

XBM (X Window System Bitmap file)

XBM (X Bitmap) files were the first to be supported by the web, but are no longer used on the web and should be avoided, as the format of these files introduces potential security concerns. Modern browsers have not supported XBM files in many years; however, when dealing with older content, you may find some of these 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 two to four #define directives providing the width and height of the bitmap (and optionally the hotspot, if the image is designed to be used as a cursor), followed by an array of unsigned char, in which 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 eight pixels wide and eight pixels tall, with pixels in a black-and-white checkerboard pattern:

#define square8_width 8
#define square8_height 8
static unsigned char square8_bits[] = {
  0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55
};
MIME type image/xbm, image-xbitmap
File extension(s) .xbm
Specification None
Browser compatibility Firefox 1 through 3.5, Internet Explorer 1 through 5
Maximum dimensions Unlimited
Supported color modes
Color mode Bits per component (D) Description
Greyscale 1 Each byte contains eight 1-bit pixels
True color n/a n/a
Indexed color n/a n/a
Greyscale with alpha n/a n/a
True color with alpha n/a n/a
Compression Lossless
Licensing Open source

Choosing an image format

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

Photographs

Photographs typically fare well using lossy compression (to varying degrees, depending on the encoder's configuration). This makes JPEG and WebP good choices for images, with JPEG being the more compatible choice but WebP perhaps offering better compression rates at the same quality level. To maximize quality and minimize download time, it may be worth considering providing both using a fallback with WebP as the first choice and JPEG as the second. Otherwise, JPEG is the safer choice for compatibility purposes.

Best choice Fallback
WebP or JPEG JPEG

Icons

For smaller images such as icons, you should 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 as widespread as you may wish yet, so PNG is a better choice unless you offer a fallback. If your image can be represented in fewer than 256 colors, GIF is an option, although PNG is likely to be a better choice overall.

If the icon is one which can be represented using vector graphics, consider using SVG, since it scales well across various display resolutions and sizes, so it's perfect for responsive site design. Although SVG support is good, it may be worth offering a PNG fallback in case users are on older browsers.

Best choice Fallback
SVG, Lossless WebP or PNG PNG

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 even unclear under the effects of lossy compression.

Again, PNG is probably your best bet, although lossless WebP is arguably going to get better compression rates.

Best choice Fallback
Lossless WebP or PNG;
JPEG if compression artifacts aren't a concern
PNG or JPEG;
GIF for screenshots with lower color counts

Diagrams, drawings, and charts

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

Best choice Fallback
SVG PNG

Providing image fallbacks

While the standard HTML <img> element doesn't support the notion of 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 to meet different media conditions, as well as for an <img> element which defines where to place the image as well as the fallback to the default or "most compatible" version of the image.

For example, if you're displaying a diagram and wish to default to using SVG but wish to offer a fallback to a PNG snapshot of the diagram, with an alternative fallback to GIF, you would do something like this:

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

You can specify as many alternate sources as you wish, although typically two to three is all you should need.

See also

Document Tags and Contributors

Contributors to this page: Kwan, matthendrix, Sheppy
Last updated by: Kwan,