Retina ready websites?

Detlev said:

My understanding is that images displayed on websites need to balance quality with file size. I have been lead to believe that most screens or browsers only display 72 px/inch. This confuses me especially when there are new mobile devises that say they are high resolution or use a Retina display. Also, as soon as these devises are available there is an outpouring of upgraded apps saying they updated their graphics for the new displays. My questions are these:

1. Do browsers or screens really only display a maximum of 72 px/in?
2. Do these new hardware products require higher resolution images on a site to look good?
3. What resolution is best used for a photo gallery on a site?
4. What is the difference, if any, between the two resolutions (image and hardware pixels)

I ask because I am working on putting my photographs online and would like them to be displayed at their fullest potential.

Thank you.

Click to expand...

Just got done designing one... Check it out on your new iPad...

Http://www.Jakescigarbar.com/

Detlev said:

My understanding is that images displayed on websites need to balance quality with file size. I have been lead to believe that most screens or browsers only display 72 px/inch. This confuses me especially when there are new mobile devises that say they are high resolution or use a Retina display. Also, as soon as these devises are available there is an outpouring of upgraded apps saying they updated their graphics for the new displays. My questions are these:

1. Do browsers or screens really only display a maximum of 72 px/in?
2. Do these new hardware products require higher resolution images on a site to look good?
3. What resolution is best used for a photo gallery on a site?
4. What is the difference, if any, between the two resolutions (image and hardware pixels)

I ask because I am working on putting my photographs online and would like them to be displayed at their fullest potential.

Thank you.

Click to expand...

You are correct in that there needs to be balance between quality and file size.

Your questions:

1. You do not have a clear understanding of what px/inch means, and it's a really common thing to not grip.

Anyhow. If "screens" could only display a maximum of 72 px/in, then there would have to be a standard for how many pixels you are "allowed" to display on a screen of a certain physical size in inch, right? Example: An iMac 27 screen is 27 inches and has a resolution of 2560x1400 pixels. That gives a certain number of pixels per inch, (109 to be exact) defined by the physical size of the screen and what resolution it's running at. The PPI value is just a resulting value of resoluion vs physical screen size. Retina is just a marketing term for Apples screens with a PPI value so high that the eye cannot distinguish individual pixels.

Wikipedia article: http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
DPI/PPI calculator: http://members.ping.de/~sven/dpi.html

2. I think Apple devices scale content really well, so it's not necessary. However, ideally, you would have your images ready at a 2048x1536 so they could be displayed pixel perfect on a Retina iPad.

3. Generally you have thumbnails, previews and then maybe large resolution versions of your photos. Usually something around 2 Mpix has been considered plenty, as that's what most screens can display. Look for 'responsive web design' when you make a site, that will make it ready for all devices.

4. On the difference between 'hardware' and 'image' pixels. The resolution of a digital image is ONLY defined by the amount of pixels in it. A high pixel count doesn't necessarily mean high quality though. Further, if you set an image to a DPI/PPI value is completely irrelevant as long as you're keeping it digital, cause obviously, you can't affect what physical size anyone's gonna view your content at, right? You can't decide that a picture's gonna be 250 PPI on anyones screen, cause that's defined by the resolution and physical size of that screen, as stated above.. you with me?
If this was possible, then you could send a picture to someone with a low PPI, and then that picture would take control of their computer and lower the resoluion to display it at the set PPI. Not a great scenario, eh?

When printing however, you need to consider the DPI, but that's a whole different matter.

I hope this helps. Understanding this will make working with picures a whole lot less confusing.

Both those sites still have low dpi bitmaps.

brock2621 said:

Just got done designing one... Check it out on your new iPad...

Http://www.Jakescigarbar.com/

Click to expand...

Mmmmmm bourbon.

We created a site to find such sites.

http://www.retinareadywebsites.com/

have fun!

Cameron

blokecom said:

We created a site to find such sites.

http://www.retinareadywebsites.com/

have fun!

Cameron

Click to expand...

"HD Websites"

blokecom said:

We created a site to find such sites.

http://www.retinareadywebsites.com/

have fun!

Cameron

Click to expand...

There is not much in it yet.

First I was doing the general trick on my website, where a JS replaces images when a high-DPI unit is detected.
Now I changed it to a server side PHP script that detects Android/iThingie mobile browsers. This is because the double-pinch zoom function on them also zooms to 200% on non hi-dpi devices like a iPhone 3 or a iPod Touch 2G. In such cases double resolution is welcome as well.

And for the bandwith, double resolution does not mean 4 times bandwith. It compresses more easily. It is 150-200% of the low res files as you can increase the JPEG compression a bit. The artifacts are way less visible.

Check out http://www.noupe.com - todays blog.

Detlev said:

My understanding is that images displayed on websites need to balance quality with file size. I have been lead to believe that most screens or browsers only display 72 px/inch. This confuses me especially when there are new mobile devises that say they are high resolution or use a Retina display. Also, as soon as these devises are available there is an outpouring of upgraded apps saying they updated their graphics for the new displays. My questions are these:

1. Do browsers or screens really only display a maximum of 72 px/in?
2. Do these new hardware products require higher resolution images on a site to look good?
3. What resolution is best used for a photo gallery on a site?
4. What is the difference, if any, between the two resolutions (image and hardware pixels)

I ask because I am working on putting my photographs online and would like them to be displayed at their fullest potential.

Thank you.

Click to expand...

1) nope
2) no but it is subtly apparent. Its not the only criteria either - compression artifacts are much more apparent on the high gamut display of the new iPad; Facebook being a good example of too high compression.
3) Two sizes: a 720x720 image at moderate compression for zipping through pictures, with a 2500x2500 image loading automatically whenever the user "dwells" or fills the screen with your image. A balance of download performance and quality is a must.
4) Wiki "Bayer sensor" for more info, but the basic difference is color resolution. A screen has three color producing cells at each pixel, so its luminosity resolution is the same in all color planes. Due to the Bayer design, a standard camera has 1/4 it's stated resolution in two color planes and 1/2 it's stated resolution in a third. Software interpolation does a fair job of hiding this, but you may find your photos at their most crisp when you show them at 1/4 their original resolution.

There is really a lot to this subject, but let's make a few statements to maybe clarify:
- When you take a digital picture, you are capturing some bit strength of light on a pattern of photo detectors, each of which captures one color. This sensor has a horizontal and vertical pixel count, which are multiplied together to assign it a "megapixel" rating
- After you take a picture, the digital signal from the camera is saved to an interchange format to help display your image universally on displays. This format might be RAW, in which case the exact contents of the photo detectors are saved, or JPEG, in which case the RAW data is processed and an interpolated image is produced, generally one in which every photo detector has its captured data compared with nearby detectors of other colors to produce an image that has full color information for a number of pixels equal to the sensors megapixel count. Anyhow, the image format has a horizontal and vertical resolution which is the "sharpest" that image will ever get.
- A screen can display an image file at any resolution it is capable of rendering. It does so by up sampling low resolution images and downsampling high resolution images. Any time a computer is told to display an image, it must also be told what size the image is to be viewed at. Images always look their best displayed at their full resolution on a screen capable of rendering that resolution. Failing that, it is better to down sample than to up sample. Up sampling is of dubious usefulness, as it adds no meaningful visual information and can distort proportions/inflate imperfections in very low res images. It is sometimes used to make images "look better," though this is really a matter of switching algorithms to make a bad image seem less bad.

any clue to why Apple's website isn't retina-ready?

One more retina ready website

potatis said:

any clue to why Apple's website isn't retina-ready?

Click to expand...

I think the clue is in the question itself!