Flowchart: how to retinafy your website | Hacker News Reader

Flowchart: how to retinafy your website

mir.aculo.us

65 pointscharliepark14 comments

The flowchart is useful but what I can only think is the majority case could probably be summed up in one prerequisite statement:

"First change all of your image tags to CSS background images"

If you're not willing to do that as a first step, then you're probably not going to be able or willing to do any of the other steps.

Also, this is really what we've come to?

IE doesn't even properly scale background images.

Why can't we use img tags?

img tag does not currently support different source content based on the media resolution.

Media resolution is relative, as people zoom in on mobile phones all the time.

For stuff like photos, just supply a larger resolution JPEG that has lower quality. This will look great when smaller and when zoomed in, while keeping the file size in a range that is ok for mobile.

This is an interesting approach I hadn't heard or tried previously. Do you have any guidelines as to image quality and resizing?

Also, this is really what we've come to?

Right now, yes, for the simple reason that CSS has media queries available that let us do sensible things based on different physical screen properties.

To answer hopeless’s question, we can’t just use img tags because there isn’t yet any robust mechanism to specify multiple possible image URLs in the mark-up and have the browser choose which one to request based on the hardware platform. Several ideas have been proposed, but realistically none of them is going to be widely supported and suitable for use in production sites any time soon, and high resolution screens are shipping today.

The obvious alternative is to use JavaScript to update the img sources, but that tends to be more fiddly than using background images in CSS. Also, it’s all too easy to wind up either downloading multiple versions of the same image file or causing ugly things to happen while the page is first loading, neither of which is desirable, particularly if you’re downloading over a mobile Internet connection.

A few very smart people seem to be trying ideas with putting something in the page header to set a cookie, which would therefore be passed over to the server on any subsequent img requests, so you could leave the bulk of your HTML as it always was and put the magic on the server side. However, this also raises all kinds of issues: cookies might be disabled, does the same URL return the same data every time and all the cache-related issues that raises, not to mention that the technique isn’t actually guaranteed to work according to the specs and results in race conditions in some browsers.

So the short version is that there is exactly one reasonably reliable and portable tool for doing variable resolution images on web pages today, and that is to serve them via a CSS background-image.

Indeed. Small snag for me is that background images won't print (unless you're going for a <li> hack).

For me that means generating different HTML for the printable version - whereas this was neat CSS media queries before.

Why do you need to "retinafy" at all? Do all pages look messed up on iPad 3 or something?

It was all over the tech-part of the Internet recently:

http://www.anandtech.com/show/6023/the-nextgen-macbook-pro-w...

And indeed, bitmap-images in particular needs to be twice the size to look as sharp as the retina-display allows.

To avoid upscaled bitmaps on "retina" devices.

The composite favicons made by the X-Icon Editor are way too big. The one I made was 32 Kb. I made it with four PNGs that totaled 601 bytes. That's more than a 50x size increase.

@NathanBowers on twitter suggested looking into http://convertico.org/Multi_Image_to_one_icon/

Thanks for that. I ended up with a 4 Kb favicon that way, which is reasonable as far as I'm concerned. http://taylor.fausak.me/static/images/favicon.ico

Reply on news.ycombinator.com