Gif why not both

Getty Images. By Melissa Locker. Related Stories. Already a print subscriber? Go here to link your subscription. Need help? Visit our Help Center. Print page. Story by Michelle P. Illustration by Natalie Z. We helped Marriott mark a milestone and share surprising travel trends. We created a microsite to help Showtime get some presskit buzz. The CRI wanted a compelling way to educate people about immunotherapy. Our designers helped CrossKnowledge make a splash for their U.

Our team helped VMware give sales reps their own immersive adventure. We created an app to help UrbanDigs connect with their users on-the-go. We helped Samsung Ads reach the right audience, with the right message, at the right time. We created an interactive website to help make healthcare feel less intimidating. 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. Long ago, some browsers supported 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, but it's common to provide downloadable TIFF files when distributing photos and other artwork intended for precision editing or printing.

WebP supports lossy compression via predictive coding based on the VP8 video codec, and lossless compression that uses substitutions for repeating data. WebP also supports animation: in a lossy WebP file, the image data is represented by a VP8 bitstream, which may contain multiple frames. Looping is supported. WebP now has broad support in the latest versions of major web browsers, although it does not have deep historical support.

Note: Despite having announced support for WebP in Safari 14, as of version 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 of unsigned 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:. 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 typically fare well with lossy compression depending on the encoder's configuration.

To maximize quality and minimize download time, consider providing both using a fallback with WebP as the first choice and JPEG as the second. Otherwise, JPEG is the safe choice for compatibility. 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 a fallback.

If the icon can be represented using vector graphics, consider SVG , since it scales across various resolutions and sizes, so it's perfect for responsive design. 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.

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. Skip to main content Skip to search Skip to select language Web technology for developers Web media technologies Media type and format guide: image, audio, and video content Image file type and format guide Change language.

The image file formats that are most commonly used on the web are listed below. AVIF offers slightly better compression, but is not quite as well-supported in browsers and does not support progressive rendering. 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. 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. As of July 7, , all relevant patents have expired and the GIF format may be used freely. True color 8 Each pixel is described by the red, blue, and green color components, each of which is 8 bits. Compression Lossy; based on the discrete cosine transform Licensing As of October 27, , all United States patents have expired.

W3C liability , trademark , document use and software licensing rules apply. No known royalty-bearing patents. 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.

Licensing No license required aside from any associated with libraries you might use ; all known patents have expired. Licensing No license required; source code is openly available. PNG is probably your best bet, but lossless WebP is arguably going to be better compressed. Good choice for lossless animation sequences GIF is less performant. Good choice for simple images and animations. Vector image format; ideal for user interface elements, icons, diagrams, etc.