× Initiating database migration review
× Database migration started
 
 
 

Image optimizations

 
 
I will base the examples on the image below. It includes very sharp text and raster image and it will be saved at 512x512 pixels:
 

 
Next I will detail the saving options, the pros and cons of using each and also some recommendations based on the desired result.
 
 

Format

Size

Pros

Cons

PNG24

97KB

Both image and text are crystal clear.

Big file size

PNG24 (Posterized)

65KB

Clear text

A bit smaller size

The image loses color information

PNG8

40KB

Smaller size

One image. one model

Image colors are limited.

Cannot use noise diffuse due to text and no diffuse is bad for the image

JPG (60%)

36KB

Smaller size

One image. one model

A lot of artefacts that make the text look bad

PNG8 for text

JPG for image

5.8+18.6KB

= 24.4KB

Smallest size

Need to split image and use 2 models in code

Looks bad when fading

 
 
As expected the PNG24 format is the biggest but it does include the full spectrum.

The PNG8 does only include 256 colors at most but it is very accurate with predominant colors like the text in the image. Below on the left is the PNG24 image and on the right the PNG8. Note that there are differences but acceptable at that image size.
 

 
Using a Posterize filter (40-50 levels) on the picture alone reduces the file size considerably but there is still the issue of losing color information while still bigger than just saving the whole image as PNG8.

JPG in this case does not offer a size reduction big enough to compensate for the artefacts that would ruin the text and sharp shapes of the picture (PNG on the left, JPG on the right):
 

 
Saving as 2 separate images and using the optimal format for each is the best option but will consume time. Also when fading in Blippar the 2 image setup will be visible at alphas other than 0 or 1. To avoid that (in this particular case of black background) the picture can have the same canvas as the image and use blend mode add.

In this particular case PNG8 is the best option if the color loss is acceptable. For an image with mostly picture content JPG would be best, for an image with few distinct colors PNG8 and for one with fine gradients PNG24

One thing to note is that PNG8 is not an option for masks that have gradients nor it should be used to replace PNG32 for its transparency.

If this blipp had many such images with various (or variable) texts it could be better to use a font and render all the texts. That in some cases makes the blipps as a whole much smaller and covers text live text changes in the blipp.