<svg xmlns="http://www.w3.org/2000/svg" />
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...)"]
- Shipping system fonts to GitHub.com: https://markdotto.com/blog/github-system-fonts/
- Implementing system fonts on Booking.com — A lesson learned: https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f
- Web fonts: when you need them, when you don't: https://david-gilbertson.medium.com/web-fonts-when-you-need-them-when-you-dont-a3b4b39fe0ae
- System Fonts vs. Web Fonts: Why Does The Difference Matter?: https://iloveseo.com/seo/system-fonts-vs-web-fonts-why-does-the-difference-matter/
- Le guide Web fonts vs. System Fonts: https://www.linkedin.com/pulse/le-guide-ultime-de-laccessibilit%C3%A9-partie-2-web-fonts-vs-perrine-croix/
- Modern Font Stacks: https://github.com/system-fonts/modern-font-stacks
OlderNewer