6 ms·

Flowchart: how to retinafy your website

65 points by charliepark 14y ago

michaelbuckbee 14y ago
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?
- dag11 14y ago
  IE doesn't even properly scale background images.
- hopeless 14y ago
  Why can't we use img tags?
  - grhino 14y ago
    img tag does not currently support different source content based on the media resolution.
    - madrobby 14y ago
      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 14y ago
        This is an interesting approach I hadn't heard or tried previously. Do you have any guidelines as to image quality and resizing?
- Chris_Newton 14y ago
  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.
- jwilliams 14y ago
  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.
taylorfausak 14y ago
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 14y ago
  @NathanBowers on twitter suggested looking into http://convertico.org/Multi_Image_to_one_icon/ http://convertico.org/Multi_Image_to_one_icon/
  - taylorfausak 14y ago
    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 http://taylor.fausak.me/static/images/favicon.ico
Kiro 14y ago
Why do you need to "retinafy" at all? Do all pages look messed up on iPad 3 or something?
- Zirro 14y ago
  It was all over the tech-part of the Internet recently: http://www.anandtech.com/show/6023/the-nextgen-macbook-pro-with-retina-display-review 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.
- zokier 14y ago
  To avoid upscaled bitmaps on "retina" devices.

65 points by charliepark 14y ago

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?

dag11 14y ago
IE doesn't even properly scale background images.
hopeless 14y ago
Why can't we use img tags?
- grhino 14y ago
  img tag does not currently support different source content based on the media resolution.
  - madrobby 14y ago
    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 14y ago
      This is an interesting approach I hadn't heard or tried previously. Do you have any guidelines as to image quality and resizing?
Chris_Newton 14y ago
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.
jwilliams 14y ago
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.

taylorfausak 14y ago

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 14y ago
@NathanBowers on twitter suggested looking into http://convertico.org/Multi_Image_to_one_icon/ http://convertico.org/Multi_Image_to_one_icon/
- taylorfausak 14y ago
  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 http://taylor.fausak.me/static/images/favicon.ico

Kiro 14y ago

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

Zirro 14y ago
It was all over the tech-part of the Internet recently: http://www.anandtech.com/show/6023/the-nextgen-macbook-pro-with-retina-display-review 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.
zokier 14y ago
To avoid upscaled bitmaps on "retina" devices.