SlideShare a Scribd company logo
1 of 93
Download to read offline
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_Pa
ge
• 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
Google
• 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_Pa
ge
• Harvard information page:
http://guides.library.harvard.edu/content.php
?pid=500088&sid=4113929

More Related Content

Similar to Practical information for images in ebooks - ebookcraft 2015 - Joshua Tallent

Portfolio Presentation Final
Portfolio Presentation FinalPortfolio Presentation Final
Portfolio Presentation FinalShea Hinds
 
Chapter 23: Web Images
Chapter 23: Web ImagesChapter 23: Web Images
Chapter 23: Web ImagesSteve Guinan
 
Image optimization and you
Image optimization and youImage optimization and you
Image optimization and youJohannes Siipola
 
Helpsheet 2
Helpsheet 2 Helpsheet 2
Helpsheet 2 hiletman
 
Technical file
Technical fileTechnical file
Technical filesamgh1995
 
Helpsheet 2
Helpsheet 2Helpsheet 2
Helpsheet 2hiletman
 
File format help sheet completed
File format help sheet completedFile format help sheet completed
File format help sheet completedKColliver
 
Digital Graphics Pro Forma
Digital Graphics Pro FormaDigital Graphics Pro Forma
Digital Graphics Pro FormaAlex Walker
 
File types pro forma
File types pro forma File types pro forma
File types pro forma Alex Walker
 
Types of Images & File Types
Types of Images & File TypesTypes of Images & File Types
Types of Images & File TypesChris Chapman
 
Multimedia revision 2017
Multimedia revision 2017Multimedia revision 2017
Multimedia revision 2017greg robertson
 
File format help sheet version 2
File format help sheet version 2File format help sheet version 2
File format help sheet version 2bennyboyhunt
 

Similar to Practical information for images in ebooks - ebookcraft 2015 - Joshua Tallent (20)

Portfolio Presentation Final
Portfolio Presentation FinalPortfolio Presentation Final
Portfolio Presentation Final
 
Chapter 23: Web Images
Chapter 23: Web ImagesChapter 23: Web Images
Chapter 23: Web Images
 
Chapter13
Chapter13Chapter13
Chapter13
 
Portfolio Task 5
Portfolio Task 5Portfolio Task 5
Portfolio Task 5
 
Portfolio T
Portfolio TPortfolio T
Portfolio T
 
Portfolio Task 5
Portfolio Task 5Portfolio Task 5
Portfolio Task 5
 
Chapter 13
Chapter 13Chapter 13
Chapter 13
 
Image optimization and you
Image optimization and youImage optimization and you
Image optimization and you
 
Helpsheet 2
Helpsheet 2 Helpsheet 2
Helpsheet 2
 
Technical file
Technical fileTechnical file
Technical file
 
Helpsheet 2
Helpsheet 2Helpsheet 2
Helpsheet 2
 
File format help sheet completed
File format help sheet completedFile format help sheet completed
File format help sheet completed
 
Digital Graphics Pro Forma
Digital Graphics Pro FormaDigital Graphics Pro Forma
Digital Graphics Pro Forma
 
File types pro forma
File types pro forma File types pro forma
File types pro forma
 
Types of Images & File Types
Types of Images & File TypesTypes of Images & File Types
Types of Images & File Types
 
File Format - Animation Courses, Ahmedabad
File Format - Animation Courses, AhmedabadFile Format - Animation Courses, Ahmedabad
File Format - Animation Courses, Ahmedabad
 
Multimedia revision 2017
Multimedia revision 2017Multimedia revision 2017
Multimedia revision 2017
 
File format help sheet version 2
File format help sheet version 2File format help sheet version 2
File format help sheet version 2
 
Ppt ch08
Ppt ch08Ppt ch08
Ppt ch08
 
Ppt ch08
Ppt ch08Ppt ch08
Ppt ch08
 

More from BookNet Canada

Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...BookNet Canada
 
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024BookNet Canada
 
Transcript: Book industry state of the nation 2024 - Tech Forum 2024
Transcript: Book industry state of the nation 2024 - Tech Forum 2024Transcript: Book industry state of the nation 2024 - Tech Forum 2024
Transcript: Book industry state of the nation 2024 - Tech Forum 2024BookNet Canada
 
Book industry state of the nation 2024 - Tech Forum 2024
Book industry state of the nation 2024 - Tech Forum 2024Book industry state of the nation 2024 - Tech Forum 2024
Book industry state of the nation 2024 - Tech Forum 2024BookNet Canada
 
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024BookNet Canada
 
Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...BookNet Canada
 
Transcript: New stores, new views: Booksellers adapting engaging and thriving...
Transcript: New stores, new views: Booksellers adapting engaging and thriving...Transcript: New stores, new views: Booksellers adapting engaging and thriving...
Transcript: New stores, new views: Booksellers adapting engaging and thriving...BookNet Canada
 
Show and tell: What’s in your tech stack? - Tech Forum 2023
Show and tell: What’s in your tech stack? - Tech Forum 2023Show and tell: What’s in your tech stack? - Tech Forum 2023
Show and tell: What’s in your tech stack? - Tech Forum 2023BookNet Canada
 
Transcript: Show and tell: What’s in your tech stack? - Tech Forum 2023
Transcript: Show and tell: What’s in your tech stack? - Tech Forum 2023Transcript: Show and tell: What’s in your tech stack? - Tech Forum 2023
Transcript: Show and tell: What’s in your tech stack? - Tech Forum 2023BookNet Canada
 
Transcript: Redefining the book supply chain: A glimpse into the future - Tec...
Transcript: Redefining the book supply chain: A glimpse into the future - Tec...Transcript: Redefining the book supply chain: A glimpse into the future - Tec...
Transcript: Redefining the book supply chain: A glimpse into the future - Tec...BookNet Canada
 
Redefining the book supply chain: A glimpse into the future - Tech Forum 2023
Redefining the book supply chain: A glimpse into the future - Tech Forum 2023Redefining the book supply chain: A glimpse into the future - Tech Forum 2023
Redefining the book supply chain: A glimpse into the future - Tech Forum 2023BookNet Canada
 

More from BookNet Canada (20)

Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
 
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
 
Transcript: Book industry state of the nation 2024 - Tech Forum 2024
Transcript: Book industry state of the nation 2024 - Tech Forum 2024Transcript: Book industry state of the nation 2024 - Tech Forum 2024
Transcript: Book industry state of the nation 2024 - Tech Forum 2024
 
Book industry state of the nation 2024 - Tech Forum 2024
Book industry state of the nation 2024 - Tech Forum 2024Book industry state of the nation 2024 - Tech Forum 2024
Book industry state of the nation 2024 - Tech Forum 2024
 
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
 
Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...
 
Transcript: New stores, new views: Booksellers adapting engaging and thriving...
Transcript: New stores, new views: Booksellers adapting engaging and thriving...Transcript: New stores, new views: Booksellers adapting engaging and thriving...
Transcript: New stores, new views: Booksellers adapting engaging and thriving...
 
Show and tell: What’s in your tech stack? - Tech Forum 2023
Show and tell: What’s in your tech stack? - Tech Forum 2023Show and tell: What’s in your tech stack? - Tech Forum 2023
Show and tell: What’s in your tech stack? - Tech Forum 2023
 
Transcript: Show and tell: What’s in your tech stack? - Tech Forum 2023
Transcript: Show and tell: What’s in your tech stack? - Tech Forum 2023Transcript: Show and tell: What’s in your tech stack? - Tech Forum 2023
Transcript: Show and tell: What’s in your tech stack? - Tech Forum 2023
 
Transcript: Redefining the book supply chain: A glimpse into the future - Tec...
Transcript: Redefining the book supply chain: A glimpse into the future - Tec...Transcript: Redefining the book supply chain: A glimpse into the future - Tec...
Transcript: Redefining the book supply chain: A glimpse into the future - Tec...
 
Redefining the book supply chain: A glimpse into the future - Tech Forum 2023
Redefining the book supply chain: A glimpse into the future - Tech Forum 2023Redefining the book supply chain: A glimpse into the future - Tech Forum 2023
Redefining the book supply chain: A glimpse into the future - Tech Forum 2023
 

Recently uploaded

Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdfDanh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdfQucHHunhnh
 
The basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxThe basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxheathfieldcps1
 
Behavioral-sciences-dr-mowadat rana (1).pdf
Behavioral-sciences-dr-mowadat rana (1).pdfBehavioral-sciences-dr-mowadat rana (1).pdf
Behavioral-sciences-dr-mowadat rana (1).pdfaedhbteg
 
Open Educational Resources Primer PowerPoint
Open Educational Resources Primer PowerPointOpen Educational Resources Primer PowerPoint
Open Educational Resources Primer PowerPointELaRue0
 
Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Mohamed Rizk Khodair
 
size separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceuticssize separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceuticspragatimahajan3
 
REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptxREPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptxmanishaJyala2
 
How to Manage Notification Preferences in the Odoo 17
How to Manage Notification Preferences in the Odoo 17How to Manage Notification Preferences in the Odoo 17
How to Manage Notification Preferences in the Odoo 17Celine George
 
How to Analyse Profit of a Sales Order in Odoo 17
How to Analyse Profit of a Sales Order in Odoo 17How to Analyse Profit of a Sales Order in Odoo 17
How to Analyse Profit of a Sales Order in Odoo 17Celine George
 
The Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. HenryThe Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. HenryEugene Lysak
 
2024_Student Session 2_ Set Plan Preparation.pptx
2024_Student Session 2_ Set Plan Preparation.pptx2024_Student Session 2_ Set Plan Preparation.pptx
2024_Student Session 2_ Set Plan Preparation.pptxmansk2
 
ppt your views.ppt your views of your college in your eyes
ppt your views.ppt your views of your college in your eyesppt your views.ppt your views of your college in your eyes
ppt your views.ppt your views of your college in your eyesashishpaul799
 
An Overview of the Odoo 17 Discuss App.pptx
An Overview of the Odoo 17 Discuss App.pptxAn Overview of the Odoo 17 Discuss App.pptx
An Overview of the Odoo 17 Discuss App.pptxCeline George
 
Essential Safety precautions during monsoon season
Essential Safety precautions during monsoon seasonEssential Safety precautions during monsoon season
Essential Safety precautions during monsoon seasonMayur Khatri
 
Capitol Tech Univ Doctoral Presentation -May 2024
Capitol Tech Univ Doctoral Presentation -May 2024Capitol Tech Univ Doctoral Presentation -May 2024
Capitol Tech Univ Doctoral Presentation -May 2024CapitolTechU
 
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...Nguyen Thanh Tu Collection
 
Post Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdf
Post Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdfPost Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdf
Post Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdfPragya - UEM Kolkata Quiz Club
 
Morse OER Some Benefits and Challenges.pptx
Morse OER Some Benefits and Challenges.pptxMorse OER Some Benefits and Challenges.pptx
Morse OER Some Benefits and Challenges.pptxjmorse8
 
Championnat de France de Tennis de table/
Championnat de France de Tennis de table/Championnat de France de Tennis de table/
Championnat de France de Tennis de table/siemaillard
 
Financial Accounting IFRS, 3rd Edition-dikompresi.pdf
Financial Accounting IFRS, 3rd Edition-dikompresi.pdfFinancial Accounting IFRS, 3rd Edition-dikompresi.pdf
Financial Accounting IFRS, 3rd Edition-dikompresi.pdfMinawBelay
 

Recently uploaded (20)

Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdfDanh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
 
The basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxThe basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptx
 
Behavioral-sciences-dr-mowadat rana (1).pdf
Behavioral-sciences-dr-mowadat rana (1).pdfBehavioral-sciences-dr-mowadat rana (1).pdf
Behavioral-sciences-dr-mowadat rana (1).pdf
 
Open Educational Resources Primer PowerPoint
Open Educational Resources Primer PowerPointOpen Educational Resources Primer PowerPoint
Open Educational Resources Primer PowerPoint
 
Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).
 
size separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceuticssize separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceutics
 
REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptxREPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptx
 
How to Manage Notification Preferences in the Odoo 17
How to Manage Notification Preferences in the Odoo 17How to Manage Notification Preferences in the Odoo 17
How to Manage Notification Preferences in the Odoo 17
 
How to Analyse Profit of a Sales Order in Odoo 17
How to Analyse Profit of a Sales Order in Odoo 17How to Analyse Profit of a Sales Order in Odoo 17
How to Analyse Profit of a Sales Order in Odoo 17
 
The Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. HenryThe Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. Henry
 
2024_Student Session 2_ Set Plan Preparation.pptx
2024_Student Session 2_ Set Plan Preparation.pptx2024_Student Session 2_ Set Plan Preparation.pptx
2024_Student Session 2_ Set Plan Preparation.pptx
 
ppt your views.ppt your views of your college in your eyes
ppt your views.ppt your views of your college in your eyesppt your views.ppt your views of your college in your eyes
ppt your views.ppt your views of your college in your eyes
 
An Overview of the Odoo 17 Discuss App.pptx
An Overview of the Odoo 17 Discuss App.pptxAn Overview of the Odoo 17 Discuss App.pptx
An Overview of the Odoo 17 Discuss App.pptx
 
Essential Safety precautions during monsoon season
Essential Safety precautions during monsoon seasonEssential Safety precautions during monsoon season
Essential Safety precautions during monsoon season
 
Capitol Tech Univ Doctoral Presentation -May 2024
Capitol Tech Univ Doctoral Presentation -May 2024Capitol Tech Univ Doctoral Presentation -May 2024
Capitol Tech Univ Doctoral Presentation -May 2024
 
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
 
Post Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdf
Post Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdfPost Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdf
Post Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdf
 
Morse OER Some Benefits and Challenges.pptx
Morse OER Some Benefits and Challenges.pptxMorse OER Some Benefits and Challenges.pptx
Morse OER Some Benefits and Challenges.pptx
 
Championnat de France de Tennis de table/
Championnat de France de Tennis de table/Championnat de France de Tennis de table/
Championnat de France de Tennis de table/
 
Financial Accounting IFRS, 3rd Edition-dikompresi.pdf
Financial Accounting IFRS, 3rd Edition-dikompresi.pdfFinancial Accounting IFRS, 3rd Edition-dikompresi.pdf
Financial Accounting IFRS, 3rd Edition-dikompresi.pdf
 

Practical information for images in ebooks - ebookcraft 2015 - Joshua Tallent

  • 1. Practical Information for Images in Ebooks Copyright © 2014 Firebrand Technologies. Do not distribute or duplicate. Intended only for registered students.
  • 2. Copyright © 2015 Firebrand Technologies Formats
  • 3. Copyright © 2015 Firebrand Technologies JPEG • Joint Photographic Experts Group • *.jpeg, *.jpg • Lossy compression • Generation loss • Destination format, not origination format • Best for photographs
  • 4. Copyright © 2015 Firebrand Technologies
  • 5. 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"
  • 6. 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
  • 7. 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
  • 8. Copyright © 2015 Firebrand Technologies Colors
  • 9. Copyright © 2015 Firebrand Technologies CMYK • Cyan, Magenta, Yellow, and Key (Black) • Also known as Four Color • Subtractive process • Halftoning
  • 10. Copyright © 2015 Firebrand Technologies Halftoning
  • 11. 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
  • 12. Copyright © 2015 Firebrand Technologies
  • 13. 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
  • 14. Copyright © 2015 Firebrand Technologies Grayscale • For the purposes of eBooks, 4-bit (16 color) grayscale is the most important • Used in E Ink screens
  • 15. Copyright © 2015 Firebrand Technologies Color
  • 16. Copyright © 2015 Firebrand Technologies 2-bit Grayscale (4 color)
  • 17. Copyright © 2015 Firebrand Technologies 4-bit Grayscale (16 color)
  • 18. Copyright © 2015 Firebrand Technologies
  • 19. Copyright © 2015 Firebrand Technologies
  • 20. Copyright © 2015 Firebrand Technologies Size and Resolution
  • 21. 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.
  • 22. 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
  • 23. 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
  • 24. 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/
  • 25. Copyright © 2015 Firebrand Technologies Transparency
  • 26. 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
  • 27. Copyright © 2015 Firebrand Technologies Vector Graphics
  • 28. Copyright © 2015 Firebrand Technologies Vector Graphics • Lines are created mathematically, not with pixels • Infinite scaling • No pixels = No pixelation • Smaller file size
  • 29. Copyright © 2015 Firebrand Technologies EPS • Encapsulated PostScript • Common in print design • Build/edit in Illustrator • Not supported in eBook formats
  • 30. 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
  • 31. Copyright © 2015 Firebrand Technologies Sources of High Quality Images
  • 32. Copyright © 2015 Firebrand Technologies Sources • Public Domain • Creative Commons • Don't just search on Google!
  • 33. 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_Pa ge • Harvard information page: http://guides.library.harvard.edu/content.php ?pid=500088&sid=4113929
  • 34. Copyright © 2015 Firebrand Technologies Retailer Requirements
  • 35. 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
  • 36. 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
  • 37. 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
  • 38. 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…)
  • 39. Copyright © 2015 Firebrand Technologies B&N • None published
  • 40. Copyright © 2015 Firebrand Technologies Google • None published
  • 41. Copyright © 2015 Firebrand Technologies FlightDeck Stats Report
  • 42. Copyright © 2015 Firebrand Technologies HTML for Images
  • 43. 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
  • 44. 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
  • 45. 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
  • 46. 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>
  • 47. 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>
  • 48. Copyright © 2015 Firebrand Technologies Accessibility for Images
  • 49. 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
  • 50. 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.
  • 51. Copyright © 2015 Firebrand Technologies HTML5 and EPUB 3 <figure> <img .../> <figcaption> <p>Figure 1.1 ...</p> </figcaption> </figure>
  • 52. 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.)
  • 53. 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.
  • 54. 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>
  • 55. 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
  • 56. 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.
  • 57. 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>
  • 58. 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.
  • 59. 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>
  • 60. 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
  • 61. Copyright © 2015 Firebrand Technologies CSS
  • 62. 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/
  • 63. Copyright © 2015 Firebrand Technologies Typical Image Types • Photographs • Charts/Graphs • Line art • Logos • Cover images • Section breaks • Marketing images (small covers)
  • 64. 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
  • 65. 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
  • 66. 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
  • 67. 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
  • 68. 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
  • 69. 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
  • 70. 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
  • 71. 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
  • 72. 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>
  • 73. 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;}
  • 74. Copyright © 2015 Firebrand Technologies iBooks 4
  • 75. Copyright © 2015 Firebrand Technologies Kindle 3 (Keyboard)
  • 76. Copyright © 2015 Firebrand Technologies Kindle Android
  • 77. Copyright © 2015 Firebrand Technologies Kindle Paperwhite
  • 78. Copyright © 2015 Firebrand Technologies Kobo Android
  • 79. Copyright © 2015 Firebrand Technologies Google Play Android
  • 80. Copyright © 2015 Firebrand Technologies Bluefire Reader
  • 81. Copyright © 2015 Firebrand Technologies Nook HD
  • 82. Copyright © 2015 Firebrand Technologies Cover Images
  • 83. 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
  • 84. 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
  • 85. Copyright © 2015 Firebrand Technologies Automation
  • 86. 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!
  • 87. Copyright © 2015 Firebrand Technologies Options • Photoshop • GIMP • Tons of image conversion tools online • ImageMagick
  • 88. Copyright © 2015 Firebrand Technologies ImageMagick Pros: • Powerful • Open Source Cons: • Command Line • Takes some time to learn • Not easy to install on Mac
  • 89. 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"
  • 90. Copyright © 2015 Firebrand Technologies Resources
  • 91. 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/
  • 92. Copyright © 2015 Firebrand Technologies Resources IDPF Accessibility Guidelines http://www.idpf.org/accessibility/guidelines/ Images Test File https://github.com/jstallent/ImagesSingleFile
  • 93. 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_Pa ge • Harvard information page: http://guides.library.harvard.edu/content.php ?pid=500088&sid=4113929