Recommended Image Formats for Websites

Looking to Optimize your website? Selecting the appropriate image formats for your website is important to ensure optimal user AND Googlebot experience.  You want your users to see great images but not take forever to load.  You want your website to load fast, so the Googlebots don’t get frustrated with super-large files.

There is no one-size-fits-all image type, however a couple newer formats seem to be coming to the forefront.

NOTE that the information below isn’t for the end user with no website experience.  We are talking to people who want a website optimized for Google – those who really want to dial things in. You likely can’t do this optimization work your phone, so some sort of image editing software will need to be used.

What are the most common image types?

JPG / JPEG Format

JPEG is the most widely used image format, particularly for photos and colourful images. JPEG images are generally compressed to reduce file size, but must be balanced with image quality.

Best for:

• Photographs
• Images with gradients and complex colours

Compressing your JPG image

You never want to upload your JPG image without any compression.  You have a couple of options – standard optimization, or progressive compression.

Standard optimized image is one where you just reduce the quality of the image so that the file size decreases. The image loads images one line at a time, from top to bottom, and each line is already pixel perfect. This could result in the image taking a while to load if you have a slow connection.

A progressive JPEG loads in multiple passes, initially displaying a low-quality version that gradually sharpens. This format is good for large images where users can see a preview before the full image loads.

Progressive JPEGs can be avoided for small images where the progressive loading offers no benefit and for images that require immediate clarity. Since progressive JPEGs can appear blurry at first, they may not be suitable for all applications.

PNG Format

PNG is a lossless compression format, meaning the image quality remains intact during compression. PNG allows you to have transparent images / backgrounds.

Best for:

• Logos
• Icons
• Text-heavy images
• Images requiring transparency

SVG Format

SVG is an XML-based vector image format. Unlike raster images (e.g., JPEG or PNG), SVG images can be scaled to any size without loss of quality. This makes SVG great for icons and logos. It has only been in the last few years that SVG files have been fully supported by all the major web browsers. This is my personal favourite file format.

Best for:

• Icons
• Logos
• Simple illustrations

NOTE about SVG files for Logos.  While the browsers display SVG file formats, sometimes, you need an alternate format (eg PNG) when submitting the logo file to external directories / for schema markup etc.  So it’s a good idea to upload a backup logo file in a PNG format if you are doing SEO work.

GIF Format

GIF is an older format that supports animation. It uses lossless compression but is limited to 256 colors, which can reduce image quality for complex images. A GIF image will be much smaller than a PNG image, but you have to live with the colour limitations.

Best for:

• Simple animations
• Small icons with limited color palettes

WebP Format

WebP is a relatively new image format developed by Google that provides great compression for images on the web. WebP images can have transparent backgrounds.

WebP offers better compression efficiency than JPEG and PNG, resulting in smaller file sizes for images of comparable quality.

WebP should eventually take over PNG and JPG file formats.

Best for:

• Photographs
• Images with transparencies

HEIC Format

You may have noticed that your Apple device is saving your photos with a HEIC extension. HEIC provides compression efficiency, with no loss in image quality, but is an Apple format and may not be supported by your website browser at this time. Currently, we do NOT recommend adding HEIC files to your website.

So, What Format Do We Recommend For Each Image Application?

• Standard Logos: SVG if you can, if not, then PNG (add PNG as a backup image)
• Logos with Photograph-Style Images: WebP if you can, if not, PNG
• Icons: SVG if you can, if not PNG
• Full Colour Photos: WebP if you can, if not, Progressive JPG
• Small Colour Photos (10kb or less) – Optimized JPG
• Black & White Photos: WebP if you can, if not, Optimized JPG is fine
• Photos with Lots of Text: WebP if you can, if not, PNG
• Images with Transparent Backgrounds: WebP if you can, if not, PNG

 So hopefully that is a bit of a help.  If you have any questions, please contact us.