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

The Smart Shiba's Guide to Image Formats: WTD Lightning Talk Edition

By Jessica Parsons

The Smart Shiba's Guide to Image Formats: WTD Lightning Talk Edition

JPG, GIF, PNG, SVG? How do you choose the right file format for your image, and why does it matter? Find out how while enjoying pictures of my shibas. 🐕

  • 2,279