I love this idea of comparing human colour choices to those of a computer:
I decided to do two things: the top three most used colours of the photo decided by “a computer” and my hand picked choices. This method ended up revealing a couple of things about me.
I also love that this was the biggest obstacle to finding representative imagery:
I wanted this to be an exciting task but instead I only found repeated photos of my cat.
Another good reason to use the currentColor value in SVGs.
Another bookmarklet for checking accessibility—kind of like tota11y—that allows to preview how screen readers will handle images, focusable elements, and more.
Well, this looks like it could come in handy—no more tedious time in Photoshop trying to select turn a person into a separate layer by hand; this does it for you.
Some tips for getting responsive images to work well on the Apple Watch:
- test your layouts down to 136-
pxwide- include
300w-ish resources in your full-widthimg’ssrcsets- art direct to keep image subjects legible
- say the magic
metawords
A handy in-browser image compression tool. Drag, drop, tweak, and export.
Smart thinking—similar to this post from last year—about using the navigator.connection API from a service worker to serve up bandwidth-appropriate images.
This is giving me some ideas for my own site.
A useful set of questions to ask on any project, shuffled and dealt to you.
They’ll not only help you foresee unintended consequences—they can also reveal opportunities for positive change.
All of the content in images. Not a single image has alternative text. If only they had asked themselves:
When you picture your user base, who is excluded? If they used your product, what would their experience be like?
This is a potentially useful bit of CSS that I had no idea existed.
Jeremy Wagner offers a deep dive into lazy loading images (and video) with some advice for considering the no-JavaScript situation too.
This service could be quite handy if you’re making a presentation that involves showing code—it generates syntax-highlighted images of code.
Tim explains why that neat trick of making a really big JPEG with quality set to 0% is no longer necessary, and how the savings you make in bandwidth with that technique are nullified by the expense of the memory footprint needed.
The hits just keep on coming from the Filament Group. Here Scott shares a really clever technique for creating an image magnifier using the sizes attribute of the img element.
This is impressive—a fully featured graphics app for creating SVGS right in your browser.
Metaballs, not to be confused with meatballs, are organic looking squishy gooey blobs.
Here’s the maths behind the metaballs (implemented in SVG).
Handy web-based tools—compress HTML, CSS, and JavaScript, and convert files from one format to another.
These are lovely little SVGs of website logos that are yours for the taking. And if you want to contribute an icon to the collection, go for it …as long as it’s less than 1024 bytes (most of these are waaay less).
This is clever—you can use the navigator.connection API from a service worker (because it’s asynchronous) which means you can have a service worker script that serves differently sized images based on bandwidth.
Here’s a clever to technique to improve the perceived performance of image loading with a polygonal SVG placeholder.