Inserting graphics in Scrivener files

[BeccaPrice]

My daughter is drawing the illustrations for Fairies and Fireflies. I'm going to have to get them scanned - I assume at 300 DPI so I can insert them in the file for the paper book. Do I then reduce them to 72 (or 96) dpi for kindle files? jpg or png format?

and some of the illustrations go in the middle of a Scrivener scene (each story in the collection is its own scene) - How do I insert the graphic where I want it to be? Just copy/paste? or do I have to put them in the Scrivener Resources folder and call the graphic from there?

I can illustrate the paper book no problem - I've done that kind of thing a lot before. I'm really not sure how to set things up so the graphic will show to best advantage in epub or mobi format.

The graphics are B&W pencil and ink sketches, if that matters.

[Katsunami]

Originally Posted by BeccaPrice

My daughter is drawing the illustrations for Fairies and Fireflies. I'm going to have to get them scanned - I assume at 300 DPI so I can insert them in the file for the paper book. Do I then reduce them to 72 (or 96) dpi for kindle files? jpg or png format?

"Dpi" has nothing to do with the resolution of the file; it has to do with printing and scanning sizes. A file has no dpi. This might sound strange, but it's obvious if you think about it.

Take a file that is 1000 x 1000 pixels.

Now print it at a size of 10x10 inch. You just printed the file at 100 dpi.
Now print it at a size of 5x5 inch. You just printed the file at 200 dpi.

The other way around is also true.

"I have a file of 3000 x 3000 pixels. I want to print it at at least 300 dpi to get good quality." ==> You must print the file at 10 x 10 inch, or smaller.

See? Scanning a file, and then raising or lowering the DPI does not change its resolution: it changes the size the file will (can) be printed at.

Conclusion: Make the file larger than the largest resolution available on a Kindle today, keeping into account future developments for some years. What's the resolution of a current Fire? 1920x1200 or something? Then create a file of around 2688x1680. This 1.4x as large per side, giving you twice the complete screen area of the current KFire. You should be fine on devices with a lower resolution, and the image is still usable even if devices go beyond the 2688x1680 resolution.

Another nice thing when using bigger images is that you can use the Zoom-function of the Kindle to make the image larger, and it will stay sharp much longer. It will be sharp up until you hit 100% zoom, and then it will start to blur. I habitually replace my maps in fantasy books with versions as large as 3000 pixels on the long side, if I can find them.

If your illustration is going to take up part of the page only, you can just show it at a smaller size, instead of actually reducing the size in pixels. To make your ebook future-proof, you should set the image size in percentages instead of pixels.

Hope this helps.

PS: jpg and png are both fine. Just don't set the compression too low. Setting 100% quality is a bad idea, because the file will be huge. Setting 90% makes the files MUCH smaller, while keeping the quality loss to a minimum.

Don't be afraid of the size of the book; the Kindle can handle it. I've got some Delphi Classics on mine, some of which are larger than 100 MB.

[BeccaPrice]

I *think* I understand, but I'm not sure.

Say I have a picture that's about 3" x 3". Another is maybe 5"x 5". I want them to show up at the same size on a kindle. What dpi do I scan them at? I know how to size graphics in Word, which is what I'll do my layout in before converting to a PDF - I'm pretty sure that sizing them in Word won't change the printing dpi. But how do I size them for the kindle?

[Katsunami]

Originally Posted by BeccaPrice

I *think* I understand, but I'm not sure.

Say I have a picture that's about 3" x 3". Another is maybe 5"x 5". I want them to show up at the same size on a kindle. What dpi do I scan them at?

It depends what you want to achieve. Imagine you set 300 dpi/ppi (dots/pixels per inch) when scanning.

The size of the 3x3 inch picture will become 900x900 pixels (3x 300 = 900).
The size of the 5x5 inch picture will become 1500x1500 pixels (5x 300 = 1500).

You can still *display* them at the same size though.

If you display the 3x3 inch picture at a size of 6x6 inch, it will be displayed at 150 dpi. (Because: 900 pixels / 6 inch = 150 pixels per inch). If you display the 5x5 inch picture at 6x6 inch, it will be displayed at 250 dpi. (Because, 1500 pixels / 6 inch = 250 pixels per inch.)

If you want them both at the same resolution, say 2000x2000 pixels, then you scan the 3x3 inch picture at 667 dpi (3x 667 = ~2000), and you scan the 5x5 picture at 400 dpi (5x 400 = 2000).

I know how to size graphics in Word, which is what I'll do my layout in before converting to a PDF - I'm pretty sure that sizing them in Word won't change the printing dpi. But how do I size them for the kindle?

Setting the graphics size in Word is probably impossible, because the an e-reader is reflowable and not all e-readers have the same resolution. Therefore the image won't display as you intend; you can't (and shouldn't) fix a layout for an e-reader.

You set the size using a stylesheet (in Sigil, for example), by determining how large the image has to be. If you set the image width at 100%, the Kindle will resize it (keeping the aspect ratio) to fill up as much of the screen (page) as possible. If you want it smaller, you need to set a lower percentage, and then use the CSS to determine where to display the image and if the text has to float around it or not.

It may be doable in Word and have it generate the CSS, but I do not know how to do that. I don't have Word.

My suggestion is to keep it as simple as possible, to avoid problems with displaying on different e-readers and tablets. I'd make all images full screen on their own page, if possible, or do something that's predictable, like:

"Display this image up to 50% of the width of the screen (keeping aspect ratio) in the uppler left corner."
"Display this image between two paragraphs, centered on screen, and make it 1 inch high."

If you're going to do fancy stuff like flow text, displaying images as part of the text, then it can become very difficult, as not all e-readers treat this stuff in the same way.

[BeccaPrice]

the sizing in Word would be for a paper book, not an ebook.

[Katsunami]

Oh, OK. Then it's easy, as the display size is fixed. Make sure the image in Word is the same DPI as the book is going to be printed in.

Let's say, you have a 5x5 inch original image. You wish to display it at 3x3 inch in the book itself, after printing. The book will be printed at 300 DPI. Thus:

- The image in the book is 3x3 inch, at 300 DPI. This means it has to be 900x900 pixels on the sides (because 3x300=900.)
- The original 5x5 image needs to end up as a 600x600 pixel image, so you set your scanner to 900 pixels / 5 inch = 180 DPI.

Sometimes, a printing company will recommend to use images that are twice the DPI of the text. (I don't know why: I just know they do that. I've had it happen with printing pictures alongside text.) If they do this, then it would be as such:

- The image in the book is 3x3 inch, and the book is printed at 300 DPI. The image needs to be 600 DPI. Therefore you will need an 1800x1800 image (3x600=1800).
- The original image is 5x5 inch, and to scan it at 1800x1800, you'll need to set the scanner to 1800 pixels / 5 inch = 360 DPI.

And it all fits of course:
If you scan a 5 inch wide image at 360 DPI it will be 1800 pixels wide, and if you then display it at 3 inch, it'll be 1800 pixels / 3 inch = 600 DPI

To make sure you scan the images right, you should contact the printing company and ask them how many DPI they have to be, and then use the method above to caculcate the needed DPI setting for your scanner

[VydorScope]

So along these lines... I am trying to put a full page map in my EPUB. Do I do it like...

<body >
  <img width="100%" alt="Image" src="../Images/map.jpeg" />
</body>

I know that is not valid HTML5, but it is valid HTML4... I am just not sure what subset of commands/etc are available in EPUB land... Thanks!

[Katsunami]

You can do it like this:

<body >
<div style="width: 100%;">  
    <img alt="Image" src="../Images/map.jpeg" />
</div>
</body>

Also, I remember that if you know the width and height of an image beforehand, then adding them to the image is (maybe... was?) good practice, as it would make it faster for a browser to lay out a page.

Don't quote me on this; I've not done serious front-end web development for some years now.

[VydorScope]

Originally Posted by Katsunami

You can do it like this:

<body >
<div style="width: 100%;">  
    <img alt="Image" src="../Images/map.jpeg" />
</div>
</body>

Also, I remember that if you know the width and height of an image beforehand, then adding them to the image is (maybe... was?) good practice, as it would make it faster for a browser to lay out a page.

Don't quote me on this; I've not done serious front-end web development for some years now.

Hmm... yeah that is probably a better way to do it. Thanks.

[JSWolf]

Originally Posted by Katsunami

You can do it like this:

<body >
<div style="width: 100%;">  
    <img alt="Image" src="../Images/map.jpeg" />
</div>
</body>

Also, I remember that if you know the width and height of an image beforehand, then adding them to the image is (maybe... was?) good practice, as it would make it faster for a browser to lay out a page.

Don't quote me on this; I've not done serious front-end web development for some years now.

Don't use width; use height. Most maps are longer then wider and if you use a width of 100%, it could very easily be partially off-screen, Use height and if it has to be rotated, so be it.

[VydorScope]

Originally Posted by JSWolf

Don't use width; use height. Most maps are longer then wider and if you use a width of 100%, it could very easily be partially off-screen, Use height and if it has to be rotated, so be it.

Yea, it is a tall map, so that is a good point. Thanks.

[BeccaPrice]

My map is being designed to cover 2 pages of an 8 x 5.25" book - but my cartographer is also creating a version that will be sized appropriately for a kindle. Heaven knows how it will look on a tablet.

[Katsunami]

Originally Posted by BeccaPrice

My map is being designed to cover 2 pages of an 8 x 5.25" book - but my cartographer is also creating a version that will be sized appropriately for a kindle. Heaven knows how it will look on a tablet.

I would recommend to just cut the map in the middle. Then put the left side on its own page, and the right side on the next. That's the way most fantasy books with very large maps seem to handle it, and it works just fine.

Just make sure you have a direct entry called "Maps" in the TOC

[crich70]

Originally Posted by Katsunami

I would recommend to just cut the map in the middle. Then put the left side on its own page, and the right side on the next. That's the way most fantasy books with very large maps seem to handle it, and it works just fine.

Just make sure you have a direct entry called "Maps" in the TOC

Or (for paper) you could have it as a fold out. I remember some copies of the Lord of the Rings books that I got from the library years ago (before I had my own copies) that had the maps of Middle Earth done that way.

[BeccaPrice]

Unless I teach myself InDesign in a week (not likely), I think cutting the map in half is what I'm going to have to do.