Documentation

Image Processing

Scribe recommends the following programs and settings for processing images locally for use in e-books.

The Digital Hub uses open-source image libraries to perform image conversions. Details about Digital Hub image conversions can be found here. For best results, Scribe recommends performing image conversions locally before uploading files to the Digital Hub.

Below are some suggested programs and best practices for image conversions. If you have any questions or think this page needs any additional information, please email support@scribenet.com.

Programs

The three main programs Scribe uses for image processing are Photoshop (Mac or PC), Gimp (Mac, PC, Linux), and IrfanView (PC only). Gimp and IrfanView are both free. Following a free trial, Photoshop is a subscription-based product in Adobe’s Creative Cloud.

Image Size

Body Images

Best Practice: Scribe’s current default is to set the maximum size for an image to 600x600 pixels (or 600 pixels on the larger side). This prevents the images from being cut off on devices that do not support larger image sizes.

However, larger images (up to 2000x2000 pixels) should be used for text heavy images, maps, and other images with aspects that would benefit from the increased size.

Cover Image

Best Practice: Set the maximum size of a cover image to 1800 pixels on its largest side. (No side should ever be smaller than 500 pixels.)

Settings

DPI

Scribe recommends using a consistent DPI of between 120 and 300 for all images.

Colorspace

Change color to RGB (rather than CMYK) format.

CSS

Standard Images

Scribe adheres to a 600x600 pixels maximum size for images. If using Scribe's default CSS, these standard images will be handled properly, without issue.

Oversized Images

When using oversized images (e.g., for images that have large amounts of text that needs to remain legible) use a custom CSS in order to prevent the images from being cut off or spanning across multiple pages on some devices. Scribe uses percentages to control the appearance of these larger images across devices:

  • img.tall {height: 95%;}
  • img.wide {width: 95%;}
  • img.full {height: 95%; width: 95%;}

With “tall” being applied to images taller than 600 pixels, “wide” being applied to images wider than 600 pixels, and “full” being applied to images both taller and wider than 600 pixels. In the HTML, give the image a class value that corresponds to the appropriate CSS callout. For example,

<p class="fig"><img class="tall" src="images/scr-projectcode-fig1.jpeg" alt="" width="500" height="900"/></p>

Batches

A tutorial that provides step-by-step instructions for batch processing in Photoshop can be found here.