Current State

  • IMAGE_WIDTHS in vite.config.js applies to every import. ramil.avif (the 48px avatar) ships as ramil.MXAkiuyc.avif at 44 KB, the largest asset in build/_app/immutable/assets
  • Img.svelte filters the srcset client-side with sizes, but the files are still generated and deployed
  • PostPreview.svelte renders every card image with loading="eager" (via Articles) and fetchpriority="high"; with 91 cards on /todos/ the hint is meaningless
  • role="presentation" is set on card images that also carry alt={post_title} — one of the two is wrong

Tasks

  • Give avatars an explicit directive (?w=48;96) or a separate defaultDirectives rule by path
  • Trim IMAGE_WIDTHS to the breakpoints the layout actually hits after the grid fix
  • Eager + high priority only for the first row of a listing; lazy for the rest
  • Use empty alt (the title is next to the image) and drop role

Right-sized images

Widths that match usage, priority that means something

A static site template built with SvelteKit.

Sveleton, 2025