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 ✓

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

@verythorough

The Smart Shiba's Guide to Image Formats

By Jessica Parsons

The Smart Shiba's Guide to Image Formats

  • 3,746

More from Jessica Parsons