Making Charts with CSS | CSS-Tricks
What a lovely bit of progressive enhancement—styling data tables to display as charts.
chartd - responsive, retina-compatible charts with just an img tag
This could be a handy replacement for some Google Charts images of graphs. It uses SVG and is responsive by default.
I bet it wouldn’t be too tricky to use this to make some sparklines.
Related links
Sizes=”auto” pretty much requires width and height attributes — ericportis.com
Huh! I did not know this. Good to know!
On Container Queries, Responsive Images, and JPEG-XL – Cloud Four
Container queries can’t be used in the sizes attribute for responsive images. Here, Jason breaks down why that is (spoiler: it’s the lookahead pre-parser) and segues into a truly long term solution: a “magical” image format.
If you’ve ever thought it felt weird to put media conditions inside the HTML for responsive images, this will resonate.
Learn Images
Mat has written this free course for you all about images on the web. Covering image formats, responsive images, and workflows, this is one to keep on speed dial.
Picture perfect images with the modern img element - Stack Overflow Blog
Addy takes a deep dive into making sure your images are performant. There’s a lot to cover here—that’s why I ended up splitting it in two for the responsive design course: one module on responsive images and one on the picture element.
Related posts
Dark mode revisited
Adding another theme to my stylesheet switcher.
Dark mode
Adarktio
Inlining SVG background images in CSS with custom properties
A clever technique I learned from Trys.
Small steps
Making marginal gains in front-end performance.
Iconic imagery
Responsive images, compressive images, and icon fonts. Take your pick.