0

Possible Duplicate:
How do I set retina graphics for my website?

What is the best method for adding 2x images to webpages that will be displayed on the new iPad with Retina graphics?

I've gone through these articles.

http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/

http://www.teamdf.com/web/automatically-serve-retina-artwork/191/

http://retinajs.com/

Community
  • 1
  • 1
Daljit
  • 685
  • 5
  • 12
  • "Best" in what sense? Do you have any particular problem with any of the solutions in those articles? – deceze Nov 07 '12 at 11:13
  • I'm just researching on retina display working and looking for best way to handle images in these displays. I'm sure it is the new and need heads up in development. – Daljit Nov 07 '12 at 11:39

1 Answers1

2

There are various suggested methods for tackling the problem of Retina displays (and large display screens etc.) unfortunately most of these are just that, suggestions.

The two most popular are the suggestion of adding a tag, which accepts multiple images and the browser will load only one (dependant on media queries specified by the developer):

<picture alt="angry pirate">
   <source src=hires.png media="min-width:800px">
   <source src=midres.png media="min-width:480px">
   <source src=lores.png>
      <!-- fallback for browsers without support -->
      <img src=midres.png alt="angry pirate">
</picture>

The other suggestion is specifying multiple sources for an image using 'srcset' on an image:

<img alt="Cat Dancing" src="small-1.jpg"
srcset="small-2.jpg 2x,  // this is pretty cool
large-2.jpg 100w,       // meh
large-2.jpg 100w 2x     // meh@2x
">

I personally think this is a lot more ugly (and it leaves you less control as the browser decides which image to load) but from my understanding the second solution has been added to the official spec (in some capacity)

Outside of these suggestions the only real current solution is to start with an image 2x the original size (or 1.5x depending on your preference)

It may be possible to try and get all fancy and do a JavaScript solution, but I think that would be over complicating things ...

Below is a really good articles which discusses the issue you describe (I feel I'm rambling a bit!): http://www.alistapart.com/articles/mo-pixels-mo-problems/

Sean
  • 6,389
  • 9
  • 45
  • 69