3Pigs3-3.1.epub - Add Images

Q

How to add images to my EPUB books

✍: FYIcenter.com

A

Images can be added into book content using the XHTML "img" elements.

For example, you can download this EPUB book, 3Pigs3-3.1.epub, which contains an illustration image in the The-Opening.xhtml:

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>The Opening</title>
  </head>
  <body>

<h3>The Opening</h3>

<p>Once upon a time there were three little pigs. One day their mother 
said, “You are old now. You can make your own houses.” Mrs. Pig kissed 
each little pig on the nose. “Take care! There is a big bad wolf about. 
Build your houses good and strong, and NEVER NEVER let that bad old wolf 
through the door.” The three little pigs said, “Bye, bye mom!” and off 
they went.
</p>

<figure>
<img src="/The-Three-Little-Pigs-by-J-Jacobs.png"" 
alt="The Three Little Pigs Illustration by J Jacobs"/>
<figcaption>The Three Little Pigs Illustration by J Jacobs</figcaption>
</figure>

  </body>
</html>

When adding images into EPUB books, you must declare each image file as an "item" in package.opf:

  <manifest>
    <item id="navigation" href="/navigation.xhtml" 
      media-type="application/xhtml+xml" properties="nav"/>
    <item id="The-Opening" href="/The-Opening.xhtml" media-type="application/xhtml+xml"/>
    <item id="First-Pig" href="/First-Pig.xhtml" media-type="application/xhtml+xml"/>
    <item id="Second-Pig" href="/Second-Pig.xhtml" media-type="application/xhtml+xml"/>
    <item id="Third-Pig" href="/Third-Pig.xhtml" media-type="application/xhtml+xml"/>
    <item id="Figure-1" href="/The-Three-Little-Pigs-by-J-Jacobs.png" media-type="image/png"/>
  </manifest>

The image size should not be too big, < 420x630 pixels. Otherwise, some EPUB readers may have issues displaying them.

If you open 3Pigs3-3.1.epub in Calibre and go to "The Opening", you see the image is nice displayed:
EPUB Book with Images

⇒ 3Pigs4-3.1.epub - Cover Image and Page

⇐ 3Pigs2-3.1.epub - Multiple XHTML Files

⇑ EPUB 3.1 With XHTML Technologies

⇑⇑ EPUB Tutorials

2018-12-26, 3111👍, 0💬

Hello-3.1.epub Created with WinRAR
How to create Hello-3.1.epub with WinRAR? I have all required files to create Hello-3.1.epub. To create the EPUB 3.1 example, Hello-3.1.epub, you need to collect all files mentioned from previous tutorials: |-- mimetype |-- package.opf |-- content.xhtml |-- navigation.xhtml |-- META-INF |-- containe... 2019-01-12, 2988👍, 0💬

EpubCheck 4.0.2 --json Option
What is EpubCheck 4.0.2 "--json" Option? EpubCheck 4.0.2 "--json" option allows you to generate a JSON output file containing all properties of the EPUB book. You can try it on Hello-3.0.epub: C:\fyicenter> java -jar epubcheck-4.0.2\epubcheck.jar --json Hello.json Hello-3.0.epub No errors or ... 2018-11-17, 2052👍, 0💬

3Pigs2-3.1.epub - Multiple XHTML Files
Can I divide the book content into multiple XHTML files? Yes, you can divide the book content into multiple XHTML files. If your has multiple chapters, you should consider to create one XHTML file per chapter. For example, you can download this EPUB book, 3Pigs2-3.1.epub , which has "The Three Littl... 2019-01-12, 1901👍, 0💬

3Pigs4-3.1.epub - Cover Image and Page
How to add a cover image to my EPUB books If you want to add a cover image to your EPUB 3.1 book, you should consider to two related components: Cover Image - An image file that is specified as the Cover Image of the book. Cover Page - An XHTML content file that is displayed as part of the book cont... 2018-12-26, 1864👍, 0💬

3Pigs5-3.1.epub - Title Page and TOC
How to add a title page and a table of content page to my EPUB book? If you want to add a title page and a table of content page to your EPUB 3.1 book, you can follow this tutorial. 1. Create a title page in an XHTML file like Title-Page.xhtml: <?xml version="1.0" encoding="utf-8"?> &a... 2018-12-26, 1776👍, 0💬

3Pigs7-3.1.epub - Apply CSS File
How to add CSS file to my EPUB book? You can follow this tutorial to add a CSS file to your EPUB 3.1 book. 1. Create a CSS file, Styles.css, to control display styles of all XHTML pages: body {font-family: "Arial";} pre {padding: 0px 25px 0px 25px; font-family: "Arial"; font-style: italic; font-size... 2018-12-26, 1726👍, 0💬

EPUB 3.1 With XHTML Technologies
Where to find tutorials on Building EPUB 3.1 With XHTML Technologies? Here is a list of tutorials to answer many frequently asked questions compiled by FYIcenter.com team on Building EPUB 3.1 With XHTML Technologies. 3Pigs1-3.1.epub - Single XHTML File 3Pigs2-3.1.epub - Multiple XHTML Files 3Pigs3-3... 2019-01-12, 1708👍, 0💬

3Pigs1-3.1.epub - Single XHTML File
Can I use XHTML technology only to build an EPUB 3.1 book? I want to build EPUB book with "The Three Little Pigs" story. Yes, you can use XHTML technology only to build an EPUB 3.1 book. For example, you can download this EPUB book, 3Pigs1-3.1.epub , which has the entire "The Three Little Pigs" stor... 2019-01-12, 1662👍, 0💬

Hello-3.1.epub Displayed in Calibre
How to display Hello-3.1.epub in Calibre? Once you have Hello-3.1.epub created, you can follow this tutorial to open and read it in Calibre. 1. Search and run Calibre on your Windows computer. You see the Calibre main screen. 2. Click "Add books" icon. You see the open file screen. 3. Locate and sel... 2019-01-12, 1626👍, 0💬

All rights in the contents of this web site are reserved by the individual author. fyicenter.com does not guarantee the truthfulness, accuracy, or reliability of any contents.