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
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. 🐕
