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.
Top comments (0)