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
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
Firefox ✗ Safari ✗ Chrome ✗ Edge ✗ Opera ✗
- Free Lossless Image Format
- Only 10 months old
- Claims to be even better at everything
- No (known) patents
- Info by inventor
Ten months old, and already awesome
(not a FLIF)
The End
slides.com/verythorough/image-formats
The Smart Shiba's Guide to Image Formats
By Jessica Parsons
