In the digital world of web design and development, images play an irreplaceable role, but which format is right for your project? In this article, I will guide you through an overview of image formats, from the traditional JPG and PNG (GIF), which are staples of the web, to the modern SVG, WebP and AVIF, which bring new possibilities in compression and image quality.

GIF

Source: Backing Up Homer Simpson GIF. In: Giphy [online]. [cit. 2024-01-25]. Available from: https://giphy.com/gifs/dl-a93jwI0wkWTQs

GIF (Graphics Interchange Format) - introduced in 1987
support a palette of 256 colors
due to the low color palette, it is not suitable for large photos
known for its lossless compression and the ability to create simple animations
today, it is almost not used on the web
support of all browsers - caniuse

JPEG

Source: Jpeg. In: JPEG [online]. [cit. 2024-01-25]. Available from: https://jpeg.org/

JPEG (Joint Photographic Experts Group) - introduced in 1992, but process started in 1986
widely used for photographic images
uses lossy compression, reducing file sizes substantially while maintaining good image quality
lacks support for alpha channel
limited to 8-bit images
it is the most popular format worldwide
optimization using library: MozJPEG
support of all browsers - caniuse
contains several subversions

JPEG 2000

according to the name developed in 2000
based on the wavelet transform
adds features like lossless compression, transparency, etc.
it's not backwards compatible with the original version, so it didn't replace it
weak support in browsers (Safari only)

JPEG XR

originally Windows Media Photo and HD Photo
format developed by Microsoft
first introduced in May 2006
it supports both lossy and lossless compression
the extension of this format is .hdp (originally .wdp)
supported in Windows Vista, but compatibility should also be ensured with Windows XP
support in browsers only Explorer and the old Edge
other subversions are for example: JPEF XL, XS, XT, LS, etc.

PNG

Source: Portable Network Graphics In: Wikipedia[online]. [cit. 2024-01-25]. Available from: https://de.wikipedia.org/wiki/Portable_Network_Graphics#/media/Datei:Png-logo.png

PNG (Portable Network Graphics) - introduced in 1996, after the GIF license fee
offers a lossless compression format, making it suitable for storing images with text, line arts, and graphics
often used when quality and file size are more important than file loading speed
designed for images with lossless compression
handles eight-bit transparency (so-called alpha channel)
not suitable for photo type images
optimization using libraries: pngquant, oxipng
support of all browsers - caniuse

WebP

Source: WebP logo. In: Wikipedia [online]. [cit. 2024-01-25]. Available from: https://en.m.wikipedia.org/wiki/File:WebP_logo_2010.png

introduced in 2010 - developed by Google
WebP provides superior lossless and lossy compression for images on the web
it supports transparency and animation, and is used for efficient image delivery, especially on websites
it is designed as a replacement for JPEG and PNG
it performs better than JPEG and PNG
support of all browsers - caniuse

HEIF

Source: Heif icon. In: Iconfinder [online]. [cit. 2024-01-25]. Available from: https://www.iconfinder.com/icons/4059856/doc_file_heif.heif_format_extension_icon_

HEIF (High Efficiency Image File Format) introduced in 2015 - developed by Moving Picture Experts Group (MPEG)
is known for high efficiency and low file sizes while maintaining high image quality
since 2017 used by Apple devices to store recorded images
browser support: only new versions of Safari - caniuse

AVIF

Source: AVIF. In: Wikipedia [online]. [cit. 2024-01-25]. Available from: https://fr.wikipedia.org/wiki/AVIF

AVIF (AV1 Image File Format) introduced in 2019 - developed by Alliance for Open Media
uses AV1 video encoding for the HEIF file (container) format
AVIF generally has better compression than WebP, JPEG, PNG and GIF and is designed to replace them
it handles lossy and lossless compression, alpha channel, animation etc.
support of all browsers - caniuse

SVG

Source: SVG. In: Wikipedia [online]. [cit. 2024-01-25]. Available from: https://cs.wikipedia.org/wiki/Soubor:SVG_logo.svg

SVG (Scalable Vector Graphics) introduced in 2001 - developed by W3C
SVG is an XML-based markup language used to describe vector graphics, which can be scaled to different sizes without loss of quality
integrates well with other web technologies, allowing for interactive and dynamic graphic applications
it's commonly used in web design for logos, icons, and complex illustrations that need to remain crisp at various screen resolutions and sizes
SVG supports features like animation and interactivity, enabling rich graphical displays that can be integrated with web pages for enhanced user experiences
unsuitable format for photos
support of all browsers - caniuse

Final recommendations

Thanks to high browser support for WebP or AVIF formats, these formats should completely replace JPEG (photos) and PNG (banners). For animations and vector graphics, it is best to use SVG.Formats such as JPEG, PNG and GIF should only be used occasionally. To optimize images, we can use a great application in the form of Squoosh.

References:
Kabachinski, J., 2007. TIFF, GIF, and PNG: get the picture?. Biomedical instrumentation & technology, 41 4, pp. 297-300 . https://doi.org/10.2345/0899-8205(2007)41[297:TGAPGT]2.0.CO;2.
Nicholson, S., 1998. GIF versus JPEG: Choosing a Graphics Compression Format for Web Publications. Information Technology and Libraries, 17, pp. 109-110.
Boutell, T., 1997. PNG (Portable Network Graphics) Specification Version 1.0. RFC, 2083, pp. 1-102. https://doi.org/10.17487/RFC2083.
Jakopec, T., & Hrkac, Z., 2021. Use of Image File Format WebP on Websites in Croatian top Domains. 2021 44th International Convention on Information, Communication and Electronic Technology (MIPRO), pp. 464-469. https://doi.org/10.23919/mipro52101.2021.9596819.
N. Barman and M. G. Martini, "An Evaluation of the Next-Generation Image Coding Standard AVIF," 2020 Twelfth International Conference on Quality of Multimedia Experience (QoMEX), Athlone, Ireland, 2020, pp. 1-4, doi: 10.1109/QoMEX48832.2020.9123131.
Jackson, D., 2002. Scalable vector graphics (SVG): the world wide web consortium's recommendation for high quality web graphics. , pp. 319. https://doi.org/10.1145/1242073.1242327.

Overview of image formats for today's websites

GIF