practical information for images in ebooks - ebookcraft 2015 - joshua tallent

Practical Information for Images in Ebooks

Copyright © 2014 Firebrand Technologies. Do not distribute or duplicate. Intended only for registered students.

http://ebookarchitects.com/

http://firebrandtech.com/

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_Page

• 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/

http://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/

http://webaim.org/techniques/screenreader/

http://diagramcenter.org/

https://diagram.herokuapp.com/

http://ncam.wgbh.org/


Resources

IDPF Accessibility Guidelines http://www.idpf.org/accessibility/guidelines/

Images Test File https://github.com/jstallent/ImagesSingleFile

http://www.idpf.org/accessibility/guidelines/

https://github.com/jstallent/ImagesSingleFile

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_Page

• Harvard information page: http://guides.library.harvard.edu/content.php?pid=500088&sid=4113929

practical information for images in ebooks - ebookcraft 2015 - joshua tallent

Education