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

Reply
 
Thread Tools Search this Thread Display Modes
Old Aug 31, 2012, 04:31 AM   #1
santaji
macrumors member
 
Join Date: Dec 2008
Location: Mumbai, India
How to make sure images won't look crappy on retina displays

I don't own any retina display devices, but i occasionally do web design. I keep hearing about how most images on the internet look low quality on retina displays, so i was wondering what i should do to make sure that images that i upload online look decent on retina iPhones, iPads, and the new MacBook Pro.

Should i make sure all images i export to put online be over 326 ppi?

For example, when exporting a pdf as a png in preview, the default resolution is 150 pixels / inch. Do i have to increase this to 326 ppi to ensure that the PNG will look all right even on the new retina MacBook Pro?

When exporting an Adobe Illustrator file as a PNG, the High setting when choosing a resolution is 300 ppi. Will this look all right on the 326 ppi retina MacBook Pro display?
__________________
Follow me on twitter! @santaji
santaji is offline   0 Reply With Quote
Old Aug 31, 2012, 07:48 AM   #2
aaron.lee2006
macrumors 65816
 
aaron.lee2006's Avatar
 
Join Date: Feb 2006
Location: Ontario, Canada
Send a message via AIM to aaron.lee2006 Send a message via MSN to aaron.lee2006 Send a message via Skype™ to aaron.lee2006
All that can really be said is that images will look best in the proper pixel density of the screen being designed for. Shouldn't be anything wrong with increasing the PPI. Prior to this retina business we really only needed to design in 72PPI. Those days are gone.
__________________
MacBook Pro: 2.8/4GB/500GB HD/9600M GT 512
23" ACD
aaron.lee2006 is offline   0 Reply With Quote
Old Aug 31, 2012, 08:20 AM   #3
heehee
macrumors 68020
 
heehee's Avatar
 
Join Date: Jul 2006
Location: Same country as Santa Claus
As far as I know, it shouldn't matter. As long as pixel dimension stays the same, a 1200px x 800px with 1 pixel/inch is the same as 1200px x 800px with 600 pixels/inch.
heehee is offline   1 Reply With Quote
Old Aug 31, 2012, 01:28 PM   #4
gnasher729
macrumors G5
 
gnasher729's Avatar
 
Join Date: Nov 2005
Quote:
Originally Posted by santaji View Post
I don't own any retina display devices, but i occasionally do web design. I keep hearing about how most images on the internet look low quality on retina displays, so i was wondering what i should do to make sure that images that i upload online look decent on retina iPhones, iPads, and the new MacBook Pro.
First, they don't look any worse on a retina display. They just don't look as good as the rest. The most obvious thing: Don't put text into images, because it will stand out badly.

Using 326 dpi images will make your website huge, and it will not help anyone who doesn't have a retina display (almost everyone). You can google around for methods to detect retina display and produce different images - that's what Apple does for their own website. But unless you have a really good reason, just make sure that your images are good quality. Don't use images that need scaling up even on a non-retina display.
gnasher729 is offline   0 Reply With Quote
Old Aug 31, 2012, 10:28 PM   #5
lucidmedia
macrumors 6502a
 
Join Date: Oct 2008
Quote:
Originally Posted by gnasher729 View Post
Using 326 dpi images will make your website huge, and it will not help anyone who doesn't have a retina display (almost everyone). You can google around for methods to detect retina display and produce different images - that's what Apple does for their own website. But unless you have a really good reason, just make sure that your images are good quality. Don't use images that need scaling up even on a non-retina display.
This. Do not serve up high resolution images to devices that do not require them. Use javascript to detect the users needs and then serve them the correct images. Retina.js is one library, but there are several more.
lucidmedia is offline   1 Reply With Quote
Old Aug 31, 2012, 10:59 PM   #6
aaron.lee2006
macrumors 65816
 
aaron.lee2006's Avatar
 
Join Date: Feb 2006
Location: Ontario, Canada
Send a message via AIM to aaron.lee2006 Send a message via MSN to aaron.lee2006 Send a message via Skype™ to aaron.lee2006
Quote:
Originally Posted by lucidmedia View Post
This. Do not serve up high resolution images to devices that do not require them. Use javascript to detect the users needs and then serve them the correct images. Retina.js is one library, but there are several more.
Excellent point. I don't code, would have never crossed my mind. I'll have to keep this in mind next time I send a project to the devs.
__________________
MacBook Pro: 2.8/4GB/500GB HD/9600M GT 512
23" ACD
aaron.lee2006 is offline   1 Reply With Quote
Old Sep 1, 2012, 02:22 PM   #7
Hexiii
macrumors 6502a
 
Join Date: Jun 2011
Location: Prague, Czech Republic
Wait, does the dpi matter? I always thought that the only thing that matters is pixel dimension and dpi is only for printing unless you work with inches/centimeters.
Hexiii is offline   1 Reply With Quote
Old Oct 24, 2012, 12:30 PM   #8
patent10021
macrumors 68000
 
patent10021's Avatar
 
Join Date: Apr 2004
Quote:
Originally Posted by Hexiii View Post
Wait, does the dpi matter? I always thought that the only thing that matters is pixel dimension and dpi is only for printing unless you work with inches/centimeters.
This is true. 72ppi all the way even for retina. We don't need to be talking about dpi unless you want to talk about printer output.
__________________
I love the smell of 1080p in the morning.
patent10021 is offline   0 Reply With Quote
Old Oct 26, 2012, 04:16 PM   #9
blanka
macrumors 65816
 
Join Date: Jul 2012
On the web you have nothing to do with PPI/DPI. Just make images twice as big. Apple renders websites that have an image of 300 pixels wide 600 pixels wide on a retina screen. Look around the web, there are people who experimented with JPEG compression, and they managed to get images with twice the pixels at roughly the same file size.
If you use IMG tags or CSS, you can just define the height and width at half the pixel size. Then it works great for retina. If you use the same-size JPEG file approach, it will also render well and fast on non-retina screens.
blanka is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Design and Graphics

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Why did Samsung make the fingerprint sensor on the S-5 so crappy compared to the 5s? easy-peasy Alternatives to iOS and iOS Devices 154 Mar 13, 2014 04:33 PM
Retina displays almost pointless? Standard displays downgraded in quality on purpose? Gallion MacBook Pro 31 Sep 12, 2013 04:05 PM
Widget that displays .gif images theGuest Mac Applications and Mac App Store 0 Apr 2, 2013 09:14 AM
When external Retina displays appear... will the Retina MBP support them? Moriarty MacBook Pro 13 Jul 30, 2012 12:34 PM
How to make images/wallpapers retina ready? Trance iPad 3 Jun 9, 2012 09:20 PM

Forum Jump

All times are GMT -5. The time now is 12:30 AM.

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

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