Image Formats Compared

Understanding the various image formats available can feel like a minefield, and it can be difficult to understand which format to use for different cases. Not only is it important to use the correct image format for quality purposes, if you’re using images online you want to make sure that they load quickly whilst maintaining high quality too.

For example, when adding images to your website, it’s important to optimise images to reduce file sizes to ensure you preserve website loading times, and help the user experience.

Here’s a breakdown of each format, and when best to use them.

Raster Image Files

Raster images consist of pixels, which have a defined proportion based on their resolution, with every pixel having defined colour, position and proportion. This means that when an image is made bigger, the pixels stretch to fit the space resulting in them becoming distorted, blurry and unclear. This means you cannot resize them without compromising their resolution, as the original design gets stretched to fill extra area.

Raster image formats include JPG/JPEG, PNG and GIF.

Vector Image Files

Vector images are made up of proportional formulas rather than pixels, using a system of lines and curves that are scaled in comparison with the total area. This means that this type of image can be resized without going distorted and keeping their original resolution.

Logos and brand graphics are usually created as vectors, and file types include SVG, EPS, AI and PDF.

High Resolution and Low Resolution

Higher resolution images have higher concentrations of pixels and dots, meaning better quality images. In comparison, lower resolution images have lower density of pixels and are lower quality, meaning they are not suitable for large scale images. 

Resolution is shown in DPI. Printed images should be 300DPI, whereas website displays are usually 72DPI.

Lossy vs Lossless

Image formats are sometimes referred to being Lossy or Lossless, and impact how an image is resized. Lossy involves removing data from the image, meaning reduction in quality or pixelation. Lossless compression doesn’t reduce the quality of an image, and instead removes unnecessary metadata – although this is good for image quality, it means that you won’t see a big reduction in file size.

Image Formats Compared

JPG/JPEG

JPEG (Joint Photographic Experts Group) is one of the most popular image formats. They allow you to compress lots of detail into a shareable file – great for sharing digital images. JPEGs are compatible with most image processors and browsers, making them a popular choice.

JPEGs use lossy compression, which makes images as small as possible to load quickly. This does mean that if you try to make a JPEG bigger, you will stretch the pixels leading to a decrease in quality.

JPEG images do not support transparent backgrounds.

Note: There are usually no differences between JPG and JPEG formats, as they are interchangeable and represent the same image format. The reason they have different version names is due to previous versions of Microsoft Windows. The term JPG is now more commonly used as opposed to JPEG.

PNG

Portable Network Graphics are a raster file type that are lossless – meaning you can edit them and not lose quality as they are low resolution.

Their broad colour palette (supporting 16 million colours!), crisp edges and ability to have a transparent background make them great for images and text.

However, PNGs often have larger file sizes meaning they slow your website down. Therefore, we would not recommend using PNGs on your website other than for transparent background purposes.

WebP

WebP files make online images less heavy, reducing file sizes to help your website load quicker. Launched by Google, WebP files allow you to display high-quality images with smaller file sizes, and also support online animations. This format also supports both lossless and lossy compression, meaning you can reduce the image size.

However, it is important to note that some older browsers and image editors (such as older Internet Explorers) do not support WebP files.

We would recommend that you replace existing JPEG and PNG files with WebP files on your website, which will help to reduce loading times and thus give better user experience, whilst maintaining image quality. You can measure individual URLs on Ecograder to see the difference.

SVG

Scalable Vector Graphics are web friendly files that are commonly used to display two-dimensional graphics within your browser. SVG images use XML code, meaning they store information as text rather than shapes – allowing search engines to read these types of graphics as keywords.

As they do not rely on pixels, you are able to scale images without loss of quality or resolution.

SVG formats are most suited to smaller files, including simple shapes and text such as logos and icons.

PDF

PDFs (Portable Document Format) allow you to create and share documents, designed to help you present and exchange documents reliably for all software and operating systems.

You can view and print PDF documents on any device and the layout and format will be consistent with the original file. You can also use tools such as Adobe Acrobat to edit, compress and merge PDFs. You can also include clickable links in PDFs, and they are searchable – ideal for in-depth articles.

However, PDFs cannot be included directly in website content, as they must be opened separately and loaded as an individual file. Therefore, they can still be uploaded to your website backend, but will open in a new tab.

If your logo is in a PDF format, you’ll be able to view it without any design editing software.

GIFs

Gif image formats support basic animation, meaning they’ve become popular on social media in recent years.

Graphics Interchange Format files are formed up to 256 colours in  RGB, supporting up to 8 bits per pixel. Their small file size means that they are internet friendly.

With GIF formats, you can combine pictures or frames to achieve basic animations. However, they have a limited number of colours, meaning they aren’t built to include high quality images.

There we have it, our guide to image formats. If you need help resizing images, we recommend using Figma.

Need your logo in more formats because your existing one is hindering your business progress? Ballyhoo can help. We are able to create a new logo and brand identity for you from scratch, or can take your existing logo suite and transform it into a broader visual identity with our branding service. Contact us today to see how we can help.