Post on 14-Jul-2015
transcript
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
Copyright © 2015 Firebrand Technologies
JPEG
• Joint Photographic Experts Group
• *.jpeg, *.jpg
• Lossy compression
• Generation loss
• Destination format, not origination format
• Best for photographs
Copyright © 2015 Firebrand Technologies
Copyright © 2015 Firebrand Technologies
GIF
• Graphics Interchange Format
• 256 colors only
• Lossless compression algorithm was patented (now expired)
• Made downloading larger images easier
• It is pronounced "JIF"
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
Colors
Copyright © 2015 Firebrand Technologies
CMYK
• Cyan, Magenta, Yellow, and Key (Black)
• Also known as Four Color
• Subtractive process
• Halftoning
Copyright © 2015 Firebrand Technologies
Halftoning
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
Grayscale
• For the purposes of eBooks, 4-bit (16 color) grayscale is the most important
• Used in E Ink screens
Copyright © 2015 Firebrand Technologies
Color
Copyright © 2015 Firebrand Technologies
2-bit Grayscale (4 color)
Copyright © 2015 Firebrand Technologies
4-bit Grayscale (16 color)
Copyright © 2015 Firebrand Technologies
Copyright © 2015 Firebrand Technologies
Copyright © 2015 Firebrand Technologies
Size and Resolution
Copyright © 2015 Firebrand Technologies
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.
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
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/
Copyright © 2015 Firebrand Technologies
Transparency
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
Vector Graphics
Copyright © 2015 Firebrand Technologies
Vector Graphics
• Lines are created mathematically, not with pixels
• Infinite scaling
• No pixels = No pixelation
• Smaller file size
Copyright © 2015 Firebrand Technologies
EPS
• Encapsulated PostScript
• Common in print design
• Build/edit in Illustrator
• Not supported in eBook formats
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
Sources of High Quality Images
Copyright © 2015 Firebrand Technologies
Sources
• Public Domain
• Creative Commons
• Don't just search on Google!
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
Retailer Requirements
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
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…)
Copyright © 2015 Firebrand Technologies
B&N
• None published
Copyright © 2015 Firebrand Technologies
• None published
Copyright © 2015 Firebrand Technologies
FlightDeck Stats Report
Copyright © 2015 Firebrand Technologies
HTML for Images
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
Markup
<div>
<img src="images/SilverLake.jpg"
alt="Silver Lake, Chilliwack
Range, North Cascades" />
</div>
<p>
<img src="images/SilverLake.jpg"
alt="Silver Lake, Chilliwack
Range, North Cascades" />
</p>
Copyright © 2015 Firebrand Technologies
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>
Copyright © 2015 Firebrand Technologies
Accessibility for Images
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
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.
Copyright © 2015 Firebrand Technologies
HTML5 and EPUB 3
<figure>
<img .../>
<figcaption>
<p>Figure 1.1 ...</p>
</figcaption>
</figure>
Copyright © 2015 Firebrand Technologies
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.)
Copyright © 2015 Firebrand Technologies
@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.
Copyright © 2015 Firebrand Technologies
HTML5 and EPUB 3
<figure>
<img … longdesc="#img-desc"/>
<figcaption>
<p>Figure 1.1 …</p>
<aside id="img-desc">
<p>…</p>
</aside>
</figcaption>
</figure>
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
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.
Copyright © 2015 Firebrand Technologies
HTML5 and EPUB 3
<figure>
<img … aria-describedby="img-desc"/>
<figcaption>
<p>Figure 1.1 …</p>
<aside id="img-desc">
<p>…</p>
</aside>
</figcaption>
</figure>
Copyright © 2015 Firebrand Technologies
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.
Copyright © 2015 Firebrand Technologies
HTML5 and EPUB 3
<figure>
<img … aria-
describedat="http://example.com/
mybook/figure1-1.html"/>
<figcaption>
<p>Figure 1.1 …</p>
</figcaption>
</figure>
Copyright © 2015 Firebrand Technologies
@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
Copyright © 2015 Firebrand Technologies
CSS
Copyright © 2015 Firebrand Technologies
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/
Copyright © 2015 Firebrand Technologies
Typical Image Types
• Photographs
• Charts/Graphs
• Line art
• Logos
• Cover images
• Section breaks
• Marketing images (small covers)
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
Image Styling in Google Play
• Like iBooks, percentages not supported on image elements themselves, only on containers.
• Viewport dimensions work fine
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
Image Styling in B&N
• Percentages work when applied to image tags directly or to container divs
• Viewport dimensions do not work
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
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>
Copyright © 2015 Firebrand Technologies
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;}
Copyright © 2015 Firebrand Technologies
iBooks 4
Copyright © 2015 Firebrand Technologies
Kindle 3 (Keyboard)
Copyright © 2015 Firebrand Technologies
Kindle Android
Copyright © 2015 Firebrand Technologies
Kindle Paperwhite
Copyright © 2015 Firebrand Technologies
Kobo Android
Copyright © 2015 Firebrand Technologies
Google Play Android
Copyright © 2015 Firebrand Technologies
Bluefire Reader
Copyright © 2015 Firebrand Technologies
Nook HD
Copyright © 2015 Firebrand Technologies
Cover Images
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
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
Copyright © 2015 Firebrand Technologies
Automation
Copyright © 2015 Firebrand Technologies
Automation
• Important tool for any eBook developer
• Can be done in a variety of ways
• With great power comes great responsibility!
Copyright © 2015 Firebrand Technologies
Options
• Photoshop
• GIMP
• Tons of image conversion tools online
• ImageMagick
Copyright © 2015 Firebrand Technologies
ImageMagick
Pros:
• Powerful
• Open Source
Cons:
• Command Line
• Takes some time to learn
• Not easy to install on Mac
Copyright © 2015 Firebrand Technologies
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"
Copyright © 2015 Firebrand Technologies
Resources
Copyright © 2015 Firebrand Technologies
Resources
WebAIM http://webaim.org/techniques/screenreader/
Diagram Center http://diagramcenter.org/
Poet Accessibility Tool https://diagram.herokuapp.com/
NCAM http://ncam.wgbh.org/
Copyright © 2015 Firebrand Technologies
Resources
IDPF Accessibility Guidelines http://www.idpf.org/accessibility/guidelines/
Images Test File https://github.com/jstallent/ImagesSingleFile
Copyright © 2015 Firebrand Technologies
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