retina displays and image size

You set the parameters for the exported image in the export presets window.

I don't think you really need to worry about this, just continue to create your images as you have for web viewing. The reason being the viewing distance for these devices is so close to your eye going with high resolution images would be a waste of storage space and bandwidth.

I think you need to be more aware of aspect ratio then resolution this way you use the maximum amount of screen area available.

Just my thoughts. What will work best in the end is what looks right to you.

regards

If you want to create images optimized for viewing at 100% on the iPad retina display, create an export preset like that shown in the screenshot below. At this size the image can't be zoomed on the iPad without upscaling the original.

For web use, the DPI is meaningless. It is only useful for a file that will be printed. For web use the important part is the pixel dimensions. HTML uses pixel dimensions to control the size of an image in a web page. The size on any particular display will vary because 72DPI is no longer the norm. Most modern displays are actually above 90DPI.

Like Thomas said, the web only sees pixel dimensions (900x600, etc.). Ppi is defined by the client display, usually in the range of 72-110 ppi or something like that. In terms of most viewers in 2012 the ppi will be much closer to 100 ppi than to 72 ppi as a general rule.

Generally what I do is envison the size at the longest dimension and then arbitrarily convert to 100 ppi. E.g. if the desired longest dimension visually is 7 inches that means 700 pixels on the longest dimension; the smaller dimension is based on the proportions of the pic. However every user with a display other than 100 ppi will see a variation from 7 inches.

There are web design tricks to optimize sizing but that is another large discussion topic and probably for a different forum.

HTH

-Allen

It is true that dpi is (mostly) meaningless on the web. If you set a 800x600px image to 72 dpi, and exported a copy of the same 800x600 image at 600dpi, and then uploaded both to the same web page, you would find they would display at exactly the same size: 800 pixels across, and 600 pixels down.

It's probably sensible to assume Apple is intelligently adjusting the size of images on the new iPad retina display, since they would not all web images to display 1/4 as large as on a normal computer.

The dpi setting in Aperture's export settings is only metadata. It does not alter the size (i.e. pixel dimensions) of the image in any way (unless you change the Size To: setting to "Fit Within (inches)". Then Aperture will use the DPI and size settings to calculate what pixel dimensions to use. See below.

As Network 23 said, if you export a 800x600px image at both 72 dpi and 600 dpi, you'll find the resulting file is exactly the same size.

How an image is displayed on a web page (i.e. scaled up or down) is controlled by the HTML code that describes a page.

Donald wrote:

For example: my website logo looks fuzzy on the new retina display. The logo size is 110X360 pixels and it is set at 72 pixels per inch (verified using Preview). I have the original logo which measures 2212X648 at 300 pixels per inch and is set at 300 pixels per inch. There must be a way to clean up its appearance yet have it appear the same size.

The same applies to the images, although it does not seemto be as apparent. If I start at 300 pixels per inch on a 3000X2000 image, what settings would be optimal for the exported image on the site? Assuming dimensions of somewhere in the vicinity of 920X1380 to 960X1440 (if that makes sense).

Apple should give us some direction on this issue. Maybe they have and I don't know where it is. Because what is ultimately true is, we can only make one logo file for everybody. One logo image that we upload to the site and must work on both a regular old Windows laptop or Mac laptop, which, depending on the model, tend to range from 85-120 dpi displays, but also on the iPhone 4S at 326dpi and the new iPad at 264 dpi.

The reason I said above that Apple is probably doing something intelligent behind the scenes that fixes all this, is because no web site is saying their images are displaying super tiny on an iPhone 4S or new iPad. But it would be nice for them to tell us if there is anything we can do to optimize our images. Or that we shouldn't do anything. For now, I'm going to keep sizing and uploading for conventional web browsers on conventional computers, and as long as they look OK on the mobile devices, I'm going to leave it well enough alone. Because, for now, there are too many special dpis to address individually. It isn't just about the new iPad. It's about all the different desktop, laptop, and mobile dpis out there. All Retina does is extend the range a bit.

But if anyone knows if Apple has said anything special about treating images for iOS devices and the wide ranges of resolutions on them (from iPhone 1 to retina iPad 3 and iPhone 4S), let us know!

(I suppose it might be possible to use useragent string detection to serve up a specifically resized image to a specific web browser, but I don't know if that's practical. Only because I'm not a web programmer.)

I've written a little paper on this, as it is a real shame that a websites look worse on the iPad3 than it predicessor. But there are some ways around it. Here are a couple of ideas around the problem: http://igozulu.com/lab/1/

They both involve loading higher resolution images, so bigger files sizes. So it might be an idea to have two sets of images, low and hi-rez, and apply the images based on some device detection through the user-agent.

I may be completely off on this, and over engineering the problem. But I've tried it on my site's logo, and it appears to work.

Donald wrote:

This confuses me if dpi is meaningless. What is it that developers do to make their icons and graphics better in apps when there is a new release? Are they increasing dpi or image dimensions? If it is image dimensions why is it that they appear the same on the display?

For example: my website logo looks fuzzy on the new retina display. The logo size is 110X360 pixels and it is set at 72 pixels per inch (verified using Preview). I have the original logo which measures 2212X648 at 300 pixels per inch and is set at 300 pixels per inch. There must be a way to clean up its appearance yet have it appear the same size.

The same applies to the images, although it does not seemto be as apparent. If I start at 300 pixels per inch on a 3000X2000 image, what settings would be optimal for the exported image on the site? Assuming dimensions of somewhere in the vicinity of 920X1380 to 960X1440 (if that makes sense).

Donald-

Start thinking in terms of the pixel dimensions of your output and mostly forget about the pixel density (ppi) of your output unless you are printing to hard copy.

E.g. your logo is 110x360 pixels; changing pixel density does not change the pixel dimensions. Your 110x360 pixels looks good at a certain size on a low rez display, but on a high rez display the 110x360 pixels must either be viewed smaller or uprezzed in the browser, in web design software or in the OS to view at the same size. As you know uprezzing reduces image quality. Quality digital images visually usually tolerate uprezzing better than small logos do.

To make your logo look good on the higher rez display you need to provide more pixels to start with. How software does the uprez/downrez thing is of course a challenge, and there are multiple different approaches; enough material for a couple of upper-division uni courses. A highe level app like Adobe flex, for instance, provides three resolution band choices (IIRC 160/240/320 ppi).

How any given designer proceeds is dependent on what tools he/she chooses to use.

HTH

-Allen

Network 23 wrote: ...Because what is ultimately true is, we can only make one logo file for everybody. One logo image that we upload to the site and must work on both a regular old Windows laptop or Mac laptop, which, depending on the model, tend to range from 85-120 dpi displays, but also on the iPhone 4S at 326dpi and the new iPad at 264 dpi.

Actually no. Depending on which software tools you use you may indeed need to provide differently sized logo files. Or perhaps with some tools just the highest resolution that will get downrezzed (but even downrezzing sometimes breaks image files like logos). Like I said to Donald, how any given designer proceeds is dependent on what tools he/she chooses to use.

And of course it is all complicated by the fact that larger pixel dimensions downrezzed and/or multiple dimension choices managed on the fly take more bandwidth.

In any event trial-and-error remains an important part of web design since day one. 😟

HTH

-Allen

When visiting the Apple front page, it appears this is taking place. A standard image loads first, then a retina-optimized one seems to quickly replace it. The image becomes beautiful and more detailed. No fuzziness at all.

Actually, that's easy to do. They can detect the device or "User Agent," which is the name each browser transmits to the website. There are tools for Firefox that let you spoof the User Agent for testing if you want to play around seeing how sites react.

Thanks SierraDragon, I hadn't thought of that, but it makes sense that code could figure out details of a display and serve up images of an appropriate resolution. Is there a reliable way to also sense the user's bandwidth? I wouldn't want to serve up big images just because someone's got a Retina iPad, if they're actually on some capped 3G connection.