Swapping Images with the Sizes Attribute | Filament Group, Inc., Boston, MA

Write Alt Text Like You’re Talking To A Friend – Cloud Four

This is good advice:

Write alternative text as if you’re describing the image to a friend.

The beauty of progressive enhancement - Manuel Matuzović

Progressive Enhancement allows us to use the latest and greatest features HTML, CSS and JavaScript offer us, by providing a basic, but robust foundation for all.

Some great practical examples of progressive enhancement on one website:

• using grid layout in CSS,
• using type="module" to enhance a form with JavaScript,
• using the picture element to provide webp images in HTML.

All of those enhancements work great in modern browsers, but the underlying functionality is still available to a browser like Opera Mini on a feature phone.

Reducing motion with the picture element

Here’s a clever tiny lesson from Dave and Brad: you can use prefers-reduced-motion in the media attribute of the source element inside picture.

Responsive Images on the Apple Watch — ericportis.com

Some tips for getting responsive images to work well on the Apple Watch:

• test your layouts down to 136-px wide
• include 300w-ish resources in your full-width img’s srcsets
• art direct to keep image subjects legible
• say the magic meta words

Lazy Loading Images and Video  |  Web Fundamentals  |  Google Developers

Jeremy Wagner offers a deep dive into lazy loading images (and video) with some advice for considering the no-JavaScript situation too.