Graphic file formats for web apps
You should know from your previous study about vector and pixel graphics and what distinguishes them. Then you also know, that there is a lot of different type file formats, like JPG, TIFF, PSD, PDF, SVG, EPS, RAW and so on. But not all the formats are suitable for web developement.
Here we will focus on the file formats, you can use in web developement ie what work in browsers.
Quick reminder
- Raster (aka Pixel or Bitmap) graphics is made of pixels - tiny squares that have a certain color (and sometimes transparency). Like digital photos from your phone, for example. It is hard to enlarge pixel images, because we just do not have the data.
- Vector graphics is drawn with mathematic point coordinates, curves and equations, which can be recalculated each time. Thats's why vector graphics can be easily resized or even manipulated in real time.
Read this if you need more information.
NOTE: canvas
Should we mention <canvas> here as an option to show and manipulate raster images on browser?
NOTE: video
Where are we talking about <video>?
Exporting graphic assets
- From Figma
- From Illustrator
- From Photoshop
- From After Effects
- As animated GIF
- Using Lottie
- etc
Raster graphic formats
- JPG
- PNG
- Supports transparency
- Animated PNGs (APNG)
- Rendering from After Effects
- EzGif APNG converter
- Optimizing PNG
- GIF - mostly for animations
- WebP 📌
- Supports animation
- Supports transparency
- Better quality/size ratio than JPG or PNG
- Helper tools and utilities - although there is pretty good browser support, WebP is not very widely supported by the mainstream design programs. That's why we need some extra tools or utilities to generate the WebP files.
- AnyWebP Converter - simple, fast, easy to use
- Google converters
- Photoshop plugin
- CloudConvert
- EzGif WebP converter
- AVIF
- Supports animation
- Supports transparency
- Often best quality/size ratio
- 🛑 Watch out for browser support - use fallbacks!
- Helper tools and utilities
- When to choose each format
âš JPEG XL, JPEG XR etc formats should be considered to cover later, when/if wider browser support becomes available
Vector format (SVG)
There are a bunch of different raster formats for web, but only one vector - the SVG
- 📌All you have to know about SVG (and probably more)
- 📌Easy SVG Customization And Animation: A Practical Guide
- 📌SVG.wtf: Online SVG visual/code editor/explorer
NOTE
There is only a few links, so you may think that there isn't much to talk about. But wait, just read them and you'll discover a whole new world there!
Conclusion
As you can read from this Dev.to article, these are the basic rules, which format to choose:
- Use SVG for logos/icons/illustrations etc or anything you want to animate
- Use WEBP for everything else with either JPG or PNG as a fallback
- Use JPEG for Photos (as a fallback for webp)
- Use PNG for logos/illustrations etc when no SVG is available (as a fallback for webp)