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 |  |
|
|
|||
| PNG | |
|
|
|||
| SVG | |
|
|
|||
| GIF | |
|
|
|
Which ones do we use?
JPG
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.
GIF
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.
PNG
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!
SVG
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
- When in doubt the best file option is usually JPG. This file format works well with uploading images of a good quality onto a web or social media platform.
- Try to keep your image sizes significantly smaller than 1MB (or logos smaller than 50KB) so your content is universally accessible to users with varying degrees of internet speed. Read our earlier post for a refresher on MB vs KB file sizes.
- Also don’t forget to add alt text if your image contains text that isn’t represented in your content body, so screen reader users aren’t disadvantaged.
This post has been co-authored by Emeka Anele, Rachael Wilson, Kat Cain, Sarah Fennelly, Laura Tay, and Elizabeth Delacretaz. Thanks team!
Posted by