PNG-8 Problem on Device

It happens with all my files. I’ve also tried saving the file in Photoshop with at least dozen of slightly different settings. Some settings make it worst.

It also happens only vertically. It seems like there is always one partly transparent horizontal line of pixels in the top of or bottom of the image. This happens on iPad. I haven’t tried any other devices. [import]uid: 13507 topic_id: 31024 reply_id: 124126[/import]

Too bad Corona doesn’t support png-8. However, they seem to work…sort of. In my tests the file size of PNG-8 is about 50% of the size of PNG-24 (even if they have the same amount of colors). In my latest game the splash screens are PNG-8 because I needed the reduce the app size to get it under 50MB. Do you know if Apple has something against PNG-8 or if Corona might drop the support alltogether in the future? [import]uid: 13507 topic_id: 31024 reply_id: 124127[/import]

I don’t know Apple’s actual stance on this, but I read somewhere (in an article awhile back) that PNG files (even those larger in file size by comparison) are actually more efficient than JPEGs on iOS devices because they go through the “PNGCrush” algorithm which makes them smaller, leaner, and faster to load. So, even though you might have a PNG-8 that’s 50K (for example) and the same file is 100K at PNG-24, the difference might not be that drastic after the larger version gets crushed down in size. You could probably test this out by building the app using 10 images at 24-bit depth, then building the app with the same 10 images at 8-bit depth, and compare the overall app size. It might not be as drastic a difference as you think.

http://en.wikipedia.org/wiki/Pngcrush

If you’re still struggling to keep the app size under a certain limit, then yes, you might need to settle with JPEGs… and maybe lower-quality JPEGs too. If you have hundreds or even thousands of full-screen images in your app, it’s going to be difficult to keep the overall app size under the limit.

Yet another option is to save them at smaller dimensions and then use Corona to scale them up in the app. It wouldn’t look great (because they’d be stretched, and quite possibly you’d see some artifacts), but if it means A) releasing your app with stretched backgrounds, or B) not releasing it due to size constraints, then the former option is obviously better. :slight_smile:

Brent
[import]uid: 9747 topic_id: 31024 reply_id: 124181[/import]

There is a huge size difference in Corona builds. I have thousands of files. The size of the build with PNG-8 files is about 50% of the size of the build with PNG-24 files ( 330MB vs. 180MB). JPGs are out of the question because I need transparency. I don’t have to meet any size limit, but it would be just really nice to be able to reduce my huge app by 150MB… [import]uid: 13507 topic_id: 31024 reply_id: 124197[/import]

It probably doesn’t suit your app (might even make it unworkable), but could you include “thumbnail” images or stretched/lower-quality images, then have the better version downloaded into the app from a server or website when the thumbnail is tapped on? I don’t know what kind of app you’re working on, so this is a just a random suggestion.

Brent
[import]uid: 9747 topic_id: 31024 reply_id: 124206[/import]

I did some testing and here are the results. I was able to further reduce the file size of the PNG8 files by reducing colors. I also managed to reduce the size of PNG24 files by utilizing r.pudlowski’s Posterize tip.

PNG8: file size is reduced by 78% ( transparency isn’t as good as in PNG24, but in other ways my images look exactly like the originals.

Posterize: file size is reduced by 45% (I used posterization value 15 which is the absolute lowest I can go. I can see some reduction in image quality, but the transparency is as good as in the original)

Thanks r.pudlowski for the tip! Posterization is much better than nothing! [import]uid: 13507 topic_id: 31024 reply_id: 124689[/import]

Renamed file extensions didn’t work with Corona… Any ideas how to avoid PNGCrush of my PNG-8 files? If I can’t solve this I just have submit a 330MB app instead of a 160MB app. [import]uid: 13507 topic_id: 31024 reply_id: 124676[/import]

If you don’t mind jumping through a few hoops, you can edit the .app after Corona builds it.

All you have to do to after making the modifications you need (Re-adding your PNGs) is to call 'codesign -f -s “[Your Certificate Name Here in Quotes]” /Path/To/App.app And it’ll re-sign the app, so it’s valid for uploading. You can write a quick .sh script and use Automator on Mac to make it a Right-Click option in Finder. [import]uid: 134101 topic_id: 31024 reply_id: 124704[/import]

@polygonblog, can you send me one of the images that shows the white line in Corona?

Also, what device(s) are you seeing this happen on?

Corona doesn’t process the images directly but relies on the OS to do that. We enabled PNG8 support a few months ago in Corona and haven’t had any reports of any problems.

My address is tom at coronalabs dot com.

Thanks,
Tom [import]uid: 7559 topic_id: 31024 reply_id: 124367[/import]

Ok, I just sent the file. I tested this with iPad2 and iPod Touch (retina). The seam is visible on both devices. [import]uid: 13507 topic_id: 31024 reply_id: 124384[/import]

I received your project and installed it on a iPad2 and iPhone4 (retina) and I don’t see the seam. I even used a magnifying glass to examine where the two images meet and there is no seam at all.

I’m using the latest daily build (914) and building for iOS 5.1.

The only thing I noticed about your code is the images are 408x410 and you are loading them as 410x410. I wouldn’t think that would cause the issue but mentioning it just in case.

Tom [import]uid: 7559 topic_id: 31024 reply_id: 124387[/import]

Thank you Tom for testing it. So strange. I tried it again and still see the seam on both devices. Here is my setup:

  • Daily build (914) and building for iOS 5.1
  • iPad2 with iOS 5.1.1
  • iPod Touch retina with iOS 5.1

Here are the images and the code if anyone else is willing to test this on device. It looks fine in the simulator, but on device I see a black seam between the images.

local image1 = display.newImageRect("world-01-level-01\_15.png",408,410)  
image1.x = 384; image1.y = 250  
  
local image2 = display.newImageRect("world-01-level-01\_20.png",408,410)  
image2.x = 384; image2.y = image1.y+410  


[import]uid: 13507 topic_id: 31024 reply_id: 124407[/import]

Sounds simple enough. This might save me. So there is no need for provisioning profile anymore at that stage? Thank you for the tip Ntero! [import]uid: 13507 topic_id: 31024 reply_id: 124828[/import]

I see the same result… a thin line between the two images on an iPad2, but not in the Simulator. I converted both images to PNG-32 and the seam disappears in both environments. So, this definitely appears to be a bug with PNG-8 files. Tom, can you please log this bug with the engineering team?

Sincerely,
Brent Sorrentino
[import]uid: 9747 topic_id: 31024 reply_id: 124459[/import]

Sorry but we can’t reproduce the problem here. I’ve built the project using build 914 as iOS 5.1 and installed it on the following devices:
iPad2 5.1.1
iPad Touch 6.0 GM
iPhone4 5.1.1

I showed it to our iOS engineer and he doesn’t see the problem either.

I’m not sure why it shows up your device and not on ours but we can’t fix something that we can’t reproduce. [import]uid: 7559 topic_id: 31024 reply_id: 124461[/import]

You still need a provisioning profile, but codesign chooses the appropriate profile that matches your Certificate.

codesign is the tool used by XCode, and so it signs it in the exact same way XCode would have, but you don’t have to rebuild. Here is the Docs to give you an idea of the options available: https://developer.apple.com/library/mac/#documentation/Darwin/Reference/ManPages/man1/codesign.1.html

On XCode you may need an extra line, that directs codesign to an executable called codesign_allocate, but let me know if you have issues using codesign I can give a more detailed explanation (prob. end of day). [import]uid: 134101 topic_id: 31024 reply_id: 124870[/import]

Ok, I figured out why you are seeing the problem and I’m not. A little while back we sped up iOS development builds by bypassing PNGCrush. That’s Apple’s program for compressing PNG image files. I was building your test program with a Developer’s profile and therefore was not using PNGCrush. The simulator doesn’t use it either. When you build for distribution, PNGCrush is called. This is what’s causing the line in the images when you try to seam them together.

I would have to call this an Apple bug because they are altering the PNG data.

Anyway, that mystery is solved but I’m not sure what can be done about your problem except filing a bug with Apple.

Tom [import]uid: 7559 topic_id: 31024 reply_id: 124485[/import]

Ok, thanks Tom and Brent! I suppose there is no way of avoiding Apple’s PNGCrush for PNG-8 files? Or is there?

Presumably PNGCrush selects the files based on the .png extension. So perhaps I could skip it by renaming the extension of my PNG-8 files to something else (for example to ._png). Would these renamed files work? I think I’ll have to test this when I get home. [import]uid: 13507 topic_id: 31024 reply_id: 124488[/import]

what you may try to reduce the filesize, is to reduce the colors used in your image and saving it to png24.
In photoshop you use image->adjustments->posterize, then select an amount that satisfies you. As you will see the filesize can be reduced dramatically in this way :slight_smile: [import]uid: 44010 topic_id: 31024 reply_id: 124491[/import]

Thank you for your suggestion. I will definitely try it. I already tried to reduce the color amount by changing the color space to indexed (256) and then back RGB. This reduced the color amount to 256, but the file size was reduced only a little. [import]uid: 13507 topic_id: 31024 reply_id: 124502[/import]