Comments on: CSS Image Replacement for iPhone 4 High-DPI Retina Display

By: Mike Wille

Mike Wille — Mon, 09 Jan 2012 22:02:13 +0000

@amy:

The function, highdpi_init(), is being called no matter what. However, the code that actually does the image replacement is only executed if the retina.css file is loaded. This line here:

if(jQuery(‘.replace-2x’).css(‘font-size’) == “1px”) {

Will only evaluate to true if retina.css was included.

HTH.

By: Amy Stoddard

Amy Stoddard — Mon, 09 Jan 2012 21:59:27 +0000

I found the answer to my own question. Detect whether its a retina display with Javascript. http://briancray.com/2011/05/05/detect-retina-displays-with-javascript/

By: Amy Stoddard

Amy Stoddard — Mon, 09 Jan 2012 21:56:17 +0000

What I don’t understand is that the JavaScript to replace the images is being called regardless of whether “retina.css” is loaded. What can I add to the jQuery function call to see if the retina.css even go loaded?

By: Maciej Swic

Maciej Swic — Thu, 05 Jan 2012 00:26:08 +0000

Not working on http://staging.appulize.com any ideas please?

Thanks
Maciej

By: Construir para Retina Display ↩ CSSLab

Construir para Retina Display ↩ CSSLab — Thu, 15 Dec 2011 18:45:14 +0000

[...] CSS Image Replacement for iPhone 4 High-DPI Retina Display [...]

By: Mike Wille

Mike Wille — Tue, 29 Nov 2011 01:31:51 +0000

Chris,

This method is a trade off between performance and maintainability/ease-of-use. You certainly could create a site that only makes one request to the server for each image. The way to do that would be to serve up the HTML with src’s pointing to @2x files the first time around. However, that would require either your server-side application to support that, specifically, or you to maintain two separate source files.

By: Niki

Niki — Mon, 28 Nov 2011 23:33:19 +0000

thanks so much for this. I am using jqtouch and was struggling BIG TIME with the fact that their icons were super pixelated. I have looked on countless sites before I came across yours. Your fix it brilliant!
Thanks again!

By: Webdesigners/code: Stuck in the middle?The One Who Knocks - The One Who Knocks

Webdesigners/code: Stuck in the middle?The One Who Knocks - The One Who Knocks — Mon, 28 Nov 2011 21:47:07 +0000

[...] the rendering problem with Webkit vs Gecko browsers into a project? or @font-face on iPhone? The Retina issue with graphics elements? Or, simply, the fallbacks for old [...]

By: Chris

Chris — Fri, 18 Nov 2011 00:09:26 +0000

I’m currently implementing this method, but noticed that it causes the browser to make 2 requests for each image. First, it requests the normal image, and then if the JS recognizes we’re on a high-res device, it changes the img src, and a second request happens–the request for the @2x image.

You can use the net tab in Firebug to see this happening. Is there a recommended way to avoid this? I imagine that loading twice as many images will have a significant effect on a mobile site’s performance.

By: Samuel Menezes

Samuel Menezes — Sun, 23 Oct 2011 13:49:04 +0000

Really useful, Mike!
Thanks a lot