WebP format for iOS and android

Always using it first :slight_smile: and better just any pngquant app like ImageOptim or Pngyu.

So what is a difference (size, quality) between WebP and png 8bits for your game resources?
WebP 6.6Mb
png 8 bits ?
When I checked last time my game resources png 8bits was the best.

Oh, I mean using tinypng like compression for my source png files, which later I’m using for packing to
WebP or PVR. I never used png for sprite sheets. But I can test this.

Note, yesterday I’ve changed some images resources, so tested again for both formats.

WebP
RGBA8888
Lossless

5.5 MB


PNG-8(indexed)
RGBA8888
Png Opt Level 1(writes indexed 8bit files if possible)

5.1 MB


Thats interesting :slight_smile: After this test I’ve decided also do test with ALPHA_INTENSITY because my source graphics in grayscale, so it’s perfectly fits my needs.

Results:

WebP
ALPHA_INTENSITY
Lossless

7.1Mb


PNG-8(indexed)
ALPHA_INTENSITY
Png Opt Level 1(writes indexed 8bit files if possible)

5.1 MB

Now, I’m rethinking of using format of textures for my game :smiley:

I will help you :slight_smile: :

  1. Use whenever possible png-8.
  2. If image quality is not good enough use something else (for me the only exception is so far: big image e.g. background image with gradients or photos of e.g. blue sky)

Advantages of png-8:

  1. small
  2. fast
  3. works everywhere Android/iOS/Mac/Win/Linux

Thats nice solution for the topic lol, but it is. I like it.

Upd. I forgot to test RAM usage… Will update it soon.


And so, summing of all information of RAM and file size:

  • Format - RAM - Filesize:

  • WebP (RGBA8888), 126.5Mb, 5.4Mb
  • WebP (RGBA4444), 79.1Mb, 12.6Mb
  • WebP (ALPHA_INTENSITY, only gray scale, not for other games), 79.6Mb, 7.1Mb
  • PNG-8 (RGBA8888), 126.5Mb, 5.1Mb
  • PNG-8 (ALPHA_INTENSITY), 82.2Mb, 5.1Mb
  • PVR (RGBA8888) , 126.5Mb, 10.8Mb
  • PVR (RGBA4444) , 79.2Mb, 15.6Mb
  • PVR (ALPHA_INTENSITY) , 79.8Mb, 9.3Mb

I never used png before, but as I remember since cocos2d 0.9x there was some problems, that why I decided not to use it. And as you see, PNG-8 (RGBA8888) using same and maximum RAM as any 8888, but one of the idea is have a format which uses less RAM… This I’m talking about usual game graphics, because in my case, I can use PNG-8 with ALPHA_INTENSITY, because my graphics are grayscale.

@CrazyHappyGame: TexturePacker already uses pngquant + pngopt. Might be that you can win 1 or 2% with some other compressor… but it’s a question if it’s worth the effort.

I really wonder why you are so surprised about PNG-8… it’s what I’ve told you 2 days ago… just scroll up in this thread…

106.972 RGBA8888 png (8 bit)
185.908 RGBA8888 webp (lossless)

Use Texture2d::setDefaultAlphaPixelFormat](Texture2D::PixelFormat) with Texture2D::PixelFormat::RGBA4444 before loading the sprite sheet. See Documentation.
This discards the lower bits of the color pixels and loads your sprite sheets as RGBA4444 - saving you 50% of RAM.

Make sure to also set RGBA4444 in TexturePacker’s pixel format. Also enable dithering. If you don’t use dithering you’ll get banding artifacts in gradients.

RGBA4444 + PNG-8 combined might work - but not in all cases. The problem is that these are 2 completely different concepts: PNG-8 selects 256 colors out of 32bit. It’s completely free in the color choice. E.g. it might even pick a color that’s not one of your images colors. RGBA4444 selects a fixed set of colors out of the color space. It’s not free in choosing which colors…

My surprise is about filesize. I don’t understand that table you provided, RAM use or filesize, Mb or Kb etc.

From what I know, PNG will use same RAM as any 8888 and thats results in my tests.

This is what I never used and know about it. So, I can set PNG-8(RGBA8888) and using this command - get same usage of RAM as with 4444 without losing any quality(in cocos2d-x) ?

We are talking now about PNG-8? So it’s can be only 8888…

Ok, now about. So, for the most games thats impossible I think, quality will be awful. And thats why we back to 8888 and so back to statement - PNG-8(bit) using same RAM as 8888. Am I right?

Interesting, probably @zhangxm can answer, can in cocos2d-x be added new format, to use PNG-8 colors? Or any other of the engine developers.

Short overview over the limitation of the image formats:

Gradient with RGBA8888:
gradient

Gradient in RGB4444 without dithering (banding artifacts):
banding-artifacts

Gradient in RGB4444 with dithering:
dithering

Gradient in PNG-8 (perfect, since only 256 colors are used) - RGBA8888
banding-artifacts

Gradients in RGBA8888:
colors

Limits of PNG-8 (too many different colors in 1 image: banding)
banding-artifacts

RGBA4444 with dithering:
banding-artifacts

Maybe it’s indeed an option to use indexed mode in OpenGL? GL_PALETTE8_RGBA8_OES is at least defined in the OpenGL specification… @zhangxm ?

2 Likes

RGBA8 this would be cool.

Currently there are some A8, //! 8-bit intensity texture it’s not that as I understand?

/** @typedef Texture2D::PixelFormat
     Possible texture pixel formats
     */
    enum class PixelFormat
    {
        //! auto detect the type
        AUTO,
        //! 32-bit texture: BGRA8888
        BGRA8888,
        //! 32-bit texture: RGBA8888
        RGBA8888,
        //! 24-bit texture: RGBA888
        RGB888,
        //! 16-bit texture without Alpha channel
        RGB565,
        //! 8-bit textures used as masks
        A8,
        //! 8-bit intensity texture
        I8,
        //! 16-bit textures used as masks
        AI88,
        //! 16-bit textures: RGBA4444
        RGBA4444,
        //! 16-bit textures: RGB5A1
        RGB5A1,
        //! 4-bit PVRTC-compressed texture: PVRTC4
        PVRTC4,
        //! 4-bit PVRTC-compressed texture: PVRTC4 (has alpha channel)
        PVRTC4A,
        //! 2-bit PVRTC-compressed texture: PVRTC2
        PVRTC2,
        //! 2-bit PVRTC-compressed texture: PVRTC2 (has alpha channel)
        PVRTC2A,
        //! 4-bit PVRTCII-compressed texture: PVRTCII4 (has alpha channel)
        PVRTCII4,
        //! 2-bit PVRTCII-compressed texture: PVRTCII2 (has alpha channel)
        PVRTCII2,
        //! ETC-compressed texture: ETC
        ETC,
        //! ETC2-compressed texture: ETC_RGB
        ETC2_RGB,
        //! ETC2-compressed texture: ETC_RGBA
        ETC2_RGBA,
        //! ETC2-compressed texture: ETC_RGBA1
        ETC2_RGBA1,
        //! S3TC-compressed texture: S3TC_Dxt1
        S3TC_DXT1,
        //! S3TC-compressed texture: S3TC_Dxt3
        S3TC_DXT3,
        //! S3TC-compressed texture: S3TC_Dxt5
        S3TC_DXT5,
        //! ATITC-compressed texture: ATC_RGB
        ATC_RGB,
        //! ATITC-compressed texture: ATC_EXPLICIT_ALPHA
        ATC_EXPLICIT_ALPHA,
        //! ATITC-compressed texture: ATC_INTERPOLATED_ALPHA
        ATC_INTERPOLATED_ALPHA,
        //! Default texture format: AUTO
        DEFAULT = AUTO,
        
        NONE = -1
    };

AI8 is a grayscale image (color intensity) + alpha. You can only display grays with it.

Palette is different. It means that the 8 bit value is interpreted as index in a color table. You can use it to display different colors.

Anyone ? ? ?