Native Responsive Images

#1

Post by adamnemecek » Sun, Aug 24, 2014, 2:13 AM UTC

Re: Native Responsive Images

#2

Post by canterburry » Sun, Aug 24, 2014, 3:50 AM UTC

...and if you don't want to pre-scale/crop all those different image sizes, you can have Pixtulate (http://www.pixtulate.com) generate them on the fly from one high resolution image.

Re: Native Responsive Images

#3

Post by geuis » Sun, Aug 24, 2014, 4:25 AM UTC

Honestly, we're (collectively) never going to adopt this on a large scale. Everything I read in this article is just horribly complicated. I don't have a solution, but none of these are the right one. There's so much complexity going on that no developer will get it right without devoting a massive amount of time and effort just to load the "right" image at the "right" time.

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.

Re: Native Responsive Images

#4

Post by crazygringo » Sun, Aug 24, 2014, 4:50 AM UTC

For things like retina-aware images, e.g.:

    src="cat_500px.jpg" srcset="cat_750px.jpg 1.5x, cat_1000px.jpg 2x"

Does anyone know if the browser will download a higher-res image once the user zooms in? E.g., in Chrome on OSX, if I zoom from 100% to 130% on a non-Retina display, will it download the 1.5x version and downsample it? Likewise, in iOS, if the initial zoom setting is "zoomed out", and "retina" is almost meaningless from a web perspective because people are zooming in and out all the time, what will be downloaded?

I've never really understood the attention paid to exact pixel alignment, and retina versions of images, when zoom levels are all over the place these days on all sorts of devices.

Re: Native Responsive Images

#5

Post by canterburry » Sun, Aug 24, 2014, 4:54 AM UTC

geuis wrote: post #3

Honestly, we're (collectively) never going to adopt this on a large scale. Everything I read in this article is just horribly complicated. I don't have a solution, but none of these are the right one. There's so much complexity going on that no developer will get it right without devoting a massive amount of time and effort just to load the "right" image at the "right" time. Honestly, I need to support retina screens…

Yeah...we thought of that too:

https://github.com/pixtulate/pixtulate.js

Re: Native Responsive Images

#6

Post by geuis » Sun, Aug 24, 2014, 5:16 AM UTC

canterburry wrote: post #5

geuis wrote: post #3

Honestly, we're (collectively) never going to adopt this on a large scale. Everything I read in this article is just horribly complicated. I don't have a solution, but none of these are the right one. There's so much complexity going on that no developer will get it right without devoting a massive amount of time and effort just to load the "right" image at the "right" time. Honestly, I need to support retina screens…

Yeah...we thought of that too: https://github.com/pixtulate/pixtulate.js

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.

Re: Native Responsive Images

#7

Post by jc4p » Sun, Aug 24, 2014, 5:46 AM UTC

canterburry wrote: post #2

...and if you don't want to pre-scale/crop all those different image sizes, you can have Pixtulate ( http://www.pixtulate.com ) generate them on the fly from one high resolution image.

Two things: Being half the comments in this thread (2/4 as of right now) makes it seem like you're spamming. And you spelled "tailored" wrong on your site.

Re: Native Responsive Images

#8

Post by thomasfoster96 » Sun, Aug 24, 2014, 7:05 AM UTC

I can see a simplified element possibly working, but scrset just seems like I'm writing inline stylesheets again.

Re: Native Responsive Images

#9

Post by andybak » Sun, Aug 24, 2014, 8:11 AM UTC

geuis wrote: post #3

Honestly, we're (collectively) never going to adopt this on a large scale. Everything I read in this article is just horribly complicated. I don't have a solution, but none of these are the right one. There's so much complexity going on that no developer will get it right without devoting a massive amount of time and effort just to load the "right" image at the "right" time. Honestly, I need to support retina screens…

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

Re: Native Responsive Images

#10

Post by masklinn » Sun, Aug 24, 2014, 9:54 AM UTC

geuis wrote: post #6

canterburry wrote: post #5

Earlier quoted context omitted.

Yeah...we thought of that too: https://github.com/pixtulate/pixtulate.js

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)