ReKoPub/testdata/pages/photo-essay.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>A Walk Through the Print Shop</title>
  <meta property="og:site_name" content="Letterpress Weekly">
  <meta name="author" content="Grace Hopper">
  <meta property="og:image" content="/img/press.jpg">
</head>
<body>
  <nav><a href="/">Home</a> <a href="/essays">Essays</a></nav>
  <article>
    <h1>A Walk Through the Print Shop</h1>
    <p>The print shop on Mill Street has been running since 1894. Its owners still set type by hand, ink the rollers each morning and print posters, wedding invitations and the occasional book on machines older than anyone who works there.</p>
    <figure>
      <img src="../img/press.jpg" alt="The old printing press" width="2000" height="1200">
      <figcaption>The 1890s press still runs every Friday.</figcaption>
    </figure>
    <p>Every job starts at the type cases. Each drawer holds a single typeface in a single size, with compartments for every letter, number and punctuation mark. The most used letters sit closest to the compositor's hand.</p>
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACw=" data-src="/img/diagram.png" alt="How ink reaches the paper" class="lazyload">
    <p>Once a page is set, it is locked into a frame called a chase and placed on the press bed. The rollers pass over the type, depositing a thin film of ink, and the paper is pressed against it for a crisp, slightly sunken impression.</p>
    <picture>
      <source srcset="/img/type.avif" type="image/avif">
      <source srcset="/img/type.webp" type="image/webp">
      <img src="/img/type-fallback.jpg" alt="Drawers of wooden type">
    </picture>
    <p>Not every image survives a move to e-ink: this paragraph has an inline <img src="/img/missing.png" alt="small press icon"> icon whose file has gone missing.</p>
    <img src="https://tracker.example/p.gif" width="1" height="1" alt="">
    <p>By late afternoon the shop is quiet again. The day's posters hang to dry on lines strung across the ceiling, and the type is distributed back into its cases, letter by letter, ready for tomorrow.</p>
  </article>
  <footer>&copy; Letterpress Weekly</footer>
</body>
</html>