How to Optimize Images for Websites: Formats, SEO, JSON-LD, and Lighthouse
Image SEO guide WebP and AVIF
This web image guide explains which images a modern website actually needs, how hero images influence Largest Contentful Paint, why Open Graph and JSON-LD images matter, and how to improve Lighthouse without making your pages look cheap.
The advice here applies to Blazor, ASP.NET Core, React, Vue, WordPress, static HTML sites, and most CMS setups. The stack changes, but image SEO, responsive delivery, and performance budgets stay the same.
Why website image optimization matters
Images usually carry the largest bytes on a page, and they often decide whether your homepage feels instant or sluggish. The same image system also affects search snippets, social previews, crawl clarity, and how professional your brand looks when people first encounter it.
Faster LCP and lower bandwidth
Right-sized hero images, modern formats, and explicit width and height reduce layout instability and cut transfer size.
Speed
Stronger search and discovery signals
Open Graph images, descriptive alt text, and article schema images help search engines and sharing platforms understand the page.
SEO
Cleaner mobile experience
Responsive variants stop phones from downloading oversized desktop assets and keep scrolling smooth on slower connections.
UX
Which website images you normally need
Most websites do not need more image types. They need the right image types, sized and labeled correctly. Think in roles, not in random uploads.
Hero or LCP image
This is the main visual near the top of the page. It often becomes the Largest Contentful Paint element, so it must be compressed carefully and should not be lazy loaded.
Purpose: first impression and LCP
Inline content images
These support the article itself. They should explain the content, include clear alt text where useful, and be responsive so they scale between desktop and mobile layouts.
Purpose: support the reading flow
Cards, thumbnails, and hub images
These smaller images appear in category pages, related articles, search modules, and recommendation cards. They shape click-through rate and should load lazily in most cases.
Purpose: previews and navigation
Open Graph and social preview image
This image is used when the page is shared on messaging apps and social platforms. It is not the same thing as the visible hero image, even though the design can match. It should be deliberate, readable, and cropped for sharing.
Purpose: share previews and click-through
Structured data image for JSON-LD
Article and product schema can reference an image so search engines understand the primary visual asset for the page. This improves clarity in structured data and keeps your content package complete.
Purpose: schema completeness and entity clarity
Best image formats for websites
The best image format depends on the job. You will usually mix formats on the same site instead of forcing one winner everywhere.
| Format | Best for | Why it matters |
|---|---|---|
| AVIF | Photographic hero images and article visuals where byte savings matter most | AVIF can deliver the smallest files, but encoding is slower and visual checks are worth doing for gradients and fine detail. |
| WebP | General-purpose website images, cards, and responsive content images | WebP is a practical default because it balances quality, compression, and broad support. |
| JPEG | Legacy compatibility and fallback workflows | JPEG is still common, but it should rarely be your only production format for a modern site. |
| PNG | Screenshots, transparency, and interface mockups that need lossless edges | PNG stays useful for UI assets, but it is often too heavy for photographic content. |
| SVG | Icons, diagrams, logos, and simple illustrations | SVG scales perfectly and often beats raster formats for sharp line-based graphics. |
A practical rule is simple: use SVG for vectors, WebP as the everyday website workhorse, and AVIF where you want stronger compression on key visuals.
Responsive images, dimensions, and layout stability
Large images are not only a format problem. Many slow websites send one oversized image to every screen size. Responsive delivery fixes that.
- Generate multiple widths for the same image so phones, tablets, and desktops can receive the right asset.
- Set width and height attributes to reserve layout space and reduce cumulative layout shift.
- Use a smaller card size for hubs and related content instead of recycling the full hero asset everywhere.
- Keep a dedicated original image only where you truly need zoom or lightbox behavior.
What users often miss: The visible hero image, the Open Graph image, and the schema image may share the same design direction, but they serve different technical roles and should be planned separately.
Responsive image markup example
Use a small, explicit image setup for content images and reserve eager loading for the real hero. This is the kind of markup that keeps image delivery understandable for both browsers and Lighthouse.
<picture>
<source
type="image/avif"
srcset="/images/articles/hero-640.avif 640w,
/images/articles/hero-1024.avif 1024w"
sizes="(max-width: 768px) 100vw, 720px" />
<source
type="image/webp"
srcset="/images/articles/hero-640.webp 640w,
/images/articles/hero-1024.webp 1024w"
sizes="(max-width: 768px) 100vw, 720px" />
<img
src="/images/articles/hero-1024.jpg"
alt="Product dashboard preview"
width="1024"
height="576"
loading="lazy"
decoding="async" />
</picture>Lazy loading, Lighthouse, and Core Web Vitals
Lighthouse rewards pages that treat the above-the-fold image as a priority asset instead of an afterthought. This is where many teams accidentally lose performance points.
Do this for your hero image
Keep the hero image compressed and sized for the actual layout. Load the main hero eagerly when it is the expected LCP element.
Use modern formats, explicit dimensions, and avoid stacking multiple giant banners above the fold.
What hurts Lighthouse
Lazy loading the primary hero image and sending desktop-sized images to mobile devices are common mistakes.
Using PNG for large photographic backgrounds and skipping width and height usually makes the results worse.
Image SEO basics that still matter
Image SEO is not only about shrinking bytes. Search engines and users also need context around the image.
- Use file names that describe the subject instead of camera exports or generic placeholders.
- Write alt text when the image adds meaning, not as a place to dump keywords.
- Keep nearby headings, captions, and copy aligned with what the image actually shows.
- Use the same topic language in the page title, image role, and structured data to reinforce relevance.
Why Open Graph and JSON-LD images matter
A page can look fine in the browser and still be weak in discovery if its metadata images are neglected. This is one of the easiest quality gaps to fix.
Open Graph image
This controls how your page looks when it is shared externally. A strong Open Graph image improves perceived quality and can raise click-through on social and chat platforms.
JSON-LD image property
Structured data gives search engines a cleaner content package. Including an article image strengthens the connection between your headline, description, and primary visual asset.
If you are building with Blazor, pair this guide with the Blazor metadata component guide so the page title, description, canonical link, Open Graph image, and structured data all stay in sync.
A practical workflow for website images
- Define the image roles before exporting anything: hero, inline, card, Open Graph, and schema image.
- Create responsive sizes for visible website images instead of shipping one oversized original everywhere.
- Convert photos to WebP or AVIF, keep SVG for vectors, and use PNG only where lossless transparency really matters.
- Audit the page in Lighthouse and confirm the hero image behaves like a priority asset.
Website image optimization checklist
- Every important page has a deliberate hero or lead image.
- Hero images are not lazy loaded when they are the likely LCP element.
- Card and hub images use smaller variants than the page hero.
- Open Graph images exist for sharing and previews.
- Structured data includes a relevant primary image.
- Photographic assets are converted to WebP or AVIF where sensible.
- Vector graphics stay as SVG when that is the best fit.
- Width and height are present to avoid layout shifts.
- Alt text describes meaning instead of repeating keywords.
- Lighthouse confirms that image delivery supports strong performance instead of fighting it.