Goodbye to Painful Image Loads on Small Devices

Re:Goodbye to Painful Image Loads on Small Devices by aaronbrethorst on Friday May 31, 2013 @11:42AM (#5799240)

This looks great! How do I specify a media query for different screen densities? For instance, if I wanted to serve a 2880px wide image to a 15" Retina MacBook Pro and a 1440px to a 'normal' computer?

[ Parent | on HN ]

Re:Goodbye to Painful Image Loads on Small Devices by smileyj68 on Friday May 31, 2013 @11:46AM (#5799259)

There's a media query available (with prefixes, right now) for pixel density – a retina MBP reports it as 2 whereas a standard one reports it as 1. So you can have a media query for a pixel density >= 2, etc.

[ Parent | on HN ]

Re:Goodbye to Painful Image Loads on Small Devices by aaronbrethorst on Friday May 31, 2013 @11:50AM (#5799295)

> with prefixes, right now

Right, which is what concerns me. So is this the expectation?

    <img src="small.jpg" data-interchange="[normal.jpg, (only screen)], [medium.jpg, only screen and (min--moz-device-pixel-ratio: 2), 
        only screen and (-o-min-device-pixel-ratio: 2/1), 
        only screen and (-webkit-min-device-pixel-ratio: 2), 
        only screen and (min-device-pixel-ratio: 2),
        only screen and (max-width: 749px)]">

[ Parent | on HN ]

Re:Goodbye to Painful Image Loads on Small Devices by smileyj68 on Friday May 31, 2013 @12:32PM (#5799574)

Lamentably, yes. I'd suspect the prefixes will drop off this year but we're sort of stuck with the browser adoption in this case.

[ Parent | on HN ]

Re:Goodbye to Painful Image Loads on Small Devices by Groxx on Friday May 31, 2013 @11:52AM (#5799307)

maybe fat-fingered on a phone? (edit: referring to its previous downvoted state)

[ Parent | on HN ]