Re: Adaptive images

On Jun 1, 2011, at 1:24 AM, Simon Pieters wrote:

> On Wed, 01 Jun 2011 04:08:32 +0200, Maciej Stachowiak <mjs@apple.com> wrote:
> 
>> <chair hat off>
>> 
>> CSS (and CSS media queries) are sufficient for CSS-applied images. For content images (<img>, <input type=image>, <video poster>, perhaps others that I am not thinking of), it's not really sufficient. Here are a few issues:
>> 
>> 1) The src image will still be loaded even if CSS substitutes a different image with the content property, resulting in a double load.
>> 2) content in most browsers does not give a user experience exactly equivalent to the image element.
>> 3) When doing things like dragging an image out or saving it, it might not even be the obvious choice to use the currently displayed image.
>> 
>> While some use cases for this are dynamic layout choices, I think the key use case is UI scaling. On some popular platforms, a CSS pixel is one device pixel. On others, it is 2 device pixels. Still other ratios are sometimes seen. Let me give an example where physical screen size is not an issue. If I want my site with images to look great on a display like the iPhone 4's Retina display, I need to provide images that are 2x resolution, and then give them a height/width to take them down to half, to account for the scale between CSS pixels and device pixels. Then I can take advantage of the extra sharpness. But on an iPhone 3G, I really would not want to do that - it would be a huge waste of bandwidth to send a 2x image, and it might look worse scaled down than a properly made 1x scaled image.
> 
> What about when the user zooms in on the image with an iPhone 3G? Wouldn't the user want the sharper image then?

This rarely comes up. Usually the user is either looking at the site zoomed out, or panning around in true 1 to 1 size, or the site is designed to fit in one screen width without zooming in or out.


>> I don't think content today gives an adequate solution for this use case.
>> 
>> I don't think any solution along the lines of "read from server and stop early" cuts it either, because latency is high on modern cellular networks in proportion to the bandwidth, so if I cut off the server connection early, my incoming bandwidth has already been wasted.
> 
> Sure. On the other hand, if you need to load first a small image and then the large image when the user zooms in, you will have wasted even more.

I think it's unlikely that we'd want to do this, at least for the specific use case I mentioned.

Regards,
Maciej

Received on Wednesday, 1 June 2011 21:58:55 UTC