flowchart TD
format["What image format to use?"] --> source{"Analog or digital source?"}
source -- "analog<br>(photo from a camera)" --> jpeg["JPEG lossy<br><br>(also AVIF, WebP, HEIF/HEIC, JPEG XL...)<br><br>Like MP3 format</span>"]
source -- "digital<br>(using a software to draw the picture)" --> staticOrAnimated["Static or animated?"]
staticOrAnimated -- "static" --> vectorOrRaster{"Can you make it scalable (vector based)?"}
staticOrAnimated -- "animated" --> gif["GIF<br><br>(also APNG, AVIF, WebP, MNG, HEIF, video formats like MP4...)"]
vectorOrRaster -- "vector" --> svg["SVG lossless<br><br>(also PDF, EPS, WMF...)<br><br>Adobe Illustrator, Inkscape, Adobe Flash...<br><br>Examples: icons, logos"]
vectorOrRaster -- "raster" --> png["PNG lossless<br><br>(also BMP, ICO, TIFF...)<br><br>Like FLAC (lossless) or WAVE (no compression)<br><br>MS Paint, Photoshop, GIMP, Krita..."]
bestPractices["• Use the most recent file format supported by your users, ex: AVIF instead of JPEG<br><br>• Always use the original image to (re)export to another format<br><br>Avoid something like<br>Original --> JPEG --> WebP<br>Instead<br>Original --> JPEG<br>Original --> WebP<br><br>Multiple lossy compressions in a row seriously degrade your image (same for WAV --> MP3 --> AAC)<br><br>• Use ImageOptim or Trimage to further optimize your image with all lossy options disabled"]
- Raw image file, BMP, TIFF, GIF, ICO: no compression (most of the time)
- JPEG, JPEG 2000, Lossy WebP, Lossy AVIF: for analog sources (still images), lossy compression
- PNG, Lossless WebP, Lossless AVIF: for digital sources, lossless compression
"Problem": some formats support lossy and also lossless compression, ex: AVIF, WebP
So AVIF and WebP can replace JPEG and also PNG (better lossy and lossless compression)
- Do not convert a lossy file to another lossy format => exponential quality loss
ex: do not convert an MP3 to Ogg Vorbis - Do not convert a lossy file to lossless/uncompressed => does not make sense
ex: do not convert an MP3 to WAVE/FLAC
==> Always use the original source