Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Mar 17, 2012, 04:02 PM   #1
Detlev
macrumors 6502a
 
Join Date: Sep 2003
Retina ready websites?

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.
Detlev is offline   0 Reply With Quote
Old Mar 20, 2012, 10:21 PM   #2
brock2621
macrumors 6502a
 
brock2621's Avatar
 
Join Date: Jun 2007
Location: Kentucky
Quote:
Originally Posted by Detlev View Post
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.

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

Http://www.Jakescigarbar.com/
__________________
2012 27" iMac www.OCULUSSTUDIOS.com
www.Twitter.com/OculusStudiosKY
brock2621 is offline   0 Reply With Quote
Old Mar 25, 2012, 02:25 AM   #3
waloshin
macrumors 68030
 
waloshin's Avatar
 
Join Date: Oct 2008
Location: in my world.
Waloshin.com
__________________
Best camera lenses for real estate agents
[/B][/URL]2008 Macbook Unibody 2.4 Ghz Core 2 Duo
waloshin is offline   -7 Reply With Quote
Old Mar 28, 2012, 05:44 AM   #4
schimmel
macrumors member
 
Join Date: Oct 2009
Location: Sweden
Quote:
Originally Posted by Detlev View Post
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.

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..._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? :P

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.

Last edited by schimmel; Mar 28, 2012 at 05:47 AM. Reason: clarification
schimmel is offline   1 Reply With Quote
Old Jul 5, 2012, 11:23 PM   #5
wlossw
macrumors 6502
 
Join Date: May 2012
Location: Montreal, Quebec, Canada
Both those sites still have low dpi bitmaps.
__________________
rMBP Mid-2012 2.7/16/512, Thunderbolt Display, Iphone 5 64gig, IPAD 4th gen 64gig WiFi, IPAD mini Retina 128gig LTE 4x Apple-Tv 3rd Gen
wlossw is offline   0 Reply With Quote
Old Jul 6, 2012, 08:22 AM   #6
Fuchal
macrumors 68000
 
Join Date: Sep 2003
Quote:
Originally Posted by brock2621 View Post
Just got done designing one... Check it out on your new iPad...

Http://www.Jakescigarbar.com/
Mmmmmm bourbon.
Fuchal is offline   0 Reply With Quote
Old Aug 3, 2012, 08:55 AM   #7
blokecom
macrumors newbie
 
Join Date: Aug 2012
We created a site to find such sites.

http://www.retinareadywebsites.com/

have fun!

Cameron
blokecom is offline   0 Reply With Quote
Old Aug 3, 2012, 12:33 PM   #8
NathanCH
macrumors 65816
 
NathanCH's Avatar
 
Join Date: Oct 2007
Location: Stockholm, Sweden
Send a message via Skype™ to NathanCH
Quote:
Originally Posted by blokecom View Post
We created a site to find such sites.

http://www.retinareadywebsites.com/

have fun!

Cameron
"HD Websites"
__________________
Design/Development Portfolio: Cetan.ca
NathanCH is offline   0 Reply With Quote
Old Aug 21, 2012, 02:40 PM   #9
blanka
macrumors 68000
 
Join Date: Jul 2012
Quote:
Originally Posted by blokecom View Post
We created a site to find such sites.

http://www.retinareadywebsites.com/

have fun!

Cameron
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.
blanka is offline   0 Reply With Quote
Old Aug 22, 2012, 12:07 PM   #10
AFPoster
macrumors 65816
 
Join Date: Jul 2008
Location: Charlotte, NC
Check out http://www.noupe.com - todays blog.
__________________
2012 15" MacBook Pro 2.3Ghz i7
iPad 2 32gb (white)
iPhone 5s 16gb x2
AFPoster is offline   0 Reply With Quote
Old Aug 22, 2012, 09:12 PM   #11
dasmb
macrumors regular
 
Join Date: Jul 2007
Quote:
Originally Posted by Detlev View Post
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.
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.

Last edited by dasmb; Aug 22, 2012 at 09:41 PM.
dasmb is offline   0 Reply With Quote
Old Aug 24, 2012, 12:37 PM   #12
potatis
macrumors 6502
 
Join Date: Dec 2006
any clue to why Apple's website isn't retina-ready?
potatis is offline   0 Reply With Quote
Old Mar 28, 2013, 05:09 AM   #13
markjobs
macrumors newbie
 
Join Date: Mar 2013
One more retina ready website

Last edited by markjobs; Mar 28, 2013 at 09:22 AM.
markjobs is offline   1 Reply With Quote
Old Mar 28, 2013, 05:14 AM   #14
725032
Guest
 
Join Date: Aug 2012
Quote:
Originally Posted by potatis View Post
any clue to why Apple's website isn't retina-ready?
I think the clue is in the question itself!
725032 is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Retina display websites Hexiii Web Design and Development 8 Apr 3, 2013 10:59 AM
Apple and AT&T Websites Get Ready for iPhone 5 Pre-Orders MacRumors MacRumors.com News Discussion 452 Sep 20, 2012 10:22 AM
Making Photography Websites Retina Ready? Regaj MacBook Pro 12 Jul 5, 2012 02:55 PM
Websites and the retina display cclloyd MacBook Pro 3 Jun 12, 2012 01:39 AM

Forum Jump

All times are GMT -5. The time now is 01:26 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC