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.
Link tags: images
207
Aegir.org | Five Moons
In a way, I find these pictures—taken by someone from the ground with regular equipment—just as awe-inspiring as the images from the James Webb Space Telescope.
How To Improve Largest Contentful Paint for Faster Load Times - Calibre
A no-nonsense checklist of good performance advice from Karolina.
CSS { In Real Life } | Writing Useful Alt Text
Another post prompted by my recent musings on writing alt text. This time Michelle looks at the case of text-as-images.
Just How Long Should Alt Text Be? | CSS-Tricks - CSS-Tricks
Prompted by my recent post on alt text, Geoff shares some resources on the right length for alt attributes.
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.
Awesome astrophotography from the South Downs | Science | The Guardian
To mark the start of the Dark Skies Festival today, here are some fantastic photographics taken not that far from Brighton.
Plus Equals #4, December 2021
In which Rob takes a deep dive into isometric projection and then gets generative with it.
Plus Equals #3, September 2021
Want to take a deep dive into tiling images? Like, a really deep dive. Rob has you covered.
The Flickr Foundation
A non-profit foundation dedicated to long-term digital preservation.
Imagine if we could place ourselves 100 years into the future and still have access to the billions of photos shared by millions of people on Flickr, one of the best documented, broadest photographic archives on the planet.
The Flickr Foundation represents our commitment to stewarding this digital, cultural treasure to ensure its existence for future generations.
Its first act is the renewal of the Flickr Commons.
11ty/api-indieweb-avatar: Return an optimized avatar image from a domain name input.
Here’s a nifty little service from Zach: pass in a URL and it returns an image of the site’s icon.
Think of it as the indie web alternative to showing Twitter avatars.
Basic Pattern Repository
A nice little collection of very simple—and very lightweight—SVGs to use as background patterns.
Earth Restored — Toby Ord
Beautifully restored high-resolution photographs of the Earth taken by Apollo astronauts.
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.
THE INTERNET — Opte
Visualising the growth of the internet.
Creating websites with prefers-reduced-data | Polypane Browser for Developers
There’s no browser support yet but that doesn’t mean we can’t start adding prefers-reduced-data to our media queries today. I like the idea of switching between web fonts and system fonts.
5 most annoying website features I face as a blind person every single day by Holly Tuke
Five pieces of low-hanging fruit:
- Unlabelled links and buttons
- No image descriptions
- Poor use of headings
- Inaccessible web forms
- Auto-playing audio and video
Full bleed layout using simple CSS | Kilian Valkhof
A follow-up to full-bleed layout post I linked to recently. Here’s how you can get the same effect with using CSS grid.
I like the use of the principle of least power not just in the choice of languages, but within the application of a language.
Same Energy Snap
Match up images that have been posted in pairs to Twitter with the caption “same energy”. This is more fun and addictive than it has any right to be.
CSS Grid full-bleed layout tutorial · Josh W Comeau
When you’ve got a single centered column but you want something (like an image) to break out and span the full width.