The Smart Shiba's Guide to
Image Formats

by Jessica Parsons, with help from Monty and Petunia

Why does it matter?

file size (= speed)
quality
features
- transparency
- animation
- interaction

Photo credits:

All images are my own unless otherwise specified.

Photos => JPG

JPG - 77 KB

PNG - 77 KB

PNG - 240 KB

Screenshots => PNG

PNG - 3.7 KB

JPG - 3.7 KB

JPG - 13 KB

...unless the screenshot is photo-like

Image credit:

Screenshot from Silent Hill 2, published by Konami.

Displayed under fair use.

Animations => GIF

GIF - 4800 KB

JPG - 48 KB

Handy tool: ezgif.com

What about <video> ?

MP4 - 455 KB

<video width="320" height="240" autoplay loop muted>
  <source src="dogeluge.mp4" type="video/mp4">
  <source src="dogeluge.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Transparency => PNG

JPG - 26 KB

GIF - 111 KB

PNG - 72 KB

But that's not the whole story...

Icons (and many logos) => SVG

SVG - 0.3 KB

PNG - 4.3 KB

SVG - 0.4 KB

PNG - 2.5 KB

Handy tool: vectormagic.com

Bonus: SVG Photo Masks

Handy tool: clippingmagic.com

Taylor Ho: Using SVGs for Transparent Raster Images

Looking to the Future

APNG

Animated PNG

Firefox ✓ Safari ✓
Chrome ✗ (in development) Edge ✗ Opera ✗

The advantages of PNG over GIF, plus animation:
- smaller file size
- more colors
- transparency
Shows single frame where unsupported
Demo by Mozilla

More than you expected...
(not an APNG)

WebP

Google's Jack of All Trades

Firefox ✗ Safari ✗ Chrome ✓ Edge ✗ Opera ✓

Lossless like PNG
Lossy like JPG
Animates like GIF
Does it all in less space
Some criticize quality
Info by Google

Like an image format clown car!
(not a WebP)

BPG

Better Portable Graphics

Firefox ✗ Safari ✗ Chrome ✗ Edge ✗ Opera ✗

Aims to do everything WebP does, but better
Patent-encumbered
Info by inventor

This smile's worth paying for, right?
(not a BPG)

(now pay up)

FLIF

New Kid on the Block