The new apple products that use retina on the mac book pro & iPad 3rd have such high resolutions that images on the web look horrible so web designers may have redesign the web. Below is some of the info about looking into changing or detecting this from brandbuildercompany.com.....
Presently, the CSS media queries that are useful in responsive web design make it very simple to target background images that you would like to optimize. That’s all well and good, but what about images that are part of your content such as your logo? There is no good solution. What can you do:
O
Use JavaScript to detect retina:
Pro: Easy to automate.
Con: Modern web browsers will have already started to download the first image before you can detect if it is a retina quality device and replaced it.
Server side detection:
Pro: Only load one image.
Con: Many large websites serve their static content through Content Delivery Networks (CDN). A CDN is a network of servers located across the globe that will serve the file from the closest server to a user. These servers are dumb and do not do server-side processing. Additionally, if a user saves the website on one device and transfers it to another they may see the wrong type of image.
Just serve retina:
Pro: No fuss
Con: Wasted bandwidth, higher load time, and the higher quality images will actually seem worse on low DPI devices.
Empty src element and CSS generated content:
Pro: Only loads one image, works in WebKit browsers (Chrome, Safari, iOS browsers, most Android browsers, BlackBerry browsers), and Opera. This covers most mobile users
Con: Does not work in Firefox nor IE, desktop or mobile versions (this is actually by design in Firefox). It fundamentally goes against everything web designers have advocated for years, and cannot be done inline so it requires extra configuration that is very clumsy.
No comments:
Post a Comment