

Flowchart: how to retinafy your website - charliepark
http://mir.aculo.us/2012/06/26/flowchart-how-to-retinafy-your-website/

======
michaelbuckbee
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?

~~~
hopeless
Why can't we use img tags?

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

~~~
madrobby
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.

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

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

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

[http://www.anandtech.com/show/6023/the-nextgen-macbook-
pro-w...](http://www.anandtech.com/show/6023/the-nextgen-macbook-pro-with-
retina-display-review)

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

------
taylorfausak
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.

~~~
madrobby
@NathanBowers on twitter suggested looking into
<http://convertico.org/Multi_Image_to_one_icon/>

~~~
taylorfausak
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>

