Re: accessibility and browser zoom

On Sun, 01 Mar 2015 07:11:04 +0100, Alice Wonder <alice@domblogger.net>  
wrote:

> Hi,
>
> It is hard to find examples of the picture element online that actually  
> validate but I have it at this point.
>
> Have my firefox set up and it works.
>
> Did this test :
>
> [picture]
>    [source media="(min-width: 801px)" srcset="Camera_800.jpg"  
> type="image/jpeg" /]
>    [source media="(max-width: 800px)" srcset="Camera_400.jpg"  
> type="image/jpeg" /]
>    [img src="Camera_800.jpg" alt="Classic Medium Format Camera" /]
> [/picture]
>
> (using [] instead of angle brackets)
>
> When I shring the browser down and reload - it works, the 400 is used.
>
> But - when I ctrl-+ to zoom in and then reload, it also triggers the  
> media query, and the result is a way over-stretched 400px version.
>
> What is the proper way to take physical pixels into consideration so  
> that people who zoom in due to visual problems don't get a smaller  
> version that has been stretched?

Is Camera_400.jpg a scaled-down version of Camera_800.jpg? If yes, you  
should use just srcset instead, and let the browser pick the appropriate  
image.

<img src="Camera_400.jpg" srcset="Camera_800.jpg 2x" alt="...">

Longer version:  
http://blog.cloudfour.com/dont-use-picture-most-of-the-time/

-- 
Simon Pieters
Opera Software

Received on Monday, 2 March 2015 15:15:23 UTC