It is worth noting that the file size of jpegs doesn't increase quickly as one might expect as the dimensions increase. It's not uncommon to see a 2x image (so 4x the number of pixels) resulting in a file that's only ~200% larger.
An example I just tried was 38kb at 1x and 105kb at 2x
> For non-retina screens getting a larger image doesn't really matter. Non retina mobile devices are rapidly disappearing. So therefore I'm comfortable delivering higher resolution images to all devices.
Must be nice to only have big-city first-worlders as users :)
Yeah I hear ya. Literally just going based on our traffic numbers though. For the vast majority of our audience, this technique is just fine.
Re:Native Responsive Images
by canterburry on Sunday August 24, 2014 @12:54AM
(#8217735)
Yeah...we thought of that too:
I don't think this is a solution either. In most cases we don't need multiple images of vastly different sizes. Sizing images can be handled entirely through media queries. We aren't using multiple versions of each image, so there's no need for a js shim.
> Sizing images can be handled entirely through media queries.
Unless something's changed since the last time I looked, media queries are only screenwise so they don't gracefully handle having a block in a small sidebar versus a "central" content section. The sidebar images could actually grow from a big to a small screen (because content is linearised and the "sidebar image" now takes the whole width of a small display, rather than a small part of a big display)
There's a simple rule I follow to solve that problem: If it goes in the sidebar (or a toolbar) it should be an SVG. It's the only way to ensure it will fit and scale no matter the screen size or device. With media queries you can even ensure that they get spaced properly (need more space between icons on smaller screens).
Pictures are they only problem that needs to be solved at this point.
Honestly, I need to support retina screens for mobile and desktop. For non-retina screens getting a larger image doesn't really matter. Non retina mobile devices are rapidly disappearing. So therefore I'm comfortable delivering higher resolution images to all devices.
I optimize our images by making them as small as possible and using lazy loading. These two techniques are more than adequate to suit out needs right now.
I am (loosely) of the opinion right now that this is an answer in search of a problem.