Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

What ppi to design with for retina displays?

djsound

djsound

macrumors 6502a
Original poster
Dec 4, 2006
791
17
K I have googled a bit but this is confusing....I am trying to design the cover art for my new podcast but...I dont know what ppi to make it at. I did it at 72 ppi....600x600 and when I look at it on my iphone 4 it still isnt perfectly crisp on the retina display. I think the retina display can show like 320 ppi .....anyone know settings for getting a good crisp retina worthy image on my iphone? thanks
 
well, a 100 dpi jpeg of 300x300 pixels will be 300 pixels wide on an iphone,
a 300 dpi jpeg of 300x300 pixels will be... 300 pixels wide on an iphone.

So, for websites (as with any screen media measured in pixels) it doesn't matter.

Now in SVG, PDF etc.. that's a different matter.
 
K so how do you take advantage of the retina power? How do they make the icons so crisp?
 
After reading that, I guess anyone who wants "quality" is s.o.l. Unless your making something that could be done as a vector. My podcast cover looks like a movie poster with abstract art and a lot of shadowing. No way it could be done with vectors so I guess I am stuck with Microsoft type quality.... I guess I bought a phone so my icons could be great quality and other things not great.
 
nope, you can design it right: you just have to get the size of the image (for example 260 pixels) and design the image (png, jpg) at exactly that pixelsize.
 
so still do it at 600 x 600 pixels but 320 ppi...from the start and I should be good? Thats kind of impossible I guess since I only have the image at 72 ppi @ 600x600. If I increase the ppi then image size will be a lot smaller ..oh well. Learned somethng for next time. Thanks :cool:
 
The "pixels per inch" or dpi is irrelevant.

600 x 600 pixels is the same size on a screen whether it's 72dpi or 320dpi. So, 72dpi is fine.

Just follow Apple's guidelines and make the image look great at 600 x 600... and have it be something that looks good when scaled down to smaller sizes.

Apples guidelines on podcast images:

Create a graphic for your podcast that is easy to recognize when scaled down to 50x50 pixels. Good art communicates the value of the podcast with a simple picture and a few words. Before you create your podcast art, go to the Podcast page in the iTunes Store, click on Top Podcasts, and note which art works best and why. We recommend a 600 x 600 pixel JPG for cover art. You can also use images at the episode level.​

As far as I can tell... the preview images for podcasts are automatically scaled down for the appropriate device by the iTunes store. Looking at podcast listings in the "iTunes" app on my iPhone 4, the images are all displayed at retina quality. My guess is that the iTunes store creates various thumbnails when you submit your image. Which means that they scale down your 600 x 600 image to create a 50 x 50 pixel thumbnail image that's displayed on a non-retina device, and probably a 100 x 100 thumbnail image (double the size) to be shown on retina devices. (plus other thumbnails sizes depending on the screen in iTunes)

In short, don't worry about what it looks like when viewing it in the "Photos" app or another app on your iPhone 4... just make sure it looks good at 600 x 600 on your computer, and that it still looks nice if you shrink it down to 50 x 50 with your image editing software.
 
Last edited:
You're not getting it.
PPI means pixels per inch.

An image 800 pixels wide is going to be 800px wide at 300PPI, and 800px wide at 1200PPI.. You only have 800px.

If you want to make a retina wallpaper for example, you save it at 640x960. The PPI setting can be ignoreer, set to 1, or set to 300, ti's all the same...
 
atari1356 said:
The "pixels per inch" or dpi is irrelevant.

600 x 600 pixels is the same size on a screen whether it's 72dpi or 320dpi. So, 72dpi is fine.

Just follow Apple's guidelines and make the image look great at 600 x 600... and have it be something that looks good when scaled down to smaller sizes.

Apples guidelines on podcast images:

Create a graphic for your podcast that is easy to recognize when scaled down to 50x50 pixels. Good art communicates the value of the podcast with a simple picture and a few words. Before you create your podcast art, go to the Podcast page in the iTunes Store, click on Top Podcasts, and note which art works best and why. We recommend a 600 x 600 pixel JPG for cover art. You can also use images at the episode level.​

As far as I can tell... the preview images for podcasts are automatically scaled down for the appropriate device by the iTunes store. Looking at podcast listings in the "iTunes" app on my iPhone 4, the images are all displayed at retina quality. My guess is that the iTunes store creates various thumbnails when you submit your image. Which means that they scale down your 600 x 600 image to create a 50 x 50 pixel thumbnail image that's displayed on a non-retina device, and probably a 100 x 100 thumbnail image (double the size) to be shown on retina devices. (plus other thumbnails sizes depending on the screen in iTunes)

In short, don't worry about what it looks like when viewing it in the "Photos" app or another app on your iPhone 4... just make sure it looks good at 600 x 600 on your computer, and that it still looks nice if you shrink it down to 50 x 50 with your image editing software.
Click to expand...

atari - most of those podcasts that you download are made in the "pre-retina" days and you can tell. They are good but not retina quality. I followed Apple's recommendations for podcasts and it gave me the "pre-retina" quality...just look at any lines that are 1 or two pixels....they blur....the retina quality images do not

svp - i undertand that on a computer screen it displays at 72 dpi...but the retina is double that...so how could using a 72 dpi look ok on a retina? I dont think so. My image might not look so great because it was 612 x 612 ...not 640. So it had to stretch a bit?

I just looked at the same image in gmail (where it does not stretch it to fit screen horizontally) and it looks perfect. ...vs. as a wallpaper or podcast image (where it DOES stretch it to fit screen horizintally). Thats where I was going wrong I guess. thanks guys! Apple needs to update thier recommendation from 600x600 to 640x640..
 
Last edited:
djsound said:
svp - i undertand that on a computer screen it displays at 72 dpi...but the retina is double that...so how could using a 72 dpi look ok on a retina?
Click to expand...

Actually, computer screens vary on the actual PPI (pixels per inch is more accurate the DPI). It also matters what screen resolution you are set to.

PPI/DPI are terms of measurement when describing the output/display of an image. (or input, too, for example when scanning something in)

Maybe an example would help...

Using my MacBook Pro, I just created a graphic that is 500 pixels wide. When I measure it (using an actual ruler!), it is 3.875" on my screen at the native resolution. (1680 x 1050)

Some rough math shows that I am viewing this image at 129 PPI (horizontal PPI only, just to keep this somewhat simple).

If I change my resolution to 1024 x 768 (ugly on here!), now that image is 6.375" wide and approximately 78 PPI.

Here are the actual PPI stats that I found online. Not sure how to verify them, as I only have a iPhone 3G. :eek:

iPhone 3GS - 163 ppi

iPad - 132 ppi

iPhone 4 - 326 ppi

Hope that helps!
 
djsound said:
svp - i undertand that on a computer screen it displays at 72 dpi...but the retina is double that...so how could using a 72 dpi look ok on a retina? I dont think so. My image might not look so great because it was 612 x 612 ...not 640. So it had to stretch a bit?
Click to expand...

Try it; save the 640x640 @ 72PPI And at 1200PPI And compare... PPI is irrelevant.
 
Don't worry about the device's pixel density. A pixel is a pixel.

@72 DPI
app - 640x960px
icon - 114x114px
 
Apparently I am still missing something and it's starting to really bug me hehe. I made the image at 640 x 640 and at 72 ppi. Then I tested it by viewing it through my photo library on my phone. It still looks a tiny bit fuzzy....then I emailed it to my friend through gmail and when I open the gmail message on my phone it shows the attachment and it is PERFECTLY clear...and crisp. Id like to know what gmail is doing any different....I can not seem to get it crystal clear through photo gallery on the iPhone 4 ...it shouldn't be stretching it or anything since it is 640 ....correct?

If anyone is interested, email this image to yourself and check it though gmail on your iPhone 4 ..you can really see int he top thin font that it will be crystal clear...VS. through your photo gallery.
 

Attachments

  • podcast art 640.jpg
    podcast art 640.jpg
    370.7 KB · Views: 240
It looks fine to me. Obviously thin fonts will look bad at smaller sizes (you cannot have a line thinner than 1pixel...)

Your possible solutions are:

Use a larger font
Use a phatter font
Stop caring what it looks like in the photo gallery (that is not a real life viewing scenario anyway. Number of your listeners who will view this there:0)
 
Looks good (you have it at the right size, ppi unimportant) so, perfect.
The rest is font use and design sense, use less different sizes, use a fatter font etc, as gullySn0wCat said.
 
ya it turned out fine. once uploaded it was fine, i guess photo gallery stretches pictures or something
 
This MSDN blog is fairly old now, but it does help explain why Apple championed 72ppi, how 96ppi came about on Windows, and why PPI/DPI still remains irrelevant when it comes to images on a screen. ;)
http://blogs.msdn.com/b/fontblog/archive/2005/11/08/490490.aspx

With fonts it matters a great deal, but that's a whoooooole nother thread!

Unless you design typefaces or manufacture monitors, just don't worry about PPI and be happi. :D
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back