> ## Documentation Index
> Fetch the complete documentation index at: https://api.simkl.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Images

> How to fetch poster, fanart, episode, and avatar images, with all available sizes — with live previews of each.

Simkl returns image **paths** (not full URLs) inside `poster`, `fanart`, `episode`, and `avatar` fields. You build the final URL by combining a domain prefix, a category prefix, the image path, a size suffix, and a file extension.

We strongly recommend serving images through **[wsrv.nl](https://wsrv.nl)**, a free image proxy that caches, resizes, and converts on the fly. This minimizes load on Simkl's servers and gives you free image transformations.

All examples below append `&q=90` to the wsrv URL — this matches origin image quality. Without it, wsrv's default `&q=80` re-encodes images at noticeably smaller filesize and lower quality. Setting `&q=` above 90 is rarely useful — sizes balloon past origin without visible quality gain.

## Anatomy of a URL

<Frame>
  <img src="https://mintcdn.com/andrewmasyk/UtlOUkfgjaqqcXSu/images/url-anatomy.svg?fit=max&auto=format&n=UtlOUkfgjaqqcXSu&q=85&s=6cdd5a165365a005776d53ed44ae957a" alt="Image URL anatomy: category, image path, size, extension" width="740" height="95" data-path="images/url-anatomy.svg" />
</Frame>

| Part            | Example                                 | Notes                                                                                                                                                                                                                  |
| --------------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Proxy + domain  | `https://wsrv.nl/?url=https://simkl.in` | Always start with this.                                                                                                                                                                                                |
| **Category**    | `/posters/`                             | One of `/posters/`, `/fanart/`, `/episodes/`, `/avatars/`.                                                                                                                                                             |
| **Image path**  | `74/74415673dcdc9cdd`                   | The value from the API field (`poster`, `fanart`, etc.).                                                                                                                                                               |
| **Size suffix** | `_w`                                    | Determines pixel size — see each section below.                                                                                                                                                                        |
| **Extension**   | `.webp`                                 | Always `.webp` for posters, episodes, and every fanart size except `_d`. Two exceptions: fanart `_d` is `.jpg` only ([details](#fanart)), avatars are `.jpg` only ([details](#avatars)).                               |
| **Quality**     | `&q=90`                                 | Quality parameter for the wsrv proxy. `&q=90` matches origin quality (default `&q=80` reduces quality and filesize). Setting `&q=` above 90 is rarely useful — sizes balloon past origin without visible quality gain. |

<Warning>
  **Use `.webp` for posters, episodes, and fanart.**

  Two `.jpg` exceptions:

  * **Fanart `_d`** — original-resolution, darker tone, smaller filesize than `_medium.webp`. JPG only.
  * **Avatars** — small enough that the format doesn't matter; served as JPG without the `wsrv.nl` proxy.
</Warning>

## Code samples

Each tab covers a different real-world scenario. All samples handle missing/null paths by falling back to the **wsrv-proxied placeholders** documented in [Fallback when images are missing](#fallback-when-images-are-missing).

<Tabs>
  <Tab title="Basic builder">
    Single helper covering all four kinds, with null-safe fallback for posters.

    <CodeGroup>
      ```js Node / TypeScript theme={"theme":{"light":"github-light","dark":"vesper"}}
      const SIMKL_IMG_BASE = 'https://wsrv.nl/?url=https://simkl.in';

      function imageUrl(path, kind = 'posters', size = '_w', ext = '.webp') {
        if (!path) {
          if (kind !== 'posters') return null; // hide fanart/episode/avatar — no placeholder
          const ph = size === '_s' ? '_s' : '_c';
          return `${SIMKL_IMG_BASE}/poster_no_pic${ph}.png`;
        }
        return `${SIMKL_IMG_BASE}/${kind}/${path}${size}${ext}&q=90`;
      }

      imageUrl('74/74415673dcdc9cdd', 'posters', '_w');
      // → https://wsrv.nl/?url=https://simkl.in/posters/74/74415673dcdc9cdd_w.webp&q=90

      imageUrl(null, 'posters', '_c');
      // → https://wsrv.nl/?url=https://simkl.in/poster_no_pic_c.png
      ```

      ```python Python theme={"theme":{"light":"github-light","dark":"vesper"}}
      SIMKL_IMG_BASE = 'https://wsrv.nl/?url=https://simkl.in'

      def image_url(path, kind='posters', size='_w', ext='.webp'):
          if not path:
              if kind != 'posters':
                  return None  # no placeholder for fanart/episode/avatar
              ph = '_s' if size == '_s' else '_c'
              return f'{SIMKL_IMG_BASE}/poster_no_pic{ph}.png'
          return f'{SIMKL_IMG_BASE}/{kind}/{path}{size}{ext}&q=90'
      ```

      ```swift Swift theme={"theme":{"light":"github-light","dark":"vesper"}}
      enum SimklImage {
          static let imgBase = "https://wsrv.nl/?url=https://simkl.in"

          static func url(path: String?, kind: String = "posters",
                          size: String = "_w", ext: String = ".webp") -> String? {
              guard let p = path, !p.isEmpty else {
                  guard kind == "posters" else { return nil }
                  let ph = size == "_s" ? "_s" : "_c"
                  return "\(imgBase)/poster_no_pic\(ph).png"
              }
              return "\(imgBase)/\(kind)/\(p)\(size)\(ext)&q=90"
          }
      }
      ```

      ```kotlin Kotlin theme={"theme":{"light":"github-light","dark":"vesper"}}
      object SimklImage {
          private const val IMG_BASE = "https://wsrv.nl/?url=https://simkl.in"

          fun url(path: String?, kind: String = "posters",
                  size: String = "_w", ext: String = ".webp"): String? {
              if (path.isNullOrEmpty()) {
                  if (kind != "posters") return null
                  val ph = if (size == "_s") "_s" else "_c"
                  return "$IMG_BASE/poster_no_pic$ph.png"
              }
              return "$IMG_BASE/$kind/$path$size$ext&q=90"
          }
      }
      ```

      ```go Go theme={"theme":{"light":"github-light","dark":"vesper"}}
      package simklimg

      import "fmt"

      const imgBase = "https://wsrv.nl/?url=https://simkl.in"

      func URL(path, kind, size, ext string) string {
          if path == "" {
              if kind != "posters" {
                  return ""
              }
              ph := "_c"
              if size == "_s" {
                  ph = "_s"
              }
              return fmt.Sprintf("%s/poster_no_pic%s.png", imgBase, ph)
          }
          return fmt.Sprintf("%s/%s/%s%s%s&q=90", imgBase, kind, path, size, ext)
      }
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Responsive HTML">
    Generate a `<img srcset>` so the browser picks the right size for the user's screen. The `src` falls back to the wsrv-proxied placeholder when `poster` is null.

    ```html theme={"theme":{"light":"github-light","dark":"vesper"}}
    <img
      src="https://wsrv.nl/?url=https://simkl.in/posters/74/74415673dcdc9cdd_c.webp&q=90"
      sizes="(max-width: 480px) 170px, 190px"
      width="170" height="250" loading="lazy"
      onerror="this.onerror=null;this.src='https://wsrv.nl/?url=https://simkl.in/poster_no_pic_c.png';this.removeAttribute('srcset');"
      alt="Poster"
    />
    ```

    <Tip>
      Always set explicit `width` / `height` so the browser reserves layout space and avoids cumulative layout shift (CLS).
    </Tip>
  </Tab>

  <Tab title="React">
    A component with built-in fallback and `onError` recovery for stale paths.

    ```jsx theme={"theme":{"light":"github-light","dark":"vesper"}}
    import { useState } from 'react';

    const SIMKL_IMG_BASE = 'https://wsrv.nl/?url=https://simkl.in';
    const PLACEHOLDER = `${SIMKL_IMG_BASE}/poster_no_pic_c.png`;

    export function Poster({ path, size = '_c', alt = '' }) {
      const initial = path ? `${SIMKL_IMG_BASE}/posters/${path}${size}.webp&q=90` : PLACEHOLDER;
      const [src, setSrc] = useState(initial);
      return (
        <img
          src={src}
          alt={alt}
          width="170"
          height="250"
          loading="lazy"
          onError={() => setSrc(PLACEHOLDER)}
        />
      );
    }
    ```

    <Tip>
      `onError` falls back if the image 404s for any reason (e.g. the title was merged and the path is stale).
    </Tip>
  </Tab>

  <Tab title="Blur-up loading">
    Show a tiny `_s48` fanart thumbnail upscaled with a CSS blur, then swap in the full image when loaded. **Fanart has no placeholder** — if `path` is null, render nothing.

    ```jsx theme={"theme":{"light":"github-light","dark":"vesper"}}
    import { useState } from 'react';

    const SIMKL_IMG_BASE = 'https://wsrv.nl/?url=https://simkl.in';

    export function Fanart({ path }) {
      const [loaded, setLoaded] = useState(false);
      if (!path) return null;

      const tiny = `${SIMKL_IMG_BASE}/fanart/${path}_s48.webp&q=90`;
      const full = `${SIMKL_IMG_BASE}/fanart/${path}_medium.webp&q=90`;

      return (
        <div style={{ position: 'relative' }}>
          <img src={tiny} alt="" aria-hidden
            style={{
              filter: 'blur(20px)', transform: 'scale(1.1)',
              width: '100%', position: 'absolute', inset: 0,
            }}
          />
          <img src={full} alt="" onLoad={() => setLoaded(true)}
            style={{
              width: '100%', opacity: loaded ? 1 : 0,
              transition: 'opacity 300ms', position: 'relative',
            }}
          />
        </div>
      );
    }
    ```
  </Tab>

  <Tab title="iOS — SDWebImage / Kingfisher">
    Use a remote placeholder URL or a bundled image — both work.

    ```swift theme={"theme":{"light":"github-light","dark":"vesper"}}
    import SDWebImage

    let url = SimklImage.url(path: poster, kind: "posters", size: "_c")
        .flatMap(URL.init(string:))
    let placeholderURL = URL(string: "https://wsrv.nl/?url=https://simkl.in/poster_no_pic_c.png")!

    imageView.sd_setImage(with: url, placeholderImage: nil) { image, _, _, _ in
        if image == nil {
            imageView.sd_setImage(with: placeholderURL)
        }
    }
    ```

    Or with [Kingfisher](https://github.com/onevcat/Kingfisher):

    ```swift theme={"theme":{"light":"github-light","dark":"vesper"}}
    import Kingfisher

    let url = SimklImage.url(path: poster, kind: "posters", size: "_c")
        .flatMap(URL.init(string:))

    imageView.kf.setImage(
        with: url,
        options: [
            .onFailureImage(UIImage(named: "poster_placeholder")),
            // …or fetch the wsrv placeholder remotely:
            // .alternativeSources([.network(URL(string:
            //     "https://wsrv.nl/?url=https://simkl.in/poster_no_pic_c.png")!)])
        ]
    )
    ```
  </Tab>

  <Tab title="Android — Coil">
    Loading via [Coil](https://coil-kt.github.io/coil/) on Android Compose, with the wsrv-proxied placeholder used both as `placeholder` and `error`:

    ```kotlin theme={"theme":{"light":"github-light","dark":"vesper"}}
    import coil.compose.AsyncImage
    import coil.request.ImageRequest

    AsyncImage(
        model = ImageRequest.Builder(LocalContext.current)
            .data(SimklImage.url(path = poster, size = "_c"))
            .crossfade(true)
            .build(),
        contentDescription = title,
        placeholder = rememberAsyncImagePainter(
            "https://wsrv.nl/?url=https://simkl.in/poster_no_pic_c.png"
        ),
        error = rememberAsyncImagePainter(
            "https://wsrv.nl/?url=https://simkl.in/poster_no_pic_c.png"
        ),
        contentScale = ContentScale.Crop,
        modifier = Modifier.size(width = 170.dp, height = 250.dp),
    )
    ```
  </Tab>
</Tabs>

## Posters

Six sizes, ranging from cinematic landscape (`_w`) down to a 40-pixel sliver (`_s`).

<Tabs>
  <Tab title="Previews">
    <Columns cols={3}>
      <div>
        <a href="https://wsrv.nl/?url=https://simkl.in/posters/74/74415673dcdc9cdd_w.webp&q=90" target="_blank" rel="noopener">
          <img src="https://wsrv.nl/?url=https://simkl.in/posters/74/74415673dcdc9cdd_w.webp&q=90" alt="_w" />
        </a>

        **`_w`** — 600 × 338, landscape, cropped
      </div>

      <div>
        <a href="https://wsrv.nl/?url=https://simkl.in/posters/74/74415673dcdc9cdd_m.webp&q=90" target="_blank" rel="noopener">
          <img src="https://wsrv.nl/?url=https://simkl.in/posters/74/74415673dcdc9cdd_m.webp&q=90" alt="_m" />
        </a>

        **`_m`** — 340 × \*, medium portrait
      </div>

      <div>
        <a href="https://wsrv.nl/?url=https://simkl.in/posters/74/74415673dcdc9cdd_ca.webp&q=90" target="_blank" rel="noopener">
          <img src="https://wsrv.nl/?url=https://simkl.in/posters/74/74415673dcdc9cdd_ca.webp&q=90" alt="_ca" />
        </a>

        **`_ca`** — 190 × 279 (or 285), card aspect
      </div>

      <div>
        <a href="https://wsrv.nl/?url=https://simkl.in/posters/74/74415673dcdc9cdd_c.webp&q=90" target="_blank" rel="noopener">
          <img src="https://wsrv.nl/?url=https://simkl.in/posters/74/74415673dcdc9cdd_c.webp&q=90" alt="_c" />
        </a>

        **`_c`** — 170 × 250 (or 256), compact card
      </div>

      <div>
        <a href="https://wsrv.nl/?url=https://simkl.in/posters/74/74415673dcdc9cdd_cm.webp&q=90" target="_blank" rel="noopener">
          <img src="https://wsrv.nl/?url=https://simkl.in/posters/74/74415673dcdc9cdd_cm.webp&q=90" alt="_cm" />
        </a>

        **`_cm`** — 84 × 124, card mini
      </div>

      <div>
        <a href="https://wsrv.nl/?url=https://simkl.in/posters/74/74415673dcdc9cdd_s.webp&q=90" target="_blank" rel="noopener">
          <img src="https://wsrv.nl/?url=https://simkl.in/posters/74/74415673dcdc9cdd_s.webp&q=90" alt="_s" />
        </a>

        **`_s`** — 40 × 57, smallest thumbnail
      </div>
    </Columns>
  </Tab>

  <Tab title="Reference table">
    | Suffix | Size               | File size | Notes                                    | Example                                                                                 |
    | ------ | ------------------ | --------- | ---------------------------------------- | --------------------------------------------------------------------------------------- |
    | `_w`   | 600 × 338          | \~41 KB   | Landscape, cropped. Hero/header banners. | [View](https://wsrv.nl/?url=https://simkl.in/posters/74/74415673dcdc9cdd_w.webp\&q=90)  |
    | `_m`   | 340 × \*           | \~49 KB   | Medium portrait. Detail screens.         | [View](https://wsrv.nl/?url=https://simkl.in/posters/74/74415673dcdc9cdd_m.webp\&q=90)  |
    | `_ca`  | 190 × 279 (or 285) | \~21 KB   | Card aspect. Grids.                      | [View](https://wsrv.nl/?url=https://simkl.in/posters/74/74415673dcdc9cdd_ca.webp\&q=90) |
    | `_c`   | 170 × 250 (or 256) | \~18 KB   | Compact card. Lists.                     | [View](https://wsrv.nl/?url=https://simkl.in/posters/74/74415673dcdc9cdd_c.webp\&q=90)  |
    | `_cm`  | 84 × 124           | \~5.7 KB  | Card mini. Dense lists.                  | [View](https://wsrv.nl/?url=https://simkl.in/posters/74/74415673dcdc9cdd_cm.webp\&q=90) |
    | `_s`   | 40 × 57            | \~1.6 KB  | Smallest. Inline / autocomplete.         | [View](https://wsrv.nl/?url=https://simkl.in/posters/74/74415673dcdc9cdd_s.webp\&q=90)  |
  </Tab>
</Tabs>

## Fanart

Wide background art — the cinematic still you typically use behind the title on a detail screen.

<Tabs>
  <Tab title="Previews">
    <Frame caption="`_medium` — 1920 × 1080, full HD">
      <a href="https://wsrv.nl/?url=https://simkl.in/fanart/71/710408ec0a1bd207_medium.webp&q=90" target="_blank" rel="noopener">
        <img src="https://wsrv.nl/?url=https://simkl.in/fanart/71/710408ec0a1bd207_medium.webp&q=90" alt="_medium" />
      </a>
    </Frame>

    <Columns cols={2}>
      <Frame caption="`_mobile` — 960 × 540">
        <a href="https://wsrv.nl/?url=https://simkl.in/fanart/71/710408ec0a1bd207_mobile.webp&q=90" target="_blank" rel="noopener">
          <img src="https://wsrv.nl/?url=https://simkl.in/fanart/71/710408ec0a1bd207_mobile.webp&q=90" alt="_mobile" />
        </a>
      </Frame>

      <Frame caption="`_w` — 600 × 338">
        <a href="https://wsrv.nl/?url=https://simkl.in/fanart/71/710408ec0a1bd207_w.webp&q=90" target="_blank" rel="noopener">
          <img src="https://wsrv.nl/?url=https://simkl.in/fanart/71/710408ec0a1bd207_w.webp&q=90" alt="_w" />
        </a>
      </Frame>
    </Columns>

    <Columns cols={2}>
      <Frame caption="`_d.jpg` — original size, darker, smaller filesize. JPG only — the one fanart size that isn't `.webp`.">
        <a href="https://wsrv.nl/?url=https://simkl.in/fanart/71/710408ec0a1bd207_d.jpg&q=90" target="_blank" rel="noopener">
          <img src="https://wsrv.nl/?url=https://simkl.in/fanart/71/710408ec0a1bd207_d.jpg&q=90" alt="_d" />
        </a>
      </Frame>

      <Frame caption="`_s48` — 48 × 27, blur-up placeholder">
        <a href="https://wsrv.nl/?url=https://simkl.in/fanart/71/710408ec0a1bd207_s48.webp&q=90" target="_blank" rel="noopener">
          <img src="https://wsrv.nl/?url=https://simkl.in/fanart/71/710408ec0a1bd207_s48.webp&q=90" alt="_s48" width="160" />
        </a>
      </Frame>
    </Columns>
  </Tab>

  <Tab title="Reference table">
    | Suffix    | Size        | File size | Notes                                                                            | Example                                                                                    |
    | --------- | ----------- | --------- | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
    | `_medium` | 1920 × 1080 | \~357 KB  | Full HD. Detail-screen hero.                                                     | [View](https://wsrv.nl/?url=https://simkl.in/fanart/71/710408ec0a1bd207_medium.webp\&q=90) |
    | `_mobile` | 960 × 540   | \~96 KB   | Mobile-optimized hero.                                                           | [View](https://wsrv.nl/?url=https://simkl.in/fanart/71/710408ec0a1bd207_mobile.webp\&q=90) |
    | `_w`      | 600 × 338   | \~29 KB   | Card-friendly.                                                                   | [View](https://wsrv.nl/?url=https://simkl.in/fanart/71/710408ec0a1bd207_w.webp\&q=90)      |
    | `_d`      | original    | \~103 KB  | Darker, smaller filesize. **JPG only — the one fanart size that isn't `.webp`.** | [View](https://wsrv.nl/?url=https://simkl.in/fanart/71/710408ec0a1bd207_d.jpg\&q=90)       |
    | `_s48`    | 48 × 27     | \~1 KB    | Tiny placeholder for blur-up effects.                                            | [View](https://wsrv.nl/?url=https://simkl.in/fanart/71/710408ec0a1bd207_s48.webp\&q=90)    |
  </Tab>
</Tabs>

## Episodes

<Tabs>
  <Tab title="Previews">
    <Columns cols={3}>
      <Frame caption="`_w` — 600 × 338">
        <a href="https://wsrv.nl/?url=https://simkl.in/episodes/26/265319260301d2ee2_w.webp&q=90" target="_blank" rel="noopener">
          <img src="https://wsrv.nl/?url=https://simkl.in/episodes/26/265319260301d2ee2_w.webp&q=90" alt="_w" />
        </a>
      </Frame>

      <Frame caption="`_c` — 210 × 118">
        <a href="https://wsrv.nl/?url=https://simkl.in/episodes/26/265319260301d2ee2_c.webp&q=90" target="_blank" rel="noopener">
          <img src="https://wsrv.nl/?url=https://simkl.in/episodes/26/265319260301d2ee2_c.webp&q=90" alt="_c" />
        </a>
      </Frame>

      <Frame caption="`_m` — 112 × 63">
        <a href="https://wsrv.nl/?url=https://simkl.in/episodes/26/265319260301d2ee2_m.webp&q=90" target="_blank" rel="noopener">
          <img src="https://wsrv.nl/?url=https://simkl.in/episodes/26/265319260301d2ee2_m.webp&q=90" alt="_m" />
        </a>
      </Frame>
    </Columns>
  </Tab>

  <Tab title="Reference table">
    | Suffix | Size      | File size | Example                                                                                  |
    | ------ | --------- | --------- | ---------------------------------------------------------------------------------------- |
    | `_w`   | 600 × 338 | \~29 KB   | [View](https://wsrv.nl/?url=https://simkl.in/episodes/26/265319260301d2ee2_w.webp\&q=90) |
    | `_c`   | 210 × 118 | \~8 KB    | [View](https://wsrv.nl/?url=https://simkl.in/episodes/26/265319260301d2ee2_c.webp\&q=90) |
    | `_m`   | 112 × 63  | \~3 KB    | [View](https://wsrv.nl/?url=https://simkl.in/episodes/26/265319260301d2ee2_m.webp\&q=90) |
  </Tab>
</Tabs>

## Avatars

<Tabs>
  <Tab title="Previews">
    <Columns cols={5}>
      <div>
        <a href="https://simkl.in/avatars/1/1_24.jpg" target="_blank" rel="noopener">
          <img src="https://simkl.in/avatars/1/1_24.jpg" alt="_24" width="24" height="24" />
        </a>

        **`_24`** — 24 × 24
      </div>

      <div>
        <a href="https://simkl.in/avatars/1/1_100.jpg" target="_blank" rel="noopener">
          <img src="https://simkl.in/avatars/1/1_100.jpg" alt="_100" width="100" height="100" />
        </a>

        **`_100`** — 100 × 100
      </div>

      <div>
        <a href="https://simkl.in/avatars/1/1.jpg" target="_blank" rel="noopener">
          <img src="https://simkl.in/avatars/1/1.jpg" alt="default" width="200" height="200" />
        </a>

        **`(none)`** — 200 × 200
      </div>

      <div>
        <a href="https://simkl.in/avatars/1/1_256.jpg" target="_blank" rel="noopener">
          <img src="https://simkl.in/avatars/1/1_256.jpg" alt="_256" width="200" height="200" />
        </a>

        **`_256`** — 256 × 256
      </div>

      <div>
        <a href="https://simkl.in/avatars/1/1_512.jpg" target="_blank" rel="noopener">
          <img src="https://simkl.in/avatars/1/1_512.jpg" alt="_512" width="200" height="200" />
        </a>

        **`_512`** — 512 × 512
      </div>
    </Columns>
  </Tab>

  <Tab title="Reference table">
    | Suffix   | Size      | File size | Example                                      |
    | -------- | --------- | --------- | -------------------------------------------- |
    | `_24`    | 24 × 24   | \~0.7 KB  | [View](https://simkl.in/avatars/1/1_24.jpg)  |
    | `_100`   | 100 × 100 | \~5.6 KB  | [View](https://simkl.in/avatars/1/1_100.jpg) |
    | *(none)* | 200 × 200 | \~17 KB   | [View](https://simkl.in/avatars/1/1.jpg)     |
    | `_256`   | 256 × 256 | \~26 KB   | [View](https://simkl.in/avatars/1/1_256.jpg) |
    | `_512`   | 512 × 512 | \~79 KB   | [View](https://simkl.in/avatars/1/1_512.jpg) |
  </Tab>
</Tabs>

<Note>
  Avatars are JPG-only and served directly from `simkl.in` (no `wsrv.nl` proxy needed for these — they're already small).
</Note>

## Fallback when images are missing

When a `poster`, `fanart`, or `episode` field is `null` (or the path is empty), use these built-in placeholders. They live at the root of `simkl.in` and are served through wsrv.nl just like the other images:

<Columns cols={4}>
  <Frame caption="default — full size">
    <a href="https://wsrv.nl/?url=https://simkl.in/poster_no_pic.png" target="_blank" rel="noopener">
      <img src="https://wsrv.nl/?url=https://simkl.in/poster_no_pic.png" alt="default placeholder" width="170" />
    </a>
  </Frame>

  <Frame caption="_c — 170 × 250">
    <a href="https://wsrv.nl/?url=https://simkl.in/poster_no_pic_c.png" target="_blank" rel="noopener">
      <img src="https://wsrv.nl/?url=https://simkl.in/poster_no_pic_c.png" alt="_c placeholder" width="170" />
    </a>
  </Frame>

  <Frame caption="_c grey">
    <a href="https://wsrv.nl/?url=https://simkl.in/poster_no_pic_c_grey.png" target="_blank" rel="noopener">
      <img src="https://wsrv.nl/?url=https://simkl.in/poster_no_pic_c_grey.png" alt="_c grey placeholder" width="170" />
    </a>
  </Frame>

  <Frame caption="_s — 40 × 57">
    <a href="https://wsrv.nl/?url=https://simkl.in/poster_no_pic_s.png" target="_blank" rel="noopener">
      <img src="https://wsrv.nl/?url=https://simkl.in/poster_no_pic_s.png" alt="_s placeholder" width="40" />
    </a>
  </Frame>
</Columns>

| URL                                                              | Use for                            | File size | Example                                                                |
| ---------------------------------------------------------------- | ---------------------------------- | --------- | ---------------------------------------------------------------------- |
| `https://wsrv.nl/?url=https://simkl.in/poster_no_pic.png`        | Default — full-size missing-poster | \~25 KB   | [View](https://wsrv.nl/?url=https://simkl.in/poster_no_pic.png)        |
| `https://wsrv.nl/?url=https://simkl.in/poster_no_pic_c.png`      | Match `_c` posters (170 × 250)     | \~9 KB    | [View](https://wsrv.nl/?url=https://simkl.in/poster_no_pic_c.png)      |
| `https://wsrv.nl/?url=https://simkl.in/poster_no_pic_c_grey.png` | Match `_c` with a softer grey tone | \~24 KB   | [View](https://wsrv.nl/?url=https://simkl.in/poster_no_pic_c_grey.png) |
| `https://wsrv.nl/?url=https://simkl.in/poster_no_pic_s.png`      | Match `_s` posters (40 × 57)       | \~1.7 KB  | [View](https://wsrv.nl/?url=https://simkl.in/poster_no_pic_s.png)      |

<Note>
  **Fanart has no dedicated placeholder.** When `fanart` is `null`, hide the fanart element rather than showing a broken/empty image — most apps render a solid color or use the poster's blurred-up `_s48` thumbnail behind a tint instead.
</Note>

## Caching

<Warning>
  **Cache images by URL forever.** The image at a given URL never changes — once you've downloaded it, don't fetch it again. Re-downloading wastes your users' bandwidth and ours.
</Warning>
