Kevin Marks
SVG can do more than is given credit for here, as it can embed jpegs and pngs for areas where they are optimal, while keeping text and lines crisp. Google’s drawing app is good for making these.
When Should You Use Which Image Format? JPG? PNG? SVG?
Amber has been investigating which image formats make sense for which situations.
Choosing image format is only one step towards optimising images on the web. There are many, many other steps to consider, and so, so much to learn!
Responses
Related links
How To Improve Largest Contentful Paint for Faster Load Times - Calibre
A no-nonsense checklist of good performance advice from Karolina.
Basic Pattern Repository
A nice little collection of very simple—and very lightweight—SVGs to use as background patterns.
Swipey image grids.
This is how you write up a technique! Cassie takes an SVG pattern she used on the Clearleft “services” page and explains it in step-by-step detail, complete with explanatory animated diagrams.
AddyOsmani.com - Preload late-discovered Hero images faster
Did you know there’s an imagesrcset attribute you can put on link rel="preload" as="image" (along with an imagesizes attribute)?
I didn’t. (Until Amber pointed this out.)
CSS photo effects - a Collection by Lynn Fisher on CodePen
These wonderfully realistic photo effects from Lynn are quite lovely!
Related posts
Alt writing
Aiming for originality and creativity in alt text.
Inlining SVG background images in CSS with custom properties
A clever technique I learned from Trys.
The top four web performance challenges
Counting down the charts—what will be in the number one spot?
Small steps
Making marginal gains in front-end performance.
dConstruct optimisation
Tweaking the dConstruct 2012 site for performance.