What dimensions should image files be within books?

wellesradio · 12-06-2020, 07:55 PM

I edited an epub in Sigil to replace the cover page and any pages with full-page image reproductions. I resized all the images in GIMP, but it seems there's always a little bit of the image splashing over to the top of the next screen. The bottom always gets cut off. I don't know if the device makes a difference, but I'm usually reading my books on an iPad.

Turtle91 · 12-12-2020, 09:17 PM

I noticed this as well...my fix is to use an SVG wrapper for full page images along with the vh/vw units for height and width. I also set the background color - usually to black, but to whatever complements the cover image. That fills in any blank areas around the image. Set the width and height coordinates to the actual size (in pixels) of the image.

Code:

<body style="margin:0; padding:0; text-align:center; background-color:black">
  <h1 style="display:none" title="Cover"/>

  <div style="margin:0; padding:0">
    <svg 
		xmlns="http://www.w3.org/2000/svg" 
		height="100vh" width="100vw" 
		preserveAspectRatio="xMidYMid meet" version="1.1" 
		viewBox="0 0 473 603" 
		xmlns:xlink="http://www.w3.org/1999/xlink">
        <image width="473" height="603" xlink:href="../Images/cover.jpg"/>
    </svg>
  </div>
</body>

wellesradio · 12-20-2020, 07:25 PM

Quote:

Originally Posted by Turtle91

I noticed this as well...my fix is to use an SVG wrapper for full page images along with the vh/vw units for height and width.

Didn't seem to work. It created a blank page.

Here's what I currently have for the book cover. The dimensions are 1127x1800 pixels but I didn't put that anywhere in the code. All in all, it looks great and I don't care if it fills the entire screen, but it does cut a portion of the bottom of the image off and spills it over onto the next page.

Please guide me where I can make some changes:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <link href="../Styles/nyrb.css" rel="stylesheet" type="text/css"/>

  <title>Cover</title>
  
<style type="text/css">
img { max-width: 100%; }
</style>
<meta content="urn:uuid:4bf76f52-8996-4795-95a0-48e28ff4cf4d" name="Adept.expected.resource"/>
</head>

<body>
<div style="text-align: center;"><img alt="Doomsday Book" src="../Images/cover.png"/>
  </div>
</body>
</html>

Turtle91 · 12-21-2020, 01:20 PM

Works every time.... just copy/paste onto its own html file...and then, of course, you need to select "Publisher's layout" from Marvin settings otherwise Marvin will ignore most of your styling for it's own. Just open your book in Marvin, tap the screen and go to settings by hitting the Aa in the top right corner, scroll down the settings list a little (below Uniform text size)...

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Cover</title>
</head>

<body style="margin:0; padding:0; text-align:center; background-color:black">
  <h1 style="display:none" title="Cover"/>

  <div style="margin:0; padding:0">
    <svg 
		xmlns="http://www.w3.org/2000/svg" 
		height="100vh" width="100vw" 
		preserveAspectRatio="xMidYMid meet" version="1.1" 
		viewBox="0 0 1127 1800" 
		xmlns:xlink="http://www.w3.org/1999/xlink">
        <image width="1127" height="1800" xlink:href="../Images/cover.png"/>
    </svg>
  </div>
</body>

Turtle91 · 12-21-2020, 01:24 PM

In your attempt you have simply set the width of the image to be 100%...and it will automatically size the height to keep the proper aspect ratio. This will often cause the image to flow over to the next page because most cover images are taller than they are wide. That's why an svg wrapper works so well. It automatically maximizes the image to fill the screen with the proper aspect ratio. (assuming you use the settings I provided above).

I actually keep this as a template...all I need to do is enter the exact image dimensions and it always works.

12-06-2020, 07:55 PM	#1
wellesradio Member Posts: 23 Karma: 13884 Join Date: Jan 2014 Device: apple ipad (3rd generation)	What dimensions should image files be within books? I edited an epub in Sigil to replace the cover page and any pages with full-page image reproductions. I resized all the images in GIMP, but it seems there's always a little bit of the image splashing over to the top of the next screen. The bottom always gets cut off. I don't know if the device makes a difference, but I'm usually reading my books on an iPad.

12-12-2020, 09:17 PM	#2
Turtle91 A Hairy Wizard Posts: 3,093 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	I noticed this as well...my fix is to use an SVG wrapper for full page images along with the vh/vw units for height and width. I also set the background color - usually to black, but to whatever complements the cover image. That fills in any blank areas around the image. Set the width and height coordinates to the actual size (in pixels) of the image. Code: <body style="margin:0; padding:0; text-align:center; background-color:black"> <h1 style="display:none" title="Cover"/> <div style="margin:0; padding:0"> <svg xmlns="http://www.w3.org/2000/svg" height="100vh" width="100vw" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 473 603" xmlns:xlink="http://www.w3.org/1999/xlink"> <image width="473" height="603" xlink:href="../Images/cover.jpg"/> </svg> </div> </body>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
KF8 relative image dimensions problem	SBT	Kindle Formats	6	11-25-2014 03:48 AM
What should the dimensions of an ebook cover image be?	ecbritz	Sigil	18	09-07-2013 03:11 AM
Best Image Dimensions for Fire	x2far	Kindle Formats	3	04-25-2013 07:38 PM
Image dimensions for Kindle Fire	x2far	Workshop	1	02-08-2012 06:39 PM
Image dimensions	eBookNoir	Barnes & Noble NOOK	2	02-14-2011 03:22 PM

12-21-2020, 01:24 PM	#5
Turtle91 A Hairy Wizard Posts: 3,093 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	In your attempt you have simply set the width of the image to be 100%...and it will automatically size the height to keep the proper aspect ratio. This will often cause the image to flow over to the next page because most cover images are taller than they are wide. That's why an svg wrapper works so well. It automatically maximizes the image to fill the screen with the proper aspect ratio. (assuming you use the settings I provided above). I actually keep this as a template...all I need to do is enter the exact image dimensions and it always works.

Advert

Advert