Re: Adaptive images

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?


> 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 also don't think a solution that requires the server to make the  
> choice by sending it a special header is very good. It is not usable in  
> server-free environments such as widgets or ebooks. While these are not  
> strictly speaking "the Web", I don't think it's great to design  
> solutions that excludes them if we can help it.
>
> And finally, I am leery of solutions using magical file naming  
> conventions.
>
> Given all that, I am not sure what the best solution is.
>
> Regards,
> Maciej
>


-- 
Simon Pieters
Opera Software

Received on Wednesday, 1 June 2011 08:25:33 UTC