Sorted Design Agency
When to use different file types for images
by josh
Young man looking at wall of creative ideas

Most people know that different file types exist for images, but have no idea why or how they differ. They only understand and use JPEG for all their needs, but sometimes this is not the right file type for a job.

Understanding the different file types is important for web owners as they can improve the quality and performance of your website, as well as the user experience. Unless you’re a photographer or a designer, the different file types probably don’t matter to you, but each file type has been developed for a specific purpose.

Different forms of content require different file types. We’ll outline the advantages, disadvantages and uses of each image file below. This will help you to make an informed choice and utilise the best file type for your needs.

JPEG (Joint Photographic Experts Group)

This is the most common image format used by cameras and websites. Everyone has used a JPEG before when transferring pictures off their cameras or sharing images on smartphones.

JPEG is a compressed file (based on lossy compression) which simply means that it keeps the information that you can see and gets rid of the data that the eye cannot see. It is best used for social media, online photography portfolios and for standard website images.

This saves space and makes the file size smaller without affecting the quality of the image too much. This is why JPEG is so popular – it’s a relatively small file size, making downloading and uploading faster. It is also able to be viewed on all devices and websites.

However, because it is based on a compression system, everytime you save a JPEG, you compress it further. This results in a loss of quality, which is why some JPEGs look pixelated when they are saved a few times over.

  • Advantages: small file size, can be viewed on any device
  • Disadvantages: loses quality when saved multiple times

PNG (Portable Network Graphics)

This is probably the second most common file type for images. PNGs are higher quality than JPEGs as they are based on a lossless compression format. This simply means that they retain most of the information that even the eye can’t see, making the image quality superior to a JPEG.

PNGs also retain the original colours of the image as well as transparency. For example, if you have an image with a transparent background, saving it as a PNG will keep the background see-through. If you saved this image as a JPEG, it would make the background white. This makes PNG ideal for logos as you can make the background transparent instead of having a white box around the logo

One disadvantage of a PNG is that the file size is slightly larger than a JPEG, making loading time a bit slower. If you have an online photography portfolio, you may be tempted to save all your images as PNGs for the quality benefits, but they will take longer to load and the user might get tired of waiting for the images to display.

  • Advantages: high-quality images, supports transparent backgrounds
  • Disadvantages: larger file size, slower to load on a website

GIF (Graphics Interchange Format)

Most people have heard of a GIF and know that they make for entertaining animations on social media comment threads. Their defining feature is the ability to show movement, like a video, although GIFs are technically images.

They are a series of bitmap images that play in quick succession, giving the appearance of movement. Like PNGs, GIFs also support transparency and they are a much smaller file size than an actual video, which is why they are popular on social media and messaging apps. They are commonly used for moving animations on websites, such as banner adverts and logos.

One downside to GIFs is that they have a very limited colour range – you’ll often see GIFs that have been converted from videos and the colours look strange. That’s because GIFs only have the ability to display a certain number of colours, and so they change colours to match the nearest one that they can display.

This means that GIFs should ideally be used for graphics with only a few colours, such as logos and shapes rather than photographs or videos.

  • Advantages: smaller file size than video, supports animation and transparency
  • Disadvantages: very limited colour range

PDF (Portable Document Format)

PDFs are mainly used for online documents and printing purposes. The reason is that they display the same on all devices without a loss of colour, quality, text or images. PDF files usually contain a mixture of text, images, logos, vectors and videos. They can even display interactive files such as buttons.

This makes PDF a great file type for long text documents with visuals, such as academic journals, brochures and e-magazines. However, to view a PDF requires a special reader or software on your device or website. Most websites that use PDFs ask users to install Adobe Acrobat or similar software to be able to view their content.

  • Advantages: displays a variety of formats, keeps documents the same regardless of device
  • Disadvantages: requires special software to display

SVG (Scalable Vector Graphics)

Designers often use vectors, or SVGs, for graphic designs and illustrations. Vectors are often created using special software such as Adobe Illustrator and they are great for graphic design as they have no limits to their quality. If you zoom in on a JPEG, you’ll be able to see each individual pixel, but SVGs never pixelate.

This gives SVGs a clean, high-quality look, no matter the size at which they are displayed. You could place your SVG logo on a billboard and it wouldn’t pixelate. All web browsers are able to display vectors nowadays, but some social media platforms still cannot.

  • Advantages: high-quality at any display size, never pixelate
  • Disadvantages: not all social media sites are able to display them

Become familiar with the different image file types and use the right ones for your visual needs. Choosing the correct file type can benefit your website speed, quality and professional appearance.

In order of quality, GIF is at the bottom (but sometimes the quality doesn’t matter), followed by JPEG, then PNG, then PDF and finally SVG (which has no limit to its quality). Think of the advantages and disadvantages of each file type and start using the right ones on your website.

___

Sorted Design Agency is a creative company that constantly looks for solutions to other people’s problems. These problems come mostly in the visual format, such as graphic design, logo and illustration, but we’re experts in brand development, website design, and digital SEO campaigns as well.

___

Based in Pretoria and Cape Town, Sorted has been in the content marketing industry since 2006. We assist your company with its corporate identity by communicating core values through content and articles written for your website, blog and news area. This content is supported by AdWords and social advertising, which facilitates wider reach and audience growth. Turn your website into a business tool.

___

Sorted also owns two other businesses; InkFish Print Studio – a printing company that handles a range of promotional materials for businesses and other services for individual customers, and Pampiri + Kie – a gifts and stationery store selling online and in-store. Both of these companies operate from Cape Town and Pretoria.

___

Follow us on Facebook, Instagram and LinkedIn for the best tips on design, marketing and web development. We also share the latest industry news and fresh content to inspire fellow designers, creatives and marketers.