A picture’s a picture, right? Not when it comes to web design and SEO. Believe it or not, image optimisation has a dramatic effect on your website’s SEO. So dramatic, in fact that we wrote an entire blog on it! Each file type has its own benefits, drawbacks and have their purpose. So, what’s the difference between PNG and JPEG? GIF and SVG? What are the best image file formats for your website?
JPEG
JPEGs are the old faithful of image file types. They support a large colour pallet whilst maintaining a small enough file size to not take up too much bandwidth when it comes to users loading a web page. This means you can maintain a good page load speed, as well as high image quality which makes Google happy, considering page load speed is a metric that Google use to determine their page rankings.
However, the main drawbacks of JPEGs are:
- They’re lossy
- Incapability of transparency.
When zooming in on a JPEG, areas of an image can become blurred and blocky which is far from ideal when you’re looking to use a “zoom” function on your site. The main work around for this is to use a link that opens the image with the zoom capability inside a lightbox on the webpage. We’ll cover transparency more comprehensively in the next section, but it’s important to note that JPEGs don’t support transparency. Any imagery without a background, will automatically be rendered with a white, opaque background.
PNG
PNGs were developed in 1996, soon after the GIF (1987) and JPEG (1992) format, and they aim to bring together the best of both worlds. They’re lossless, have a 16,000,000 wide colour palette and support transparency. So why aren’t we using them over and above the humble JPEG? It all comes down to file size. A large image file size means longer loading times and therefore, possible lower SERP rankings. Adobe Photoshop (or some of the free alternatives listed below) enables you to save PNGs as two different file sizes, however these still don’t compare to the compact file size of a JPEG.
- PNG-8
256 colour palette | smaller file size | will not provide the same image quality as a JPEG - PNG-24
16,000,000 colour palette | larger file size | increases page load time if used too regularly. I.e. instead of a JPEG
With regards to transparency, this is the main advantage that PNGs have over JPEGs. Take the Yellowball logo for example. The image on the top is a PNG, whereas the image at the bottom is a JPEG.
If you’re looking to place a coloured, transparent overlay to an image, a PNG will support the transparency whereas a JPEG wouldn’t. It’s for this very reason that PNGs are still a very popular format to use on websites as it provides more flexibility on the page. PNGs allow web designers to create layers on a page to help emphasise certain elements by adding depth of field.
WEBP
WebP is an image format developed by Google developed in 2010. It provides both lossless and lossy compression formats for images used on the web. Their smaller file size makes for improved load speeds whilst maintaining a higher quality of image. Lossless WebP images have a file size that’s 26% smaller than that of a PNG, and up to 34% smaller than comparable JPEGs. Additionally, both lossless and lossy WebP images support transparency much like PNGs, with lossy images coming in at file size 3x smaller than that of a PNG. WebP is a recommended file format for SEO purposes, because WebP images tend to be smaller than JPEG and PNG formats.
GIF
GIFs are a lossless image format with a limited colour palette which makes them far from ideal for uploading digital photography, but ideal for buttons and blocks of colour. You may be more familiar with the term GIF in relation to sending your friends funny GIFs of short image/video hybrids from Friends episodes. However, a GIF can also be a stationary, solid image.
GIFs however, are not one of the best file formats for web design. They’re rarely used throughout web design as the lossless benefit of a GIF is not worth the sacrifice of the extremely limited colour palette. If a lossless image is required, a PNG will be used in place of this due to the superior colour palette available.
GIFs can be a speed saving alternative for video content, they are great for small simple video loops or animations, for this reason, online adverts are often in GIF format to draw the users eye.
SVG
SVG stands for Scalable Vector Graphic. Because SVGs are vector graphics as opposed to raster images like PNGs and JPEGs, they can be resized and scaled without losing image quality and clarity. This scalability makes them the ideal candidate for graphics that are used across desktop and mobile, ideal for responsive websites.
The other key benefit of SVGs is their small file size. Because vector graphics are scalable, they can be saved into a very small file size regardless of how the image is to be displayed on a webpage. With raster images (PNG, GIF, JPEG), the image needs to be uploaded at the largest possible size it could be viewed at. This means that a site on a computer with a small screen, is still having to load an image intended for a bigger screen. Reason being, an image can be reduced in size whilst maintaining quality (to a point), however the reverse isn’t true.
SVGs are perfect for logos, icons and any other simple vector illustrations you want to use on websites. They are tiny files that are pixel-perfect across devices.
So there you have it, your comprehensive guide to image file types, their uses and implications. Check out our image optimisation blog post to delve deeper.
