Basic Images Styles in EPUB

The challenge in designing eBooks are the unknowns. It’s impossible to know what devices your readers will use and these uncertainties stack up. Some of these elements are:

• Screen size, resolution, and density. I.e., Dots Per Inch (DPI) or Pixels Per Inch (PPI);
• The margins and visible page size;
• Font type, spacing, and sizes;
• Zoom factor; and
• Orientation of the device.

It’s important that an EPUB reflow its content to adjust to changes in any of the above elements. A book that reflows ensures a quality reading experience for the reader.

Skip the Tutorial

Tutorial

To overcome these elements, a designer needs to:

Embed High-Quality Images

Images are more than their resolution. Displays such as smartphones (250+ DPI) or E-Ink devices (167-300 DPI) are a higher density than most monitors (72+ DPI). To visualise how an image displays based on varying screen sizes and density, let’s consider how a HD image (1920×1080 at 72 DPI) displays on various screens.

Visually it’s more striking.

As your screen density increases, the optimal display size drops. An image optimised for 4” x 6” on a 96 DPI would show up as a 0.64” x 0.8” on a 600 DPI smartphone or tablet. Any attempt to make it look bigger results in a blurred and pixelated image, which is suboptimal for the reader.

The workaround is to provide image optimised for 300 to 600 DPI, which incidentally works best for print. The rendering engine scales down images and maintains clarity, whereas scaling up results in blurred images. When a reader taps on the image, they can further zoom in for greater detail.

Relative Over Strict Size Definitions

With all the unknowns, it’s impossible to tell how an image displays for a reader. Specifying that a cover shall be displayed as X width by Y height might cause:

• The cover displaying on a page by itself leaving large amounts of white space;
• The cover not displaying at all; and
• The cover being so small that the reader cannot see it.

Relative dimensions, normally shown as percentages, ensures that the images are displayed and positioned predictably. If the user changes fonts, sizes or changes devices, the images will re-flow to maintain a consistent look and feel.

While relative sizes do not solve all problems, there is only so much that can be done without resorting to scripts, which is currently not an option.

Consider Images that Reflow

Certain images are designed to re-flow automatically and effectively have no resolution, these are known as Vector Graphics. However, Scalable Vector Graphics (SVG) are only officially supported in the EPUB version 3 specification. This limits support to newer devices, so readers with older Nook, Kindle, and Kobo E-Ink readers may not be able to access the content.

The advantages of using SVGs where possible are:

• Images scales to any resolution;
• Image sizes, on average, are smaller; and
• Image styles typically limited to line art, clip art, or diagrams.

It’s possible to create intricate images and save them as a SVG. However, the rendering engines may not support the effects. The designer may need to rasterize effects to ensure consistency, a process that re-introduces image limitations detailed above.

A similar process must be done prior to submitting covers to Kindle Direct Publishing, even if you provide a Portable Document Format (PDF) with a SVG embedded. To ensure consistency, it may be prudent to convert to an optimised image.

Make Use of ALT Tags

In the worst case scenario the image will not display. Making use of the ALT tag will display text in cases where the image will not show. ALT tags may also be used to search for specific images within the code.

Right to the Point

To start the process, add the following CSS styles to your EPUB‘s stylesheet. This document is normally named stylesheet.css in a Calibre generated eBook.

 .imageChapter {
  float: none;
  width: 100%;
 } 

 .imageDivider {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
  width: 40%;
  object-fit: contain;
 } 

 .imageBook {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
  width: 45%;
  object-fit: contain;
 } 

 .imageEmoji {
  height: 1em;
  object-fit: contain;
 }

Chapter Art

Chapter art is displayed at the top of the first page. You want the image to take up the full width of the available space.

<body>

  <div>

    <img id="chapter-17" alt="High Water Mark by Evelyn Chartres"
     class="imageChapter" src="Header_Mermaid.svg">

  </div>;

  <h2>CHAPTER 17</h2>

  <p class="blockSubtitle">ALCOHOL AND WINGS</p>

Example

Image Divider

Image dividers are just images that, and are used instead of the text-based variants. You want these to be centred and sized big enough to be visible on all displays. The example provided will display at 40% of the display width.

<body>

  <h2 id="high-water-mark">HIGH WATER MARK<h2>

  <p class="blockCenter">“<em>When humanity has been driven into
    the sea, what lurks above the waves</em>
    <span style="font-weight: 400;">”</span>?</p>

  <div>

    <img alt="High Water Mark by Evelyn Chartres"
     src="Featured_High_Water_Mark.jpg"
     title="High Water Mark by Evelyn Chartres"
     class="imageBook">

  </div>

  <p>Anna is a humanoid mermaid that spends her days with...</p>

Example

Cover Images

Similar to the above, except it focuses on book covers. These images will centre themselves on the screen and take up 45% of the display width.

<body>

  <h2 id="high-water-mark">HIGH WATER MARK<h2>

  <p class="blockCenter">“<em>When humanity has been driven into
    the sea, what lurks above the waves</em>
    <span style="font-weight: 400;">”</span>?</p>

  <div>

    <img alt="High Water Mark by Evelyn Chartres"
     src="Featured_High_Water_Mark.jpg"
     title="High Water Mark by Evelyn Chartres"
     class="imageBook">

  </div>

  <p>Anna is a humanoid mermaid that spends her days with...</p>

Example

Display Emoji Images

Emoji images can be included within a manuscript to better approximate digital communication. E.g., Text messaging.

These images appear in-line with the text and are restricted by the height of the line. That’s why the height is limited to 1 em, which is precisely one line high, no matter the font or size specified by the reader.

  <p>Evelyn realised what was going on.</p>

  <p>Is everything alright?” Evelyn asked.</p>

  <p class="smsThem">Elizabeth: F***! My <img class="imageEmoji"
    alt="[Pile of poo emoji]" src="Emoji_Pile_of_Poo.svg"> boss
    forgot to mention that I’d be stuck here past midnight!
    <img class="imageEmoji" alt="[Face with symbols on mouth
    emoji]" src="Emoji_Face_with_Symbols_on_Mouth.svg"/></p>

  <p class="smsMine">Clara: What? How? <img class="imageEmoji"
   alt="[Crying face emoji]" src="Emoji_Crying_Face.svg"/></p>

  <p class="smsThem">Elizabeth: Dunno. So, don’t wait up...</p>

Example

That’s it!

Basic Images Styles in EPUB by Evelyn Chartres is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.