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
Taylor Ho: Using SVGs for Transparent Raster Images
The End
slides.com/verythorough/shiba-lightning