Flat colour images means illustrations that are coloured and can be optimized as indexed PNG images using palettes.Updated: 2014-06-09
Flat colour images means illustrations that are coloured and can be optimized as indexed PNG images using palettes. Typically that means they have limited or no gradients, and have fewer than 256 discernable colours. This will reduce image file sizes by more than 66%. It will also mean the image uses less memory when loading.
Indexed images can also have transparency applied when appropriate to make them reusable on multi-coloured backgrounds, or where interactivity may change the background colour behind an image.
Remember that you are producing images for a wide range of screen and viewport sizes and resolutions. It is pixels that matter for standard resolution devices. High resolution devices will take care of their own presentation in the mobile AZARDI readers.
Our recommendations is that landscape images that are required to cover the viewoport width in landscape are processed at 1000px wide. If images are portrait they should be constrained to 800px in height.
If you are dynamically sizing images (for example using the IGP:Digital Publisher % width tools) you can make them larger.
Here are some sample images that are ideal candidates for processing as indexed images with reduced palettes.
Illustration 128 colours
Notice that none of the images shown actually needed 256 colours in the palette to accurately reproduce. The palettes have been reduced accordingly. It all shaves a few Kilobytes of the image size.
Creating good Indexed images takes just a little observation and practice. Sometimes there is a few "undo" operations if you are trying to get an image to the smallest size.
Let's take a look at a simple graph in the first instance.
The PDF extracted JPG image is large and uncompressed.
When converting a printed text book that uses lineart or bi-coloured images ideally you are colouring the images.
If the content is suitable for flat-colouring or limited colours it is relatively smart to do the work taking into account the file size advantage of Indexed images. That means keep colouring and shading flat without gradients to the extent possible unless you are going to save the images as JPGs.
These are the ways you can get from your print PDF into your image processing application:
All methods have their time and place depending on how the source PDF has been constructed, the size of the image on the PDF and other considerations. There are very few automated shortcuts with these procedures.
This method works if the PDF has high-resolution images that are actually exportable. Check this problem list:
Once the images are out and they are of a suitable resolution you can get processing. But compromise with care, with your eyeballs on high-alert and a very clear understanding of the target pixel size for each image.
If the source is a print resolution PDF this method is generally workable for all photographs, RGB, CMYK and grayscale. If you don't use a correct exporting application your CMYK images will probably carry some CMYK hue and will need colour correction to sRGB.
If the lineart in the source book is an EPS you will have open the PDF and convert the page as an image. So here we go.
If the page has an embedded image the image will probably come in with anti-aliased edges. You can check this by zooming in 200%.
To colourize the image you want a black and white image. If the picture has substantial and thick lines you can covert it to index - Black and white, and then back to RGB. The image will be ready to paint.
However if the image has lighter lines or shading you need to use levels to remove the gray shades. The quick and cruel way is to just key the black level to 254. If you zoom in on the lines there should be no anti-aliased gray anywhere. This will give the thickest lines.
You can make the black lines thinner by using the Level-line technique at for example 127 (black) and 128 (white). The output will be black and white, but the lines will be thinner. Play with the numbers to get the results you need. Too much black can be ugly in the final image.
Your print book may have small icons that come out rather small with pixelated edges using the above techniques. A process of last resort (We are assuming you have at least a 1260 or 1440 wide screen) is the print screen method.
Your icon has to be able to stand up to being enlarged three times and still look pretty good. If you are putting an animation effect on the icon you will want to make it look better.
That's it. With a bit of practice all this resizing stuff just takes a few minutes and your delivered file is as small as it can be and looks great.
To convert an image to black and white you can just convert it to and indexed black & white image and then back to gray. That works sometimes but the lines may end up too thick and black and not be a line-art representation of the antialiased line. .
A better method is to set the white level to a number and the black level one unit less.
If you go White=256 Black=255 you will get the thickest lines. If you go White 128 Black 127 you will probably get very elegant width lines.
When resizing images up and down don't use an even multiple of the image dimensions.
Eg: The source image is 500px wide. Don't use 1000px or 1500px. Use something like 1897px or 1438px. This will force the resize anti-aliasing to generate more gray tones to play with on the black lines.
Posted by Richard Pipe