Image Formats Compared Share: Ballyhoo Date Published 16 January 2024 Categories Guide Reading Time 7-Minute Read A guide to what file formats to use and when Understanding the various image formats available can be like navigating 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, but if you’re using images online you want to make sure that they load quickly while also maintaining high quality. 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 that have a defined proportion based on their resolution, with every pixel having a 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 a total area. This means that this type of image can be resized without becoming distorted and, therefore, can keep its 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 a lower density of pixels and are lower quality, which means 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 this can affect how an image is resized. Lossy involves removing data from an image, meaning reduction in quality or pixelation. Lossless compression doesn’t reduce the quality of an image but, 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. It allows 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. Key Features Lossy High resolution Raster .jpg or .jpeg extension When to Use Website Print 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. Key Features Raster Image file Lossless Transparent backgrounds .png extension When to Use Simple graphics Logos Infographics Charts Banners 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. They also support online animations. This format also supports both lossless and lossy compression, meaning you can reduce an 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 provide a better user experience, while maintaining image quality. You can measure individual URLs on Ecograder to see the difference. Key Features .webp extension Lossy and Lossless When to Use Logos with transparent background Website images Blogs 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. Key Features Vector .svg extension When to Use Logos Icons Simple Illustrations Charts 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. Key Features Vector .pdf extension When to Use Documents Reports Magazine Covers Traditional marketing such as flyers Larger Printing 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. Key Features Raster image file Animation support Lossless .gif extension When to Use Animation of web graphics and logos Memes 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 we 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.