CODEWITHSUNDEEP
imageipadresolutionretina-display
Yozef
Yozef

Reputation: 829

How to handle all the different sizes and resolutions of Images for Retina and Non-Retina iPhone & iPad for the Web

Apple.com recently changed their web images to accomodate the new iPad's retina display by doubling the size of their images. example:

non-retina.jpg: http://images.apple.com/home/images/ipad_hero.jpg [1] retina_2x.jpg: http://images.apple.com/home/images/ipad_hero_2x.jpg [2]

Though both images have set in html to width="1381" height="575". Does it suffice to rename the enlarged image with a _2x for the browser to fetch the appropriate image, similarly to the @2x for images in Apps?

[1]: Non-Retina image with size: 1454 x 605 [2]: Retina image with size: 2908 x 1210

Upvotes: 0

Views: 643

Answers (1)

Kornel
Kornel

Reputation: 100110

No, it's not enough to just create a _2x image. Apple uses custom script to make that work. It's described here:

http://cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads/

It's not an ideal solution, as it wastes bandwidth downloading regular-sized image first, and makes extra requests to the server.

How to serve high-dpi images is an open question. There's some unofficial discussion about this at W3C:

http://www.w3.org/community/respimg/

Adding width and height dimensions to <img> that are half of image's real pixel size is a good way to serve high DPI images, although it is going to waste some bandwidth on regular-DPI screens.

You might want to enable better image interpolation when you use that.

Upvotes: 1

Related Questions