Jpegs and pngs

gyroscope · July 2010

Hi, still a bit confused about pic file format brought into GS, made in Photoshop. (I thought it was straightforward a couple of weeks ago and gave some dodgy advice, sorry about that!)

So now I've learned that all but the iPhone4 can only show 8 bit pics, and that dithering on gradients is the only way to deal with them in a fairly successful manner. (Even the iPad can only show 8 bit pngs, I'm guessing).

If there's no transparency, I can use jpegs. If there is transparency, use png-8. OK, under the dropdown menu showing the type of image wanted in Save for Web in Photoshop, is another menu which includes Restrictive (Web). Two questions here: is this the one that I should choose every time, along with 100% dither, when dealing with pngs?

So next, if there's no transparency involved, I can use the highest quality jpeg, I guess? I'm wondering why there's no dither option to dither the gradients in the jpeg pic; jpeg seems to show the gradients in the preview just fine. And presumably this would be a 24 bit jpeg; there doesn't seem to be any option to get a jpeg-8, as opposed to a jpeg-24, if there is such a thing. Hope I've described my confusion here clearly enough.

One final thing, as far as I've learned, steer well clear of drop shadows fading into the transparency surrounding a png. They look awful whichever options are chosen, as well as showing a white stroke around the image. Would you agree with that?

Any more info/help here appreciated, thanks!

JCFord · July 2010

I would say try to use PNG where ever possible - as JPEGS use a lossy compression algorithm and PNG is lossless.

Also Xcode "optimizes" PNGs as part of the build process.

Regarding Photoshop, If your trying to save size then try the PNG 8-bit version, but if you need transparency then you need the PNG 24-bit version.

design219 · July 2010

No, do not use jpegs. GS can take them, but they are converted into pngs when you import them in the the images bin.

You most certainly can use transparent drop shadows, use the 24 bit png option, works great, but is a bit bigger in file size. I've used fading drop shadows with 24 bit pngs in all my apps.

_______________

Nesen Probe
Tickle Stones
 Food Fight! (free)

gyroscope · July 2010

Thank you JCFord & design219, that's "cleared the air" a bit for me.

A couple more questions though; presumably when using png-24, even if GS doesn't convert them, iPhone will? (apart from iPhone4).

I've been getting some disappointing results saving pngs in the Save for Web option in Photoshop. This was recommended to me; but going back to the usual Save and choosing png that way, the results are just right again. In Image>Mode, I'm using 8 bits per channel (RGB) which presumably is the same as png-8?

design219 · July 2010

gyroscope said:
presumably when using png-24, even if GS doesn't convert them, iPhone will? (apart from iPhone4).

Never heard that before. Mine have worked just fine. Nice, fading shadows with variable transparency.

I'm not sure why you are not getting good results with "save for web", that has always been my preferred method, as it gives you precise previews and deletes unwanted overhead, like an icon preview.

JCFord · July 2010

@ Gyroscope use PNG either 8-bit or 24-bit (transparency) they will stay as PNG's while your developing, its only when you upload to a app build that they get coverted via GS/Xcode to an optimized iphone PNG format.

In terms of the iphone 4, it has a Retina display so while the screen looks the same size as a standard iphone, the image resolution is double.
Older iphone = 480x320 @72dpi
iphone 4 = 960x640@72dpi

Although GS is not yet iphone 4 retina ready in the end the way things stand if you want to take advantage of the iphone 4's retina display then you will need to have 2 images, one of which will be labelled '@2x' for the iphone 4 to pick up on.

image.png - older iphone
image@2x.png - iphone 4

Good luck
JCFord

JCFord · July 2010

Regarding issues with your images, there is a problem with grads looking bad - this is a known GS conversion issue which I hope the GS team will resolve soon. A work around is to add a little noise into the image and then it should look good without any banding in the grad.

gyroscope · July 2010

design219 said:
...and deletes unwanted overhead, like an icon preview.

Ok, you just reminded me of one important aspect of using Save For Web. One thing I've been doing - to get really grotty results - is saving via this method as png-8. My reasoning was that if iDevices in the main cab't show any more than 8 bit images, then that's what they should be...

But if you're using png-24 and it looks just fine on iDevices, that's well good enough for me, design219, thanks!

:-)

firemaplegames · July 2010

gyroscope said:
So now I've learned that all but the iPhone4 can only show 8 bit pics, and that dithering on gradients is the only way to deal with them in a fairly successful manner. (Even the iPad can only show 8 bit pngs, I'm guessing).

This is NOT true. ALL of the devices, including the iPhone4, can only display 8bit images. But just to be clear, that means 8 bits per CHANNEL, not 8 bits for the entire image...

8 bits per channel means a choice of 256 reds, 256 blues, and 256 greens - or 16.8 MILLION colors for the entire image.
JPEGs and PNG24s both support this amount of colors. 8bit images look beautiful. ALL digital cameras take 8bit images. Pretty much everything on a computer that you have ever seen is an 8bit image.

Where I think you are getting confused brings me to your next point...

If there's no transparency, I can use jpegs. If there is transparency, use png-8.

There are 2 types of PNGs - PNG-24 and PNG-8.

PNG-24s support 16.8 million colors, as well as a full 8bit alpha channel. So if you need transparency, use the PNG-24 format.

PNG-8 (and I think this is where the confusion is coming from) only supports 256 colors per IMAGE. When you save your image as a PNG-8, the PNG-8 algorithm selects the best 256 colors (out of the 16.8 million you used) to redraw the image. This makes the image very light and quick to render. It is similar to an old web file format called GIF (which GameSalad does not support). JPEGs on the other hand use 16.8 million colors, but are compressed, and take a weensy bit more time to display. Although this is not really even noticeable anymore. It might become an issue if you have tons of JPEGs to display at once, but even then it is probably negligible.

OK, under the dropdown menu showing the type of image wanted in Save for Web in Photoshop, is another menu which includes Restrictive (Web). Two questions here: is this the one that I should choose every time, along with 100% dither, when dealing with pngs?

When saving for PNG-8 in Photoshop, I get the best results with Perceptual or Selective. 100% dither.

So next, if there's no transparency involved, I can use the highest quality jpeg, I guess? I'm wondering why there's no dither option to dither the gradients in the jpeg pic; jpeg seems to show the gradients in the preview just fine. And presumably this would be a 24 bit jpeg; there doesn't seem to be any option to get a jpeg-8, as opposed to a jpeg-24, if there is such a thing. Hope I've described my confusion here clearly enough.

JPEGs are all 16.8 million colors (or 24bit - which is 8bits per channel). You can adjust the amount of compression on them however - the quality setting you mentioned. The less the quality, the more compressed they are, thus the file size is much smaller - but they look worse.

In this instance, you can also use a PNG-24, which is also 16.8 million colors.

Personally, I only use PNGs. Either PNG-24 for graphics that need transparency, or PNG-8 for ones that don't. The PNG-8 files do look a little more pixellated, but the iPhone's pixels are so small that it doesn't really matter too much. It is probably my old school way of thinking, but I BELIEVE that that PNG-8s render faster than JPEGs, and I want to eke out as much performance as I can from these devices. But like I said, it probably doesn't matter anymore. Just a habit.

jpeg seems to show the gradients in the preview just fine.

Gradients will look perfect if you use either JPEGs or PNG-24s. They will look pixellated and banded if you use PNG-8.

However, they is currently an issue on the iPhone (specifically the OpenGL renderer) that causes banding in a gradient - even if it was saved correctly as a PNG-24 or JPEG. There are some fixes out there, but we don't have access to them in GameSalad. In the meantime, if your image needs to have a gradient, a quick and dirty solution is to put a layer of noise (like TV static, using the Noise filter) at 5% opacity above the gradient. It is hardly noticeable, and will fix the banding in the image on the device.

One final thing, as far as I've learned, steer well clear of drop shadows fading into the transparency surrounding a png. They look awful whichever options are chosen, as well as showing a white stroke around the image. Would you agree with that?

They will look awful if you save it as PNG-8. If you want any sort of drop shadow or glow on your transparent image, save it as PNG-24 and it will look perfect.

Phew!

Hope this helps!

Joe

EDIT: Seems some people have answered your questions while I have been composing this novel!

JCFord · July 2010

PNG 24 will always give better results but will make a larger file size, not much, but at the end of the day it all adds up. Also if you want transparency then you must use PNG 24.

Only use PNG 8 if your image does not have transparency and you want to save space, as the image quality will be slightly less.

gyroscope · July 2010

JCFord said:
Regarding issues with your images, there is a problem with grads looking bad - this is a known GS conversion issue which I hope the GS team will resolve soon. A work around is to add a little noise into the image and then it should look good without any banding in the grad.

Thanks for reminding me of that, JC; I remember Joe mentioning that now.

So to summarize: totally forget jpegs, put 5% noise on all images as a matter of course, and save in png-24 only; and then everything works out fine on the Iphone/iPad screen? That's excellent news.

:-)

firemaplegames · July 2010

Totally forget JPEGs..

If you have the room, just use PNG-24s across the board.

Only use the noise trick if you have a large gradient that causes banding on the device.

JCFord · July 2010

@gyroscope - Yes use PNG's 8 or 24 bit BUT only add the 5% noise IF you find your images need it once viewed on your device, this is mostly grads.

JCFord · July 2010

@ joe -you beat me to it that time! ;-)

gyroscope · July 2010

JCFord said:
PNG 24 will always give better results but will make a larger file size, not much, but at the end of the day it all adds up. Also if you want transparency then you must use PNG 24.

Only use PNG 8 if your image does not have transparency and you want to save space, as the image quality will be slightly less.

Thanks! :-)

firemaplegames said:
This is NOT true. ALL of the devices, including the iPhone4, can only display 8bit images. But just to be clear, that means 8 bits per CHANNEL, not 8 bits for the entire image...

8 bits per channel means a choice of 256 reds, 256 blues, and 256 greens - or 16.8 MILLION colors for the entire image.
JPEGs and PNG24s both support this amount of colors. 8bit images look beautiful. ALL digital cameras take 8bit images. Pretty much everything on a computer that you have ever seen is an 8bit image.

Etc;.......

Wow, Joe, thank you for taken the time to write your novel ;-) ... I mean explanation; very grateful indeed! It has all sunk in now, thank you very much! That's helped enormously.

:-)

I feel like a "cheapskate" though for giving such a short reply to your comprehensive post!!

gyroscope · July 2010

firemaplegames said:
Totally forget JPEGs..

If you have the room, just use PNG-24s across the board.

Only use the noise trick if you have a large gradient that causes banding on the device.

JCFord said:
@gyroscope - Yes use PNG's 8 or 24 bit BUT only add the 5% noise IF you find your images need it once viewed on your device, this is mostly grads.

A good summary, thanks very much; got it!

:-)

Jpegs and pngs

Comments