Pancake/Retina Images for Web
< Pancake
Jump to navigation
Jump to search
gbrander: Are we doing anything with the @2x images yet? st3fan: they are for the iPhone4 i think, but not sure if they actually get loaded
- Does UIWebView load in @2x images automatically? Nope.
- Background images: Targeting Retina Display with @media -- that's pretty easy.
- Real images: we have a few options...
- The easy hack: load in the @2x version for everyone and use @width to shrink by half.
- Responsive images:
- This is a pretty shaky technique right now, with a lot of approaches and no clear winner https://docs.google.com/a/crowdfave.org/spreadsheet/ccc?key=0AisdYBkuKzZ9dHpzSmd6ZTdhbDdoN21YZ29WRVdlckE&hl=en_US#gid=0
- Scott Jehl did a clever hack with canvas http://scottjehl.com/imgwithfallback.html
- Detect retina display with UIWebView and pipe to appropriate template (not very DRY)
- Create image with JavaScript, provide urls to both sizes and use JavaScript media queries to create the right one (this might make the most sense with the thumbnails).