A Little Technical Background About Images

This section is a short discussion on the various properties of image formats and how they affect image quality, file size and memory consumption.

If you want some handy PNG with transparency optimization tools they are listed at the bottom of the page.

Display technology is clever stuff but it helps to understand something about how it works when making production decisions on image processing and formats.

There are literally hundreds, if not thousands, of image formats available, and each format can have multiple methods to pack the image information. Fortunately in our Web/Digital content oriented world the usable formats is reduced to just three (JPG, PNG, GIF) and one assistant print format on the edges (TIF/TIFF).

Today there are very few computers or devices that do not have displays that support full true-color (Microsoft) or millions-of-colors (Apple). Therefore it is easy to treat all images as millions of colours, or 24 bit images.

Many people moving into digital book production come from the print world. As a result e-book image production is seen as pretty much the same as print, is relaxed, and done with a print-like or web-like approach to producing images. These other delivery technology skills are fine but there are refinements that can be added for digital books, especially for mobile delivery.

There is a better way

When talking about the delivery of large and complex content to off-line reading systems like AZARDI Desktop, AZARDI Android or AZARDI IOS ▶ it is important to constantly consider package-size, bandwidth and device limitations.

Image intense textbook packages can typically be reduced by over 60% in total file size with just a little thought and care in production.

Bytes Per Pixel on the Screen

There are four currently common ways images can be stored and displayed on a screen with standard "web" image formats. (Please note we are not referencing TIF/TIFF images as they are not usable with Internet technologies unless converted or used with plugins.)

The image formats that can be reasonably used with Internet technology are JPG, PNG and GIF. Each of these has different capabilities.

1. 1-bit per pixel. The images are black and white. This can be stored and displayed with PNG-256 and GIF where the palette is set to two colours (black and white).
2. As a one byte per pixel (8 bits). The images can be displayed with a 256 colour palette. This is known as an INDEXed image. This applies to PNG-256 and GIF. 8 bit PNG images can use one colour for transparency.  8 Bit images are also used for grayscale PNG and grayscale JPG images.
3. As two bytes per pixel (16bits). The images can be displayed with a 256 colour palette and full alpha transparency.  These can be incredibly useful when icons and images need to be used over different backgrounds.
4. As three (3) bytes per pixel (24 bits). The images can be displayed with 16 million colours. This bit depth can be store and displayed with PNG and JPG. This bit depth is the most common format used for photographs.
5. As four (4) bytes per pixel (32 bits). This can only be stored and displayed with PNG. Three bytes are used for the RGB colours and a fourth byte is available for the alpha channel transparency effects.

Advantages of Low Byte Images

Indexed color images save a lot of memory, storage space, and transmission time. When thinking about creating textbooks with perhaps hundreds of images, if the images are suitable for conversion to index colour do it. Don't hesitate.

Typically you can think of indexed images being one-third the size of true-colour or RGB images. With a few more palette manipulation techniques the package size can be reduced even further.

Disadvantages of Low Bytes

The main disadvantage of using indexed color is the limited set of simultaneous colors per image. However this is not a disadvantage for image that are created with lesser colours. K-12 education is full of such images, or more correctly illustrations.

When an indexed image opens it uses just one byte per pixel. A 100px X 100px icon will use just 10,000 bytes of memory. It will also load very fast.

When an RGB image opens it uses three (3) bytes per pixel in memory. The same icon will use 30,000 bytes of display memory.

Note: Computer systems have a fixed memory allocation for the screen. The optimization of image size and bit depth is for getting the images to the screen rather than what happens on the screen.

Lossless and Lossy Storage

The JPEG format is lossy.

The PNG format is lossless.

This should be taken into account both in production and in format packaging.

The JPEG (Joint Photographic Experts Group) format can produce a smaller file than PNG for photographic (and photo-like) images, since JPEG uses a lossy encoding method specifically designed for photographic image data. That means images that are typically dominated by soft, low-contrast transitions (clouds, landscapes, faces, etc.), and an amount of noise or similar irregular structures (grass, leaves, trees, etc.).

Using PNG instead of a JPEG for such images would result in a significant increase in filesize with negligible gain in visible quality.

But if you are processing and storing images that contain text, line art, or graphics – images with sharp transitions and large areas of solid color – the PNG format can compress image data significantly more than JPEG can, with higher quality outputs.

JPEG produces noticeable visual artifacts around high-contrast areas and this is an important consideration when compressing images for packaging.

Because JPEG uses lossy compression, it also suffers from generation loss, where repeatedly encoding and decoding an image progressively loses information and degrades the image. Because PNG is lossless, it is suitable for storing images to be edited. An image can be stored losslessly and converted to JPEG format for packaging and distribution. This means there is no image quality loss over saving generations.

Image Transparency

PNG supports transparency.

JPG does not support transparency.

It can be very valuable to create line-art/illustrations with transparent backgrounds. This means it can be easily placed onto coloured backgrounds. This especially works for icons and symbols, but also images that are used in an interactive way where the background may change colours to give the user feedback.

When a PNG INDEX image is used with transparency one colour is reserved for the transparency. That means the edges of the image can loose their softness. Techniques to handle this can be developed and used. With the right conversion tools an indexed PNG image can also have a full alpha channel.

When a PNG RGB image is used with transparency it becomes an RGBA image and used one more byte per image pixel. That is 4 bytes per pixel displayed on the screen.

Using a colour INDEX image with transparency therefore has significant file-size advantages over an RGBA PNG with transparency.

Handling PNG Compression

Indexing PNG images is only a lossy compression technique if the image has more than 256 colours. There is a lot a variation with PNG compression between Image applications. If you are using Adobe's Photoshop it can load images up with un-necessary and large amounts of metadata and color-correction data unless you are careful.

If you are producing PNGs with Adobe Photoshop use the Save for Web feature to avoid the additional load. This also allows PNG/8 use.

Even better if you are stuck with Photoshop get the ImageAlpha plugin mentioned below or use one of the other tools post-image production.

Seriously Useful PNG Tools for Textbooks

Use PNG compression where you can. The following tools will enable you to get the smallest possible image from a PNG that needs transparency. 

The way to use these tools with any PNG that needs size optimization AND transparency is:

1. Create you image as an RGB PNG with transparency with the graphic application of your choice ( GIMP, Paint.NET, Photoshop, etc.)
2. Save the image as RGB PNG with Transparency.
3. Open the image in any of the following applications to have it instantly palette and size optimized to perfection. That means the colour palette will be reduced to less than 256 colours and all required levels of transparency will be applied.
4. For simplicity of use and learning TinyPNG is a great starting point.

Color Quantizer (Windows) Site is in Russian, application is great.

Pngyu Window and Mac

TinyPNG (on-line). Super fast and efficient.

ImageAlpha for Mac and Photoshop plugin

And finally ....

pngquant (Unix). This is the mother library of all the other applications and is released on a BSD-like license.

Posted by Richard Pipe