The internet used to consist of .jpg (.jpeg) and .gif and nothing more. But then all websites used to have flashing neon text and be built in tables. Times change and technologies evolve.
What image formats are available for web use?
The main formats you have at your disposal include:
Jpeg
the go-to image format for nearly everything on the internet, still. It works, it’s good and it compresses nicely. Is it the best choice for you though?
- When to use it: General purpose photos saved out from standard manipulation programs. It has compatibility everywhere and is an all-round safe bet. Be sensible when scaling the image (in terms of pixels) and choose a compression level that suits the subject. For a small detailed image you might want a really crisp file, for a background image you can increase the compression without any real noticeable reduction in quality.
- When not to use it: Logos where you’ve got access to other options (see later), images that require transparency (you can’t do it), icons that could be depicted as webfonts or vector graphics.
Gif
The popularity of this format declined hugely in the early 2000’s, then people realised it’s a really convenient format for sharing animated faces, emojis and other comedy images. The term “gif” has almost been recontextualised to mean “small funny image” rather than just an image format capable of being animated.
- When to use it: sending low quality comedy images to friends, instant messaging, an easy accent on a social media platform. It’s convenient and everything can view them. They’re also capable of transparency, which is handy sometimes.
- When not to use it: when there’s literally any alternative! Gif images have poor compression, they can end up being huge. Image quality is poor as they’re limited to 256 colours.
Png
Short for portable network graphics, png files are full 24bit colour and feature the ability to use transparency. Again, support is universal.
- When to use it: png files are a much better option than gif images if you need transparency, the image will be far more crisp and have a full colour spectrum. Good for logos if you don’t have access to a vector source image, or the logo contains full colour complex graphics / pictures.
- When not to use it: as a substitute for a jpg. Jpg images are smaller and have the same colour spectrum. As standard from most programs, png images are not well compressed and can result in huge file sizes. There are tools and websites that can reduce this for you though such as https://tinypng.com/ which offer a degree of compression.
Svg
This format allows you to publish vector graphics in a format that’s viewable by web browsers. Images are represented as shapes defined by paths; circles, squares and other shapes make up the image.
- When to use it: At any available opportunity. If you’ve got access to an svg vector file for an image or logo then always choose this over a png or other format. Svg files are small, tiny in fact. They can also scale infinitely without pixilating. Fantastic for backgrounds where the image needs to be able to scale to large proportions. You can also dynamically change parts of the image with colouring, even animation is possible.
- When not to use it: when it’s not a real svg; sometimes a designer may export an image with svg extension, but it’s really just a png/jpg image embedded in the structure of an svg. There’s no benefit to this and it’s not a real vector graphic. Complex photos cannot be exported as an svg, think of it as a format for graphics rather than photo images.
Webp
This is a modern high-compression image format designed by Google specifically for the web. You can have lossless (no quality loss) or lossless (some quality loss) compression depending on what’s required.
- When to use it: whenever the client browser supports it and you can’t use an svg. Webp images are much smaller than jpg files and mean faster loading sites or a better quality image for a given file size. They can also feature transparency.
- When not to use it: not all browsers support this format, although most do. A belt and braces approach is to provide a “fallback” of a jpg or png file in the event that a browser can’t read it, but serve the webp image to everyone else. Most image editors don’t support exporting directly to webp, this means using a website or tool to convert your files.
- Other notes: the most effective way to leverage this format is to automatically generate webp versions of your standard images at the point of upload, then use scripting or redirects to detect if the client can support the image format or not. Wordpress has numerous plugins that can serve webp in this manner (ewww image optimizer for example). With React based websites we use Next/Image to transcode and optimise images and convert to webp on the fly, then serve up the format that suits the browser.
Avif
Another modern image format designed for the web, this time with the aim of replacing the aging gif file format for animations. It provides superior compression to gif formats with vastly improved 12bit colour depth. The compression algorithm used means that files are much smaller, smoother and more crisp.
- When to use it: small animations on the web, anytime you’d use a gif you could almost certainly use an avif file for a better result. Of course, this depends on having source material of a suitable quality to convert to avif to leverage the best results.
- When not to use it: if you need 100% compatibility with all browsers. Modern versions of Chrome, Firefox and Safari can view this just fine, although IE and Edge currently can’t. If it’s an essential piece of animation that absolutely must be available then either use a compressed video format or… a gif. You can provide a fallback for animations, perhaps to a static image if you want to use avif on your site – although it’s not quite as automated and easy as webp conversions. Expect this format to evolve and replace gif images completely, just not quite yet.