PrintFriendly

Images in the Print and PDF

Whether images appear at all, where they sit against the text, and how they behave across a page break. Your readers can also resize or delete any of them before printing, which is often what someone reaching for a print button actually wants.

Showing and Hiding

One setting in the builder, and the same one in the WordPress plugin's settings, decides whether images are included at all. Turning them off suits sites where the pictures are decorative and readers are printing for the text.

It is a default, not a rule: your reader can put them back from the preview.

Where Images Sit

Four choices, set once for your whole site:

ValueResult
blockCentered, each on its own line.
leftFloated left, text wrapping alongside.
rightFloated right. Text lines start in the same place, which reads faster.
noneLeft however they fell on your page.

Captions and Page Breaks

Wrap a picture and its caption together so a page break cannot separate them:

<div class="caption">
  <img src="/diagram.png" alt="">
  <p class="caption-text">Figure 1. How it fits together.</p>
</div>

For a tall image that lands awkwardly, force the break yourself. Use page-break-before to start a new sheet ahead of it, or page-break-after to end one behind it:

<img class="page-break-before" src="/tall-diagram.png" alt="">

Both are on choosing what gets printed with the rest of the classes.

When We Cannot Reach Your Images

The one setting worth knowing about

On Pro the article text travels from your reader's browser, so the words are never in question. Images are different on either plan: by default we fetch those from your server while building the PDF, as an anonymous visitor would. If your host blocks unfamiliar visitors, sits behind a firewall, or serves images only to logged-in users, that request comes back empty.

The Pro setting Encode images sends them from the reader's browser instead, so we never ask your server at all. It is the fix for images that appear in the preview and vanish from the download. Full detail on Actions and Pro Features.

Common Questions

Images are missing from the printout#

If they are in the preview but not the download, turn on Encode images, above. If they are missing from both, the causes are different and troubleshooting walks through them.

Can I control how large images print?#

Not as a setting, but your readers can resize them in the preview before printing. To constrain them for everyone, use custom CSS:

#pf-print-area img,
#printfriendly img {
  max-width: 400px !important;
}

Both wrappers, because the preview and the free PDF put your content in #pf-print-area and the Pro PDF puts it in #printfriendly.

A background image is not printing#

Backgrounds set in CSS are treated as decoration rather than content, and left out on purpose. If the picture matters, put it in an <img> tag.

On Pro, you can instead turn on bgImageUrlSupport=on in the settings tag, which converts CSS background images into ordinary images automatically. See the settings reference.

Separately, most browsers do not print background colors or images at all unless the reader turns that on in their print dialog.