4 ms·
You could give Pixtulate a try (http://www.pixtulate.com http://www.pixtulate.com). Detecting the client's properties (pixel density, screen size, etc) would st
by canterburry 13y ago
You could give Pixtulate a try (http://www.pixtulate.com http://www.pixtulate.com). Detecting the client's properties (pixel density, screen size, etc) would still have to be done via JavaScript on the client, but then just append those properties as query parameters on the img's src attribute and the image will get converted on the fly to whatever your visitor needs. Not only do you not have to pre crop or scale your images, every image is specifically tailored to your visitor...not just a simple 1x vs 2x.
- ricardobeat 13y agoThat's very useful, but cropping/resizing the images is not the hard part. If you change the image src after the page is loaded, the first request is already underway, so you end up downloading two images, just as happens with the OP. You need to send device profiles to the server and somehow keep them up-to-date, or create images on the client - and then serve a different version to crawlers... there are plenty of proposals (image-set, srcset) to handle this in HTML5/CSS but none has become standard yet.
- mds101 13y agoWouldn't this be resolved by setting a data-1x property (leaving the src/background-image property blank)and then running javascript to substitute the data-1x property for non-retina devices and data-2x property for retina devices?
- ricardobeat 13y agoNot that simple. That would be fine for a client-side app, but not for a public-facing site: 1) no javascript = no images. crawlers/bots/archival services won't see them - google might even penalize you for broken image sources. one error in your main js file and all images are toast. needs other workarounds. 2) longer page load times unless you use inline scripts 4) extensions like readability, pinboard, weheartit, etc, might break