Skip to content

v1.4.1

Choose a tag to compare

@SumitGA SumitGA released this 06 Sep 11:08
· 5 commits to main-branch since this release

Blog images no longer shift the layout or all load at once.

Every body figure rendered as a bare . No width or height, so
each one pushed the text down as it arrived. No loading hint, so all
four figures on a post loaded eagerly, competing with the image the
reader could actually see. Both are Core Web Vitals metrics Google ranks
on, and both were free to fix.

A rehype plugin adds, to every body image:

  • loading="lazy" and decoding="async"
  • srcset at 480/720/1080/1440 with sizes for the 720px prose column
  • intrinsic width/height so the space is reserved before bytes arrive

It works on the rendered tree rather than changing how images are
authored. The markdown keeps full portable URLs — one that renders in
GitHub was a deliberate choice, and rewriting the source to carry
dimensions would undo it. Images not on our own Cloudinary get the
loading hints only, since we cannot resize what we do not serve.

Dimensions come from Cloudinary's fl_getinfo, a public delivery URL
rather than the Admin API, so no credentials are involved. It runs at
build and revalidate time only, never in a visitor's request, and is
memoised per process. On failure it returns null: the image still
renders, it just does not reserve space.

Eager, with fetchPriority="high". It is the LCP element on every post,
so lazy-loading the one image that has to arrive first would be exactly
backwards.

.post-cover sets width:100% and had no height:auto. The moment a tag
carries intrinsic width/height, the attribute height wins over the
scaled width and the image stretches. Anything given dimensions needs
height:auto alongside.

  • The active tag chip on the blog index uses accentBright behind white
    text and measures 3.93:1, below AA.
  • Both posts share a cover image, so the index shows the same artwork
    twice.
  • Production still requires a manual "Promote to Production" in Vercel.
  • Callout blocks (> [!NOTE]) are not rendered.
  • The admin blog editor cannot reference an existing Cloudinary asset,
    only upload a new one, so re-using an image duplicates it.