Image General

All images should be in a PNG format excluding the cover that should be a JPG image. Transparent PNGs should not exist and should have a white background (fixed layout is an exception to transparency).

All images with a width exceeding 300px should be resized to 1000px unless the overall aspect ratio exceeds 4.5 million pixels then resize to 980px. If an image has a width below the 900px its advised to review the image for pixelation. If pixelation does exist ask editorial if they have a higher res image for replacement.

Vertical images used in the printed edition (maps for example) should be rotated 90 degrees so the text is readable and not sideways or rotated allowing the Legend readability to flow with the text.

Directory

All images should be moved into an img directory. If an image director is named images or image it should be renamed to the shorthand img, example:

PPI

Image resolution shouldn't exceed 150ppi.

Tag Structure

<img> tags should follow the coding structure:

html
1
<img id="" class="" src="" alt="" />

alt

Alt tags should always be descriptive and never empty, example:

Bad:

html
1
<img src="../img/page123.png" alt="image" />
2

3
<img src="../img/page124.png" alt="" />

Good:

html
1
<img src="../img/page123.png" alt="First hit on softball field" />

div

Images should be in a <div> tag not <p> tag unless the image is inline, example:

html
1
<div class="style">
2
  <img src="../img/page123.png" alt="First hit on softball field" />
3
</div>

If the image adds value to the content it should be referenced in the epub:type="loi" within the toc.xhtml and the id can be applied to the div, example:

html
1
<div id="img123" class="style">
2
  <img src="../img/page123.png" alt="First hit on softball field" />
3
</div>

the following is also acceptable:

html
1
<div class="style">
2
  <img id="foobar" src="../img/foobar.png" alt="Foo Bar" />
3
</div>

Naming

If there is a print edition the image should be named to reflect that page. For example if there are 300 pages and the image is for page 10 name it page010.png because this helps with scripting and produces a top-down reading order.

Example image found on page 23 out of a 300 page book:

html
1
<div id="img023" class="style">
2
  <img src="../img/page023.png" alt="First hit on softball field" />
3
</div>

If more than one image exists on a page then append a letter numerical value, example:

First Image:

html
1
<div id="img023a" class="style">
2
  <img src="../img/page023a.png" alt="First hit during softball field" />
3
</div>

Second Image:

html
1
<div id="img023b" class="style">
2
  <img src="../img/page023b.png" alt="First hit on second base" />
3
</div>