Most slow homepages are one oversized photo. Optimizing images means the browser downloads something close to what it paints, in a format that compresses well, without shoving the page down when the file arrives.

How that shows up in SEO: speed and SEO. The three names: Core Web Vitals. Measure: page speed test.

Quick answer

Resize first. Then convert. Then compress. Set width and height. Lazy-load the rest. Keep the hero eager if it is the LCP element.

Huge camera photo versus the same image sized for a website hero
The camera original is for editing. The site gets a smaller export.

The order that works

  1. Find the LCP image on a mobile test. That is the one to fix first.
  2. Export a width near the largest display size. Retina can be 2x, not 8x.
  3. Use WebP or AVIF when the stack supports it. Keep a fallback if you must.
  4. Compress until it looks acceptable on a phone. Do not chase a 10KB trophy if the product looks muddy.
  5. Put width and height (or aspect-ratio) so CLS stays down.
  6. Lazy-load below the fold. Do not lazy-load the hero if it is the first paint.
  7. Write alt text that describes the image. That is access and SEO, not speed.
Screenshot needed

Network panel or a speed report highlighting one 2MB PNG hero. ALT: Speed report showing a large homepage image as LCP.

Stack notes

WordPress: check the file in Media, not only the page. Page builders love full-bleed backgrounds. Speed up WordPress.

Shopify: use the image filters the theme already has. Do not paste an external full-size URL into the customizer. Speed up Shopify.

AI product shots still need the same export step: AI product photography.

Hero looks fine on Wi-Fi and dies on 4G?

Send the URL. Contact.