Skip to navigation Skip to content

August 26, 2022

GIF. JPG. PNG. SVG. WTH!? Which image format should I use?

We’re all using images in our digital content creation, from adding images in presentations, building webpages with graphics, or creating interactive learning materials. The list of how we use imagery in our work and digital lives is endless.

But have you ever noticed that your image quality has changed? You may see images looking fuzzy or pixelated, or an infographic which is suddenly difficult to read.

It’s just not clarity and readability you have to consider with images. Image file size and accessibility is really important to consider when uploading to the web or using in a document that will be downloaded. Larger image file sizes slow down page load times (impacting SEO and experience). This can be a big barrier for folks struggling with bandwidth issues, rural users, or people with small data allowances.

Image types

There are four main image formats used in digital design. How do you know which one is the right one to use? Well, that all depends on how you plan on using an image.

Top 4 image formats for the web and their strengths.

Image Format Photo on web Graphics and icons on web Social Media Transparent background Animation Print or download
JPG yes   yes     yes
PNG yes yes   yes    
SVG   yes   yes yes  
GIF   yes yes yes yes  

Which ones do we use?


We build a lot of webpages in different platforms (D2L, LibGuides, WordPress, Squiz) and use photographic images in navigation tiles or banners. We also use JPG for graphics and icons in webpages

Pros: They are supported by all browsers and image editing software. Smaller file size means quicker page load time for websites. Great for email image sending and for social media posting.

Cons: Don’t use JPG if you want to layer or build an image (like a scene). Smaller file size means lower quality

Key JPG tip: Don’t save and re-save the same jpg file multiple times because the quality of the image will degrade more and more each time you save it.


We love animated pop culture references, especially for informal chats or a social media post. The best file format for that is GIF.

Pros: Files in this format will be the smallest size of any image file format. Can give your content movement.

Cons: GIF files are limited in colour palette and are lower in image quality. Can distract your viewer. Not used for print.

Key GIF tip: Remember to avoid copyright troubles with your GIF use by directly embedding rather than uploading the file.


We use PNG when we need to combine text and graphics as it keeps the image readable with clean lines.

Pros: PNG is great for web images that need a transparent background (which JPG can’t do). They can also be compressed in size (e.g TinyPNG).

Cons: Designed for web and don’t work well for print.

Key PNG tip: They can be resaved multiple times without losing quality!


Our digital designers use SVG when working with icons, graphics and logos.

Pros: You can enlarge or decrease your image as much as you like and it won’t pixelate.

Cons: SVG isn’t accepted in a bunch of platforms, e.g. H5P, LibGuides. Don’t use for printing or downloads.

Key SVG tip: Great for designers with high tech skills who are creating animations or interactive images.

Key take-aways

This post has been co-authored by Emeka Anele, Rachael Wilson, Kat Cain, Sarah Fennelly, Laura Tay, and Elizabeth Delacretaz. Thanks team!

Posted byRachael Wilson

Join the conversation

back to top