Sizes=”auto” pretty much requires width and height attributes — ericportis.com
Huh! I did not know this. Good to know!
Responsive Design Testing
Another browser-based tool for viewing the same site at different sizes, but this one displays them all the same time, side by side.
Related links
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-
pxwide- include
300w-ish resources in your full-widthimg’ssrcsets- art direct to keep image subjects legible
- say the magic
metawords
Left to our own devices. — Ethan Marcotte
Your website’s only as strong as the weakest device you’ve tested it on.
Emmet Re:view — fast and easy way to test responsive design in multiple viewports
It’s no substitute for testing with real devices, but the “device wall” view in this Chrome plug-in is a nifty way of getting an overview of a site’s responsiveness at a glance.
Keep ’em Separated — ericportis.com
I share the concerns expressed here about the “sizes” attribute that’s part of the new turbo-powered img element (or “the picture element and its associates”, if you prefer). Putting style or layout information into HTML smells bad.
This is a concern that Matt Wilcox has raised:
Change the design and those breakpoints are likely to be wrong. So you’ll need to change all of the client-side mark-up that references images.
I can give you a current use-case: right here on adactio.com, you can change the stylesheet …so I can’t embed breakpoints or sizes into my img elements because—quite rightly—there’s a separation between the structural HTML layer and the presentational CSS layer.