The pros of this are that you maintain one version. Or every embedded image can have larger dimensions than needed, and then you explicitly set the width of that image.
The downside of this is having to maintain two versions of graphical assets and images.įor example, with CSS sprites you can use the version for all users, and let your CSS do the resizing for all users.
#Retina images @2x mapproxy how to
I’ve talked above about how to serve up alternate assets for high-res screens. You can just use the same image assets for both standard and high-res screens You can see various image dimensions, file size and quality comparisons in Daan’s follow up post here. This is because of the greater amount of pixels in the Retina image, compression artefacts are scaled down and therefore almost unnoticeable.īasically an image can have larger dimensions, but can also be compressed more and you still get great results on a high-res screen. The bottomline is that heavy compression doesn’t affect the final image as much as you would expect. More detail can be accomplished with less kilobytes. But, more pixels doesn’t necessarily have to mean 4 or 5 times more data. More detail doesn't necessarily mean more dataĭaan Jobsis conducted a very interesting experiment last year looking at pixel quality, image dimensions and compression. See their documentation on how to implement. The script will check your server to see if you have any image source with at the end. Imulus developed a useful plugin Retina.js that solves this for you. The sprite solution above is only good for assets referenced in your CSS. Serve up larger html embedded images with Javascript only screen and ( -webkit-min-device-pixel-ratio : 2 ),( min-resolution : 192dpi ) 3. It’s very straight forward, and some what similar to providing responsive or alternate mobile styles. Using CSS media queries you can target any device with a high-resolution screen and provide it with alternate styles. Use media queries for high-res CSS styles
The first website I designed while having the Retina display was and of course I was now more inclined to design for high-resolution screens as I notice the results on a daily basis.īelow are just a few techniques I learned while designing for high-res devices.
It’s like the transition from VHS to DVD or SD to HD. At first I didn’t think it would make a big difference but after using for a day it’s hard to go back to other displays.
#Retina images @2x mapproxy pro
I was lucky enough to receive a 13” MacBook Pro with Retina display for work a few months back.
0 kommentar(er)
