Png export quality

[pauland]

The problem arises when the resolution is doubled for retina displays. That's when the crispness is lost.

If you are referring to the iPad3 doubling up standard (iPad 1 and iPad 2) resolution images for the retina display, then that shouldn't be necessary. Applications should be able to switch the images they use according to the platform and use native resolution images as required.

[grapeshot]

If you are referring to the iPad3 doubling up standard (iPad 1 and iPad 2) resolution images for the retina display, then that shouldn't be necessary. Applications should be able to switch the images they use according to the platform and use native resolution images as required.

I know exactly what you mean, but thats that's not what my problem is. I'm talking about vector images being exported from Xara as PNGs, producing slightly unsharp images and text when displayed on a retina screen. I need the PNGs to be as sharp and crisp as anything on the iPad 3's toolbar (for example), but as it stands at the moment, I can't get the Xara created PNG images sharp enough.

[PhilM]

Are you ensuring that the PNG you export is the same width and height in pixels as the image needs to be on the retina display?

Phil

[pauland]

It may just be that Apple have spent time working at the pixel level to really hone the quality of those images. The variants in line width and text size becomes critical at small sizes.

Could we see an example?

[steve.ledger]

The OP states that Adobe Illustrator exports 'crisp' PNGs.

Perhaps it's the old 72dpi v 96dpi chestnut?

[pauland]

I always think of artwork in terms of specific sizes, rather than DPI, however you're right that looking at the artwork on a different device is going to make the image look different in terms of size and quality. If AI is better, it may well be that AI is better at anti-aliasing than Xara. A specific example would certainly help.

[grapeshot]

Thanks for the feedback lads.

Today's experiments have got nowhere. It's an interesting problem.

I can't post any examples right now as it's commercially sensitive work, but I'll run up an example sheet at the weekend. I've got to crack on though as work's not getting done here due to the head scratching! Our tests today with Illustrator have also failed to replicate the clean images created last week in the same program. It's bizarre.

Anyway, some example to come...

[gwpriester]

Perhaps it's the old 72dpi v 96dpi chestnut?

This should not matter because what is important is the pixel dimensions of the image. If the image is 2400 x 3600 pixels, it does not matter what the dpi of the monitor is. The image will still be comprised of 2400 pixels of width and 3600 pixels of depth or vice versa.

What is important is that you create your images to the recommend pixels dimensions.

I went through this drill when I did our iPad apps and I kept asking what dpi should I export my images at? Finally, I got it, its the pixel dimensions of the image.

Grapeshot - What are you using to build the apps? And what is the Apple specified screen size in pixels?

[grapeshot]

The screen size of the Retina display is 2048 x 1536 @264 DPI.

We're using Xcode to create the app, but right now we're saving images to Dropbox and then viewing them in the photo gallery.

The quality of the PNG on desktop monitors is very good (superb in fact), it only falls down on the iPad. Taking a 300DPI version into Photoshop and resizing it to 72 DPI (2048 x 1536) @24 bit colour depth DOES produce a sharper image.

[grapeshot]

I think I have the answer. We've been able to get really crisp results in Photoshop, but not Xara or Illustrator ( I incorrectly said that Illustrator gave good results in an earlier post. In fact the results match Xara). After much searching, I found this article that helps to clear thing up. The relevant section is in part 2:

Part 1:

http://bjango.com/articles/designingforretina/

Part 2:

http://bjango.com/articles/designingforretina2/