Images play a crucial role in creating a fantastic UX for your website audience. However, the sheer volume of website image file formats available is enough to make any person's head spin. Throw in the acronyms, and things become a blur.
What's more, how do you know the image format to use on certain sections of your website? Can you also use these image formats interchangeably? See, it can get complicated, but it's not impossible to get the hang of it.
In this guide, we help you see things a little clearer with an overview of image file format types and where to use each.
Let's dive in.
Does it Matter What Type of Image Format You Use on a Website?
Yes, it does. Image formats affect aspects like the performance and speed of your website. For instance, some image formats have a large file size that can make your website slow and clunky. On the other hand, using the correct image format ensures that your site is fast, which has a high impact on website conversion rates.
Also, some file formats are more scalable than others. Scalability is the ability to shrink or stretch an image to ensure an image is responsive on all screen sizes. By choosing a scalable image format, you create a wonderful UX for your audience, despite their screen size.
The Two Types of Image Files
We can categorise images into two primary image files:
- Raster image files
- Vector image files
Raster Image Files
Raster images are made of individual blocks and a series of pixels( tiny dots). These tiny dots contain different tones and colours, which come together to form an image. Raster images are the images you mostly see on websites or print and are created by scanning or photographing an object.
Because they are made up of pixels, raster images are resolution based. This means that stretching a raster image without adjusting the resolution results in a lower quality image.
Examples of raster images would be PNGs, JPEGs, and GIFs.
Vector Image files
Vector images are made up of paths. In other words, these images are created through mathematical formulas and geometric shapes such as curves, lines, polygons and points.
Because they rely on algorithms instead of pixels, scaling vector image files does not affect the quality or file size. Also, vector images are independent of a screen's resolution. This means that they'll be rendered as intended despite the resolution of a screen.
Examples of vector images include SVGs, PDFs, AI and EPS. Vectors are a perfect match for brand graphics and logos since you can resize them frequently to fit use.
Popular Image Formats Used By Websites
JPEG image format is the most commonly used format on the web. The JPEG image format was developed in 1986 by the Joint Photographic Experts Group, hence the acronym. This image format works best for natural photographs since JPEGs support a wide variety of colours, tones, and gradients. JPEG is also a high-quality image format making it ideal for the web. However, JPEGs are a lossy format that loses quality when resized or compressed.
Another reason why JPEG image format is popular on the web is that JPEGs have universal support. They also have a small file size which translates to fast loading images and, ultimately, a fast website. While they work great for complex images, JPEGs are not suited for images with only a few colours, such as interface screenshots and computer-generated images.
Overall, JPEGs are mostly a reliable choice for website images. However, they are not suitable for all images. For example, a JPEG image format does not support a transparent background— PNG format works better in this case.
Portable Networks Graphics (PNG) is also a popular image format for websites. PNGs are lossless, meaning that you can resize or compress them without losing quality. When compared to a JPEG image, the PNG image format retains a better quality after compression.
However, PNGs are not suitable for photographs or images with complex colours. They are better used for images with rapid colour transitions, such as an interface screenshot. PNGs also support a transparent background in images, making them ideal for brand imagery and logos.
Like JPEGS, PNGs have universal support, which is an excellent option for your website's logo.
The web picture (WebP) format is a newer kid to the game, unlike JPEG, PNG and GIFs, which have existed for longer. WebP was developed by Google in 2010 and has steadily gained popularity in website design.
One reason for the continuous uptake of WebP image file format is its ability to support lossy and lossless compression. When working with WebP image formats, you can significantly reduce the file size of images without losing the image quality. This takes the load off your website servers, resulting in a faster website, and of course, a great UX for your readers.
Is WebP better than JPEG and PNG? Not in all instances. However, WebP has a 50% smaller file size than PNG and 35% compared to JPEG. You can also use WebP for animated images as the format has greater support for higher transparency, colour depth and animated frames.
The biggest drawback of WebP image file format is limited browser support. WebP is also incompatible with some popular content management systems, forcing you to use a plugin or involve coding. That said, WebP can be an excellent choice if you want a fast-loading website without sacrificing image quality.
Scalable Vector Graphics is a vector image file format developed by the World Wide Web consortium. Like all vector images, you can scale SVG and still maintain image quality. This image format is best used for simple illustrations, icons and logos.
Like PNGs and JPEGs, SVG formats enjoy universal browser support. The SVG image format also has a small file size and is overall a good choice if you want compression capability while retaining image quality.
However, not all CMS support SVGs. But in this day and age, you can easily find a workaround with plugins.
Graphics Interchange Format is one of the most common animated image formats on the web. As previously mentioned, it falls under Raster image files. What's more, the GIF image format has universal browser support, making it a good format for your website's animated images.
GIFs operate on a lossless compression model but support fewer colours, 256 to be exact. For this reason, it's better not to use GIFs for static images. GIFs result in larger file size and a low-quality image if used in static form. Since animated GIFs have a larger file size, it's better to use them sparingly to ensure that your website loads quickly.
Less Common Website Image File Formats
While JPEG, PNG and GIF are the most common image formats used on the web, they are not the only web-compatible formats.
In the most basic explanation, the APNG image file format is an animated PNG. Animated Portable Graphics(APNG) work like GIFs, but they support transparency and 24-bit images. (GIF only supports 8-bit images.) They also have a smaller file size and are of higher quality. However, APNG has limited browser support, so they are not always ideal for website use.
AVIF is a newer image format initially developed to transmit video over the internet. This image format has higher-level lossy compression than JPEG, WebP and PNG. Case in point: AVIF lossy images are usually 50% smaller when compared to JPEG.
AVIF image formats also support lossless compression and alpha channel.
Like APNG, AVIF image file formats have limited support. For instance, they are currently only supported on Chrome, Android and Firefox. You can still use it on your website, but you'll need a fallback image format for unsupported browsers.
When to Use Each Image File Format
The type of image format you use will depend on the purpose of an image. For instance, JPEG will work well for images with complex colours, gradients and tones. Images containing physical product photos and stock images may be better served in JPEG formats.
On the other hand, screenshots and images with fewer colours or more colour transitions are better served in PNG formats. You can also use the PNG format for your logo, brand images, infographics and banners.
GIFs will be great when you need to make short illustrations that don't require a full video. They are also a nice way to add humour to your blog posts and showcase some personality. However, refrain from using GIF format for static images.
Knowing the right website image file formats to use is only half the battle. You have to fulfil the other half by creating high-quality images and optimising them for SEO and user experience. When in doubt, use JPEGs for photos, PNGs for screenshots and GIFs for short animations.
However, if you need further help with your Mobile Responsive Web Design website's image formats, don't hesitate to contact PixelFish. We would love to help you create a website that your audience and search engines love. Contact us to find out how we can get started.