How to Optimize Images Before Deploy

A full camera photo is often larger than the HTML and CSS combined. Shrink it before deploy so the preview and the live site are both fast.

Resize to the displayed width

A 1200-pixel-wide hero does not need a 4000-pixel file. Re-export near the maximum width that is actually shown. Save photos as WebP or JPEG, and flat icons as SVG, not a huge PNG.

Set dimensions and alt

Set width and height so the layout does not jump when the image arrives. alt describes the image for screen readers and for when the file fails to load. An empty alt is only for a purely decorative image.

Do not load hidden images early

An image below the fold can use loading="lazy". Do not lazy-load the hero, because that is what people see first. Check the Network tab: one image over 500 KB can usually shrink without an obvious visual change.

After the file is light, save it in the project asset folder and deploy from app.clincoo.buzz. Repeat the check on the public page, not only in the editor preview.