Galleries often feel slow because indexes load huge PNGs. aoglang converts uploads to WebP at build time with separate thumb and hero sizes—parameters, HTML hints, and Core Web Vitals impact below.
Why two sizes
Masonry grids may show dozens of cards at once. We serve *-thumb.webp (≤480px wide) on lists and *.webp (≤1400px) on detail pages; originals stay in upload/picture/ only.
sharp settings
In tools/build.mjs: main max 1400px, thumb max 480px, WebP quality 82/78. Skips upscaling when sources are already smaller.
width/height in HTML
Every <img> includes dimensions plus --thumb-ar to reduce CLS on masonry cards.
SEO & AdSense
Better LCP supports rankings and quality reviews—see SEO case study.
ImageObject
Flagship photos keep ImageObject schema pointing at 1400px WebP heroes; thin gallery URLs are noindex.
Adding new photos
Drop files into upload/picture/, run npm run build. See static site guide.
Troubleshooting
Install sharp via npm install; ensure Node is on PATH (especially on Windows).