Today I learned that PNG and JPEG are kind of legacy file formats for serving images online. They are, of course, widely supported, but there are better formats like WebP, which I was familiar with for a long time already, and AVIF, which I was not familiar with at all.
And the AVIF file format is already widely supported in Chrome since August 2020, in Firefox since October 2021, in Safari since late 2022, and in Edge since January 2024. So the vast majority of internet users can view AVIF images. WordPress also has native support for AVIF images. They support transparency, which makes it a viable alternative to PNG files. Good for logos and graphics. Allows for very vibrant colors and brighter highlights and deeper shadows because it has a high dynamic range and a wide color gamut. It also allows animation similar to an animated GIF. So it can store a sequence of images within a single file, but with much better compression and visual quality. And it allows for lossy and lossless compression.
Now I’ve seen lossy and lossless compression many times, and I always used to assume that it is about reducing the file size while keeping the quality of the image the same or reducing the quality of the image. That is actually not what it’s about. Lossless means that the original data can be perfectly reconstructed from the compressed data. So if you need some way to keep the original data or to reaccess the original data or to resource-face the original data, then you should choose lossless compression. If you don’t care though that you can’t restore the original quality from a compressed image, then lossy compression is totally fine. And JPEG files for example will always be compressed through lossy compression. The compressions are actually compression algorithms that you run on your images.
PNG & JPG – Raster Formats
PNG and JPG files are raster formats, which means that they are pixel-based and there’s an information value for each pixel which determines what the color value for each pixel is. The downside of these raster-based images is that they do not upscale well. When you upscale them, they typically become pixelated or blurry.
SVG files are different. SVG stands for Scalable Vector Graphic, and they can be scaled to any size without impacting the quality. They also have the added benefit that they store data in XML, which means that you can use them directly in your code as raw HTML with the SVG element, and you can programmatically change the color of the image.An SVG image stores paths, lines, points, and curves, but not pixels.
SVGs are typically great for icons.They are also great for website logos because they scale perfectly and they allow you to adapt your layout to any responsive design.
I learned these things from FreeCodeCamp.
Leave a Reply