Image Optimizations

Introduction

When placing bitmap images on the page using Image Objects, PubCoder automatically renders images to optimize the project size and speed, unless option Use Original Image is selected.

Instead, images used in Image Galleries, inline with text, attached images and vector images are just copied to the export as they are, so you will have to optimize those files manually.

Optimizing Rendered Images

PubCoder will render pictures used in image objects and save them in a web-savvy format (PNG or JPEG) by default, including only the portion of the image that is visible to the user after applying crop settings, and also exporting only the necessary pixels to fully support the Pixels Density chosen by user in the project inspector.

You have different options to modify how rendering is done, you can find all of them as properties in the project inspector, at the right of your project window:

Pixels Density

Defines the pixels density of rendered images, ranging from 1x to 3x. The default for this option is 2x, meaning that an image asset used in an Image Objects of size 100x100 pixels will be rendered at 200x200 pixels: lowering the pixels density will greatly readuce the size of your export, but the display quality may be affected, especially on devices using Retina or HiDPI displays.

Here’s an example of a Retina Display (on the left) which supports a 2x pixels density versus a standard display (on the right) where pixels are visible at viewing distance. To fully use the quality of Retina and HiDPI displays, use at least a 2x pixels density.

Image Rendering Format

Defines how PubCoder decides which format to use (PNG or JPEG) when saving rendered images:

You can also tune JPEG Quality to lower the quality of rendered JPEG images. We also added an option to compress PNG images using Zopfli algorithm, but it is very slow at the moment.