Practical Information for Images in Ebooks

Practical Information
for Images in Ebooks
Copyright © 2014 Firebrand Technologies. Do not distribute or duplicate. Intended only for registered students.

Copyright © 2015 Firebrand Technologies
Formats

JPEG
• Joint Photographic
Experts Group
• *.jpeg, *.jpg
• Lossy compression
• Generation loss
• Destination format,
not origination
format
• Best for photographs

GIF
• Graphics Interchange Format
• 256 colors only
• Lossless compression algorithm was patented
(now expired)
• Made downloading larger images easier
• It is pronounced "JIF"

PNG
• Portable Network Graphics
• Replacement for GIF
• Best for text, line art, or graphics – sharp
transitions and large areas of solid color
• Lossless compression
• 24-bit RGB or 32-bit RGBA colors
• Transparency
• No CMYK support
• No animation support

TIFF
• Tagged Image File Format
• Created by Aldus, now copyrighted by Adobe
• Created for scanners, fax machines
• Flexible usage (as a container for JPEG)
• Lossless compression, no generation loss
• File size limited to 4GB

Colors

CMYK
• Cyan, Magenta, Yellow, and Key (Black)
• Also known as Four Color
• Subtractive process
• Halftoning

Halftoning

RGB
• Red, Green, Blue
• Additive process
• Device dependent
(manufacturer, time)
• RGB spaces are
generally specified by
defining three primary
colors and a white
point
• sRGB is the most
common

Converting
• Converting from CMYK to RGB is not always
easy
• Best to do it in a color managed environment
• Automated tools can cause problems
• Watch your color profiles (sRGB?)
• Test, test, test

Grayscale
• For the purposes of eBooks, 4-bit (16 color)
grayscale is the most important
• Used in E Ink screens

Color

2-bit Grayscale (4 color)

4-bit Grayscale (16 color)

Size and
Resolution

Size and Resolution
• Resolution: count of the number of pixels
(width x height)
• Pixel density: number of pixels in a specific
area (DPI)
• High DPI: greater than 200 pixels per inch
• Interpolation: pixels are doubled/quadrupled
to make an image display the same size on a
High DPI display.

The Myth of DPI
• Web/eBook design is not the same as print
• Pixel density is saved in JPG and TIFF images
• Pixel density is discarded in PNG and GIF
images
• 72 is the magic number

72
• 1737: Pierre Fournier – 1 approximate French
Royal inch = 6 pica = 72 points
• 1770: François-Ambroise Didot – redefined
the French Royal inch in the standard to match
the government's standard.
• 1886: American Point System – 0.996 inch = 6
pica = 72 points
• Digital Publishing: back to the 1-inch standard

What does it all mean?
• DPI is really not important for digital images
• Pixel size is actually the most important issue
• However, High DPI screens do allow text to be
more readable at smaller font sizes
• Retailers still recommend 300ppi or better (?)
• Interesting reading:
http://www.webdesignerdepot.com/2010/02/
the-myth-of-dpi/

Transparency

Transparency
• Allows the background behind an image to be
seen
• Can be created with varying levels
• Only possible in PNG and GIF
• Useful for some image types
• Watch out for night reading mode

Vector Graphics

Vector Graphics
• Lines are created mathematically, not with
pixels
• Infinite scaling
• No pixels = No pixelation
• Smaller file size

EPS
• Encapsulated PostScript
• Common in print design
• Build/edit in Illustrator
• Not supported in eBook formats

SVG
• Scalable Vector Graphics
• XML-based vector art
• Lines, colors, gradients, etc.
• Supported in most reading systems
• Treated the same as raster images by most
reading systems
• In EPUB 3, can be used as a Content
Document and listed in the Spine

Sources of
High Quality Images

Sources
• Public Domain
• Creative Commons
• Don't just search on Google!

Sources
• Natural Earth Data:
http://www.naturalearthdata.com/
• Morgue File: http://www.morguefile.com/
• National Park Service Digital Image Archives:
http://www.nps.gov/pub_aff/imagebase.html
• Wikimedia Commons:
http://commons.wikimedia.org/wiki/Main_Pa
ge
• Harvard information page:
http://guides.library.harvard.edu/content.php
?pid=500088&sid=4113929

Retailer
Requirements

Apple
• No more than 4 million pixels
• No text in the image
• JPEG or PNG
• RGB (prefer sRGB color space)
• Transparency when applicable
• Recommend using vh and vw values for
sizing.
• Max 10MB of image content per XHTML file
• Alt text should be usable

Amazon
• Internal cover image (metadata) is mandatory
• Internal HTML cover image is removed
• GIF, BMP, JPEG, non-transparent PNG, and
Scalable Vector Graphics (SVG)
• 300ppi recommended
• RGB – no sRGB or CMYK
• Photographs should be JPG, at least
600x800px

Amazon
• Don't use images for text unless necessary
• Captions placed below image
• Set width or height to a percentage, other to
"auto"
• Max image file size is 5MB
• File size might be adjusted by KindleGen

Kobo
• PNG, JPG, and GIF
• SVG is not supported in all systems
• RGB color model, not CMYK
• Maximum recommended file size is 3MB per
image
• Image widths in CSS should be in pixels, not
percents (but percents work…)

B&N
• None published

Google
• None published

FlightDeck Stats Report

HTML for Images

Basic HTML
<img src="images/SilverLake.jpg"
alt="Silver Lake, Chilliwack
Range, North Cascades" />
src – The image file itself
alt – A short description of the image

Image Element
• Used mostly for raster images, but can be
used to insert SVG
• Not an inline element
• Not a block element
• It is inline-block!
• Flows like text, but has width, height, etc. like
block elements

Dimensions
• width and height attributes
• Useful in web design
• Not preferred by some ebook retailers (Apple)
• Preferred by others (Amazon)
• Best to use CSS instead

Markup
<div>
</div>
<p>
</p>

The Future
• The <picture> element makes different source
files possible
<picture>
<source media="(min-width:
45em)" srcset="large.jpg">
<source media="(min-width:
32em)" srcset="med.jpg">
<img src="small.jpg" alt="A
picture of a bridge in the fog">
</picture>

Accessibility for
Images

Basics
• Do not use images for tables or textual
information
• Use SVG when necessary/appropriate
• Use descriptions and alt text
• It costs more to retrofit an EPUB file with
accessible images than it does to do it from
the beginning

HTML5 and EPUB 3
• The figure and figcaption elements
have been added to HTML5
• Only use <figure> tags for secondary
content, just like the <aside> tag is used for
secondary textual content.
• Use <figcaption>. Must be the first or last
element in the <figure> tag.

HTML5 and EPUB 3
<figure>
<img .../>
<figcaption>
<p>Figure 1.1 ...</p>
</figcaption>
</figure>

Alt Text
• "image" and similar text is useless
• If the image is purely presentational, just leave
the alt text empty
• Repeat any text found inside the image
• If the image implies text, just use that text –
e.g., a logo
• Keep the text short – 5-15 words
• Don't use alt for technical info about the
image (dimensions, etc.)

@longdesc
• Points to the location of a longer description
of the image.
• Added to HTML5 on February 26th, 2015.
• Description can be either in the same file or in
a different file.
• Only usable on images, not other elements.

HTML5 and EPUB 3
<figure>
<img … longdesc="#img-desc"/>
<figcaption>
<p>Figure 1.1 …</p>
<aside id="img-desc">
<p>…</p>
</aside>
</figcaption>
</figure>

WAI-ARIA
• WAI-ARIA: Web Accessibility Initiative –
Accessible Rich Internet Applications Suite
• Defines a way to make Web content and Web
applications more accessible to people with
disabilities.
• Applies to EPUB 2 and EPUB 3 equally

ARIA-describedby
• The aria-describedby attribute
• Identifies the element that describes the
object.
• For images, this points to a long description
section.
• <aside> should be used for these extended
descriptions. Note that <details> has been
deprecated in HTML5, and may not be
advisable until later.

HTML5 and EPUB 3
<figure>
<img … aria-describedby="img-desc"/>
<figcaption>
<aside id="img-desc">
<p>…</p>
</aside>
</figcaption>
</figure>

ARIA-describedat
• The aria-describedat attribute
• Identifies an external location that describes
the object.
• New in EPUB 3.0.1
• Point to your website. Ensure the link will
work for the life of the eBook.

HTML5 and EPUB 3
<figure>
<img … aria-
describedat="http://example.com/
mybook/figure1-1.html"/>
<figcaption>
</figcaption>
</figure>

@longdesc or ARIA?
• Both are technically supported
• @longdesc not included in EPUBCheck
support yet
• ARIA allows accessibility on non-image
elements like tables
• With aria-describedat support, ARIA now has
the same linking options as @longdesc.
• Conclusion: ARIA

CSS

CSS
• Welcome to the world of EPUB testing
• Nothing is tied and true
• Different reading systems have different
requirements
• Different image types have different
requirements
• Baldur has an interesting argument:
studiotendra.com/2013/10/02/just-say-no-to-
ebook-css-and-js/

Typical Image Types
• Photographs
• Charts/Graphs
• Line art
• Logos
• Cover images
• Section breaks
• Marketing images (small covers)

Image with Caption
• Common for many different types of images
• Captions flowing to the next page is a problem
everyone encounters
• Old solution was to constrain the image itself
to a percentage of the height
• This only works in some systems, not all

Image Styling in iBooks
• Images are not affected by percentages set on
the image itself, only by percentages set on
the containing div.
• However, containing div cannot be
constrained to the page dimensions.
• Viewport sizes (vh/vw) do what you would
expect percentages do to on images

Image Styling in Kindle
• Note that if you are using EPUB3, the Kindle
system requires type="text/css" in the
CSS meta tag
• max-width and max-height are not
supported and are removed by KindleGen
• Some Kindle systems support percentages, iOS
supports viewport settings

Image Styling in Google Play
• Like iBooks, percentages not supported on
image elements themselves, only on
containers.
• Viewport dimensions work fine

Image Styling in Kobo
• Kobo's specs say to use pixels for image
scaling
• Sideloading is gives different results than
ingested files!
• Viewport dimensions work in all except Kobo
iOS app
• Pixel dimensions don't work at all, despite the
recommendation

Image Styling in B&N
• Percentages work when applied to image tags
directly or to container divs
• Viewport dimensions do not work

Media Queries
• Not very consistent
• Lots of issues
• Some devices break when you apply them
• Not recommended in general
• Kindle-specific media queries may be helpful,
but they don't seem to work well in Kindle for
iOS
• Best resource:
http://help.creatavist.com/ebook:css

Summary
Percentages Viewport
ADE3
Bluefire Reader iOS and
Android
Kindle Keyboard
Kindle Fire HDX
Kindle Android
Nook Simple Touch
Nook HD
Nook HDplus
ADE4
iBooks 4
Google Play iOS
Google Play
Kindle iOS
Kobo Touch
Kobo Android
Kobo Aura
Neither
iBooks 3
Kindle Paperwhite
Kobo iOS

Cross Platform Solution
http://github.com/jstallent/ImagesSingleFile
<div class="img_fs_cap">
<div class="img_pct"><img id="img_vh"
src="images/portrait.jpg"
alt="portrait test image" /></div>
<p class="caption">Single File
Solution: Portrait Full-screen Image
with Caption. Lorem ipsum dolor sit
amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
</div>

Cross Platform Solution
div.img_fs_cap {
text-align: center;
margin: 0;
page-break-inside: avoid;
}
div.img_pct {height: 80%;}
img#img_vh {height: 80%;}
img#img_vh:only-of-type {height:
80vh;}

iBooks 4

Kindle 3 (Keyboard)

Kindle Android

Kindle Paperwhite

Kobo Android

Google Play Android

Bluefire Reader

Nook HD

Cover Images

Cover Images
• Cover images are required by all major
retailers
• Two locations to place a cover image:
– Meta tag in the OPF
– HTML file in the EPUB
• Amazon does not like the HTML cover and
KindleGen will remove it from the file

Cover Images
• DO NOT USE SVG WRAPPERS
• Do not apply a background color
• Make the image dimensions as large as you
can
• Interior cover image is shown in the user's
library

Automation

Automation
• Important tool for any eBook developer
• Can be done in a variety of ways
• With great power comes great responsibility!

Options
• Photoshop
• GIMP
• Tons of image conversion tools online
• ImageMagick

ImageMagick
Pros:
• Powerful
• Open Source
Cons:
• Command Line
• Takes some time to learn
• Not easy to install on Mac

ImageMagick
• Simple option for re-scaling images to less
than 4 million pixels
convert beach.jpg -resize
4000000@^> beach_new.jpg
Batch Script:
convert %~n1%~x1 -resize
4000000@^> "%~n1_new%~x1"

Resources

Resources
WebAIM
http://webaim.org/techniques/screenreader/
Diagram Center
http://diagramcenter.org/
Poet Accessibility Tool
https://diagram.herokuapp.com/
NCAM
http://ncam.wgbh.org/

Resources
IDPF Accessibility Guidelines
http://www.idpf.org/accessibility/guidelines/
Images Test File
https://github.com/jstallent/ImagesSingleFile

Resources
• Natural Earth Data:
http://www.naturalearthdata.com/
• Morgue File: http://www.morguefile.com/
• National Park Service Digital Image Archives:
http://www.nps.gov/pub_aff/imagebase.html
• Wikimedia Commons:
http://commons.wikimedia.org/wiki/Main_Pa
ge
• Harvard information page:
http://guides.library.harvard.edu/content.php
?pid=500088&sid=4113929

Practical Information for Images in Ebooks

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Practical Information for Images in Ebooks

Semelhante a Practical Information for Images in Ebooks (20)

Mais de BookNet Canada

Mais de BookNet Canada (20)

Último

Último (20)

Practical Information for Images in Ebooks