Finally, true responsive images are becoming a reality on the web — in pure HTML, without convoluted hacks. Theelement and a couple of new attributes for the element are behind a flag in Chromium 37 and shipping in Chromium 38 (so coming soon in Opera), in Firefox Nightly and are being implemented in WebKit (although it remains to be seen if Apple will ship it in the next version of Safari).
Images play an important role on the web today. Imagine a world without images on our web pages! High quality images can really make a website stand out, but unfortunately they come with a price to pay. Due to their large file sizes, they are bulky to download and result in slow page load times. If I'm a user with a low bandwidth connection, it can be a pretty poor experience.
Browser support for the picture specification is landing and as Marcos Cáceres said, it is time to “go forth andall the things!” Except you shouldn’t. You shouldn’tall the things.
I'm probably a bit rare in that I rather enjoyed trying to keep up on the responsive images thing. It's an interesting problem that bred lots of interesting solutions. The whole thing is starting to wrap up now though, now that the official solutions are:and friends with srcset and sizes The problem is: I don't really get it. I thought the original picturefill was pretty simple. List a bunch of sources with media queries. First one to match, that's the one that gets used. That made sense to me. This new stuff is a bit different. Solvable problem! Just like everything else, I need to figure it out.
Last sunday I sat down on my couch, got comfy and started reading up on the new srcset and sizes syntax. I wanted to understand it and then starting to use it now with the awesome picture/srcset/sizes polyfill picturefill 2.
One image for all screen resolutions and different devices is not enough. An image per pixel is too much - so how can someone automatically choose the optimal responsive image sizes?
Dev.Opera — Responsive Images: Use Cases and Documented Code Snippets to Get You Started
Service Workers: Dynamic Responsive Images using WebP Images | Dean Hume
Don’t use
#133: Figuring Out Responsive Images | CSS-Tricks
The new srcset and sizes explained | Martin Wolf — Frontend Web Developer
Srcset and sizes — ericportis.com
Nightwatch.js script for taking screenshots of a given URL at various browser widths.
Responsive Image Breakpoints Generator by Cloudinary