Jpeg progressive, gif, png, svg... what?
I have been wanting to write down my thoughts on this for about 3 or 4 years, somehow I never thought it was such an important topic to put time on it. However, recently I found myself explaining to a developer why using one over the other would improve the experience on a site, just when I thought everyone knew.
So here my 2 cents on the topic.
Choosing the format of an image for a site seems a bit trivial, it's not that important, however, it can not only save you some weight, it can speed up the speed of the page, therefore, it can improve the experience of your users.
A .gif is a Graphics Interchange Format, a format that supports up to 8 bits per pixel for each image. It supports animations and allows a separate palette of up to 256 colours for each frame. Gif's aren't very good at reproducing colour due to its limitations on compression.
It's interesting to learn that the way it compresses it's called Lempel-Ziv-Welch (LZW) lossless data compression technique which reduces the file size without degrading the visual quality, and even thought the way it saved the data was important, was this fact that made it most popular about 10 years ago, to be used in web.
So if you are working on small animated images and .svg doesn't apply, .gif is the format you want.
If you want more technical details wikipedia has a good summary.
So then, we would think about Jpegs
We think that it compresses in a way called lossy compression for digital images, particularly for those images produced by digital photography. The degree of compression can be adjusted. JPEG typically achieves 10:1 compression with little perceptible loss in image quality. Which means that if we are trying to display big hero images, this is the format we want to go for.
The issue? it loads slow.. but jpeg was aware about this and 4 years ago they came up with it's settings called
Jpeg Progressive allows you to render a big hero image and high quality and faster speed.
Designing a landing page based on big images? Jpeg progressive is the answer.
If you want more technical details wikipedia has a good summary here.
.Png format supports lossless data compression. What not many people know is that PNG was created as an improved, non-patented replacement for Graphics Interchange Format (GIF).
PNG supports palette-based images (with palettes of 24-bit RGB or 32-bit RGBA colours), grayscale images (with or without alpha channel), and full-colour non-palette-based RGB[A] images (with or without alpha channel).
So even though it doesn't support other than RGB based images, PNG is a very powerful extension to use static images in your site that don't require be high quality.
If you have to use secondary static images to support content in your site, lower the weight and keep quality with .png.
If you want more technical details find them here on search target.
Last but not least, SVG
The big animation improvement in latest times. SVG stands for Scalable Vector Graphics, SVG images, being XML, contain many repeated fragments of text, so they are well suited for lossless data compression algorithms. When an SVG image has been compressed with the industry standard gzip algorithm, it is referred to as an "SVGZ" image and uses the corresponding .SVGZ filename extension.
The most important factors about SVG without getting too wordy is that it not only scales perfectly, rendering perfectly on screen, but its very low weight and it animates perfectly with CSS and JS.
If you are going to create complex animations for a site, your best tool will be SVG images. They will do whatever you want keeping quality and scale.
For instance, check this codepen from Sarah Drasner:
If you want more technical details find them here on Css-tricks//SVG explanation and tricks.
So, in summary,
- small simple animations? .Gif
- big high quality hero images? .Jpeg progressive
- secondary good quality-low weight images? .Png
- good hero animations? .SVG
Going back to basics it's always good.