The Smart Shiba's Guide

by Jessica Parsons, with help from Monty and Petunia

to Image Formats

⚡  WTD Lightning Edition  ⚡

slides.com/verythorough/shiba-lightning

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

The End

slides.com/verythorough/shiba-lightning

@verythorough