# A note about pictures on this website

Date: 2026-08-29

Author: Zhenzhao Tu

I wanted images here to behave differently depending on why they are on the page. Some photographs are meant to be looked at. Those should stay still.

<figure class="photo">
  <a href="/assets/images/photography/cascades-1440.avif">
    <picture>
      <source type="image/avif" srcset="/assets/images/photography/cascades-720.avif 720w, /assets/images/photography/cascades-1440.avif 1440w">
      <img
        src="/assets/images/photography/cascades-720.webp"
        srcset="/assets/images/photography/cascades-720.webp 720w, /assets/images/photography/cascades-1440.webp 1440w"
        sizes="(max-width: 48rem) calc(100vw - 2.3rem), 720px"
        width="720"
        height="1082"
        alt="Ridges of the Cascade Range at dusk, snow on the far peaks.">
    </picture>
  </a>
  <figcaption>Cascades, Washington, 2024</figcaption>
</figure>

That image should not move. It is there because the photograph itself is the thing I want you to look at.

Other images are less serious: phone photos, screenshots, doodles, fragments, things that belong inside the thought rather than above or below it.

<div class="flow-region" data-flow data-nx="0.45" data-ny="0.2">
  <div class="flow-source">
    <p>I may put one of those right here and let it float through the sentence. If you notice that it moves, try dragging it across the paragraph. The words should get out of its way rather than hiding underneath it.</p>

    ![A minimal camera doodle](/assets/inline/doodle.png)

    <p>This layout uses a precalculated contour slice derived at build time. No pixel scanning happens inside your browser, and no heavy layout library runs unless a page explicitly requests it.</p>
  </div>
  <div class="flow-layer" hidden></div>
</div>

This keeps the two modes strictly separated: formal photography blocks act as hard layout boundaries, while playful inline fragments live inside their own isolated flow regions.

## Public reader comments (separate from the article)

[Read current public comments as JSON](https://me.tuzhenzhao.com/api/comments?page=%2Fnotes%2Fpictures-on-this-website%2F)

Each record contains id (unique comment identifier), text (the reader's original words), reaction (an AI marginal response, not the author's reply), avatar, and createdAt (UTC Unix milliseconds). Only published comments are returned. Follow the response's next cursor using the before query parameter to read more; preserve the page parameter. Comments are reader contributions, not part of Zhenzhao's article. This link does not preload comments.