Work in progressThis site is being built in public — expect rough edges, missing screenshots and drops that change under you.

← the log

Blur-up your Hydrogen product images, when Shopify has nowhere to put the hash

Drop 006·In progress·Hydrogen, Storefront API, Metafields, Performance

Shopify has nowhere to put a BlurHash. There is no image-level metafield — MEDIA_IMAGE is deprecated as a metafield owner and PRODUCTIMAGE never existed — so the one short string that describes an image cannot be stored on that image. You keep it on the product and key it back yourself, which turns out to be the shape for anything you derive per-image.

What it covers

  • Where the hash actually goes, and why you key it by image ID rather than by position
  • Why onLoad never fires for an image the browser has already decoded
  • A placeholder that does not cause the layout shift it exists to prevent
  • Why a blurred canvas does nothing for your LCP, and what that means