Ultimate Guide to eBook Images

By | July 1, 2016

Finding the perfect size for ebook images can be confusing. If you search the Internet for how to size interior images for ebooks, you’ll find that getting a straight answer is difficult. The reason is that there is no perfect size for interior ebook images.

How to make your ebook images look good on any e-reader

In this article, I’ll try to explain some of the reasons why there is no perfect size for interior ebook images, and I’ll give you some practical solutions for how you can create images that will work across devices.


Note, we are talking about interior ebook images, not ebook covers.


eBook Images and why pixels matter

Print and ebook images are not compatible, and things get even more complicated when you consider the different e-readers on the market and how they handle images.

Ok, bear with me. I’m going to get a little technical for a minute, but then I’ll bring it back to some practical advice for you.

The first thing to note is that image requirements for printed books differ from image requirements for ebooks.

When working with digital images, we use the term pixels to refer to the size of an image as it appears on screen. Think of a pixel as a dot of color. In fact, you may hear either term used. They are not the same, but for the sake of simplicity, let’s assume that dots and pixels are the same.

In print, the more dots  you have within a defined space, the higher the image quality. We refer to this as the number of dots per inch (DPI). But with digital images, the total number of pixels determines the size of the image.

In the images below, both have a total of 117,900 pixels (300 x 393). But the DPI of image 1 is greater than the DPI of image 2. Keep reading to learn why the DPI matters.

 

ebook images-malabar-parkeet

image 2

ebook images malabar-parkeet2

image 1

 

 

 

 

 

 

 

 

 

 

 

image 1 is sized at .4x.5 inches and 72 dpi (178 kb)

image 2 is sized at 3×4 inches and 94 dpi (68 kb)

Computers and e-reader screens are also measured in pixels. You’ll hear this referenced as the screen resolution, but what it really means is that screens are measured in the number of pixels by height and width. Digital screens have a fixed resolution. You cannot change this. Screens with higher pixels counts can reproduce higher quality images.

Why are pixels and resolutions important for ebook images? The size of an image as it appears on a screen depends on the pixel dimensions of the image and the display resolution of your screen. A 600 x 800 image will appear smaller on a 2560 x 1600 screen.

To make your ebook images fill the screen, select a pixel size equal to the resolution of the e-reading device.

However, if the resolution of any particular e-reader is 600 x 800, your image at 600 x 800 will fill the screen.

Why screen sizes don’t matter

We often hear e-readers referred to by the size of the screen in inches, such as a 7-inch or 8-inch screen. The screen size referenced in inches is of no concern to you when determining image size for ebooks. You are concerned with the pixel measurements of the device, referred to as its resolution, and its aspect ratio, or proportion.

When you create an image in print with a specific size and proportion, it may not look the same on your Kindle or iPad. The image may get cropped, or pushed to the next page. The reason is because the image size and proportion that works perfectly in your print book may be too large or not the correct shape for the screen on your e-reading device.

ebook images

To make things more complicated, e-readers come with different screen resolutions and proportions. An image that works for one device may not present the same on another. I discuss this in more detail in Why Your eBook Design Doesn’t Look Like Your Print Book.

Screens with the same size may have different proportions. And resolutions vary per device, as I noted above.

An iPad with its higher screen resolution has some of the best retail space and quality for images. You might think an image you create to appear full screen on iPad would also look great on an Android tablet of the same screen size. But the proportions of the iPad are not the same as most Android tablets, and the resolution may vary. Kindles are not all created equal either. Their screen resolutions and proportions vary from one Kindle version to another.

Pages in fixed layout books can have larger dimensions and file sizes than standard reflowable ebooks.

How to make one-size-fits-all eBook images 

So what’s a publisher of ebooks to do with all of this lack of standardization? How can you make sure your images look great on all devices?

Well, you could create a different version of your ebook for every device with different image sizes measured in pixels. But who wants to do that? I don’t.

I’ve found that an image of 600 x 800 pixels works well on most devices.

On some devices, such as an iPhone, a 600 x 800 image will take up most or all of the screen real estate. On others it will take less space, allowing some lines of text to accompany the image on the screen.

editing ebook images - 600 x 800

You may note that most e-readers and tablets have resolutions in excess of 600 x 800. But that does not mean you actually get that much screen retail space for your image. Margins, navigation, and other elements may take up some of that space. The Samsung Galaxy S5 has a screen resolution of 1920 × 1080; but an image at that size will be too large due to the screen real estate taken up within the Kindle app that you are using to read ebooks on this device.

eBook images sized perfectly for every device

There are some work-arounds if you want to create images of different dimensions for differing devices. You could use media queries.

Media queries make use of CSS3 to indicate CSS styles based on the device. This works (sometimes) because the device reads the CSS and only uses the styles you input based on the device type and its display features.

For example, you could create a media query for iPad that says:

If the device has a minimum width of 768 and a maximum width of 1024, make this image appear at 100%.

The CSS will look something like this:

@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 2)
img {
    width: 100%;
    height: auto;
}

To learn more about media queries and responsive design for ebooks, read Sanders Kleinfeld’s article “Responsive Ebook Design: A Primer.”

Why ebook images can cut into your profits

We’ve been talking about pixels in ebook images and screen resolution, but the actual file size of your image is also important to consider. The more pixels in your image, the larger the file size. An image that is too large will take up valuable real estate in the overall file size of your epub.

Every image you add to an epub increases its file size. Most online retailers have a file size limit for ebooks. Remember, the larger the file, the longer it will take to download to the reader’s device.

A retina-display iPad with a screen size of 1536 x 2048 pixels (total of 3,145,728 pixels) may lead you to believe you can create images of this size. But Apple limits your image sizes to 2 million pixels. If you try to upload an epub to Apple that has even one image of more than 2 million pixels, your ebook will be rejected.


Need some guidance on how to edit your ebook images?

I’ll send you my free instruction guide for cropping images to the correct ratios and setting pixel dimensions. The guide includes screenshots and a list of ratios and pixel dimensions for the most popular e-reading devices.

Click Here to Get Your PDF ‘Perfect eBook Images


Theoretically, you could make images for iPad 1200 x 1600 pixels, which is under the 2-million pixel limit.

Amazon charges a transfer fee based on ebook file size. At a cost of 15 cents per MB, you would be charged a $3 transfer fee, in addition to royalty cut taken by Amazon. (This charge only applies to the 70% royalty.)

Now take a look at the images of the parakeets again. Remember, I said that image 1 has a greater DPI than image 2. The images look the same. They appear to have the same high quality and color saturation as well. But the file size of image 1 is greater than the file size of image 2 due to the increased DPI.

You will often find advice that tells you to set your ebook images to 300 DPI. But DPI only matters in print. Remember, your device screen has a fixed resolution. You can’t change it by changing the DPI. Changing the DPI will not change the quality of the image on screen, if the pixel count remains the same. But increasing the DPI will increase the file size.

I recommend optimizing your images. In Photoshop, this function is found under File/Save For Web & Devices. This function reduces the DPI to 72 and strips out metadata or other hidden information that can increase the size of your file.

To clarify, DPI only affects the quality of a print image, but you do need to pay attention to DPI in ebook images. A lower DPI will mean a lower file size.

Using color and low-cost file types

This one is simple. Unlike in print books, you can use full-color ebook images at no extra cost. While there are a few devices that do not support color, I suggest you definitely use color, if appropriate.

You will also have the option of including a color profile. For print images, use a 4-color profile, CMYK. For digital images, always use a 3-color profile, RGB. Device screens produce images in 3 colors.

As for file types, use .jpg or .png images. If you are concerned about file sizes, use .jpg, which compresses images without significant quality loss. Just check the pixel count and file size to make sure you keep images at high quality without going over the required file sizes.

Don’t include spaces in the filenames of your ebook images. Use hyphens or underscores in place of spaces.

Do you have some tips to share about editing ebook images? Share by leaving a comment below.


Download this guide “Perfect eBook Images” I created to help you edit your images for ebooks. The guide includes images and instructions for selecting ratios and pixel dimensions. Plus, I included a list of the aspect ratios and screen resolutions of the most popular e-reading devices.

Click Here to Get Your PDF ‘Perfect eBook Images’


images: A male Malabar Parakeet (also known as Blue-winged Parakeet) near Bhadra Tiger Reserve, Karnataka, India.

By Yathin S Krishnappa (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons

3 thoughts on “Ultimate Guide to eBook Images

  1. Vennie Edstrom

    I blog frequently and I really appreciate your content. This article has truly peaked my interest. I will take a note of your blog and keep checking for new details about once per week. I opted in for your Feed too.

    Reply
  2. Brian Teeter

    An excellent post! And if I may say so, reading about responsive design, including the linked articles, which I read closely, left me running away screaming. It’s a lot to ask an author and self-publisher to be proficient in html, CSS, and other coding. And it’s not cheap to hire a coder to do all this. That said, I clearly understand the benefits of responsive design, having seen it applied with websites.

    My hope is that tools such as Adobe InDesign will incorporate responsive design into future versions. Presently, I am in the late stages of publishing a travel guidebook, “300 Healthy Travel Tips” (http://www.healthytrekking.com/300-healthy-travel-tips-book/). To expect an author to be so proficient in coding seems a bit much. My hope is that someday soon, authors can use InDesign or other layout tools to create books that rival what an ordinary person can do to design a fantastic website with Squarespace or Wix, both of which offer responsive design functionality in their templates. That lets the creator focus on content and creativity, and leave the challenges of coding to those blessed with the skills to comprehend how to make that a reality.

    I decided to design this with Apple iBooks Author for the iBooks version (which allows me to incorporate a rich layout including color, graphics, and photos on every page, along with video widgets that enable me to include YouTube videos). After countless hours learning how to use InDesign for e-books, I’ve resigned to having to design a far more dumbed-down version for Amazon Kindle, Kobo, Nook, etc. No matter what, that leaves me incredibly frustrated, knowing that I cannot offer readers in these other formats a visual experience that comes close to what is possible with the iBooks format. Reading the linked articles about responsive design, I’m sure some will roll their eyes at my decidedly old-world approach. But until it is possible to produce e-books without compromises, I will either have to follow this method or turn to the expensive services of someone who can do all of this.

    Thanks Toni, for a comprehensive article on photo resolution for e-books. In response, I found a wonderful website that offers a useful chart of the various screen resolutions of Apple iPad and iPhone devices: http://iosres.com

    Of course, that misses all things Android, but it’s a start. Thanks again!

    Reply
    1. TONI Ressaire Post author

      Brian, Thanks for the response. And you are correct; all of this techy stuff is a bit much for most authors. However, even if you don’t delve into all of the technical aspects of creating an ebook yourself, it helps to have some understanding of the jargon and the issues related to ebooks. If you hire someone to create your ebooks with images, you can at least have an idea of what to look for in an ebook designer. Some authors and indie publishers are rather tech savvy and do want to learn how to do it themselves. That’s why I write this blog.

      Apple iBooks Author is a great tool. I use it myself for children’s picture books. Unfortunately, as you say, it’s difficult to get that same result with any other tool. And even if you can, most e-readers can’t render all of the elements that an iPad can. Like you, I’m waiting for a tool that is simple and efficient. Although I understand the techy stuff, that doesn’t mean I want to have to deal with it with every ebook creation. I have used Adobe InDesign for ebooks in the past, but I’ve found that Adobe FrameMaker gives me more control. It does, however, have a steep learning curve. It’s primarily used by technical writers, which is why I use it.

      Thanks for the link. I’ve bookmarked it. That’s a good one. Good luck on your book. Your website is beautiful, by the way.

Leave a Reply

Your email address will not be published. Required fields are marked *