Image health Check

How to read & fix the most common image issues

Below you’ll find short, plain-English explanations for each badge in the report — plus quick fixes you can apply in WordPress/Elementor or any CMS.

---

ALT text

What it means: ALT describes the image for screen readers and is shown if the image can’t load.

• Keep it short and specific: usually 5–12 words.
• Decorative images: use an empty ALT alt="" so screen readers skip it.
• Avoid keyword stuffing and do not repeat the file name.

Quick fix (Elementor): Edit image → Advanced → Attributes or image “ALT” field.

<img src="/team/sara.jpg" alt="Sara speaking at a workshop" width="800" height="533">

---

No srcset

What it means: The page loads one large image for everyone, even on mobile. That wastes bandwidth.

• Use responsive images: add srcset so the browser can pick a smaller file on small screens.
• WordPress usually adds srcset automatically if the image exists in multiple sizes.

<img src="/img/card-1200.avif"
     srcset="/img/card-400.avif 400w, /img/card-800.avif 800w, /img/card-1200.avif 1200w"
     sizes="(max-width: 640px) 90vw, (max-width: 1024px) 50vw, 33vw"
     alt="Product card" width="1200" height="800">

---

Missing sizes

What it means: You have a srcset list, but no sizes hint. The browser might still download too big a file.

• Add a realistic sizes value that matches your layout (how wide the image appears at different screen widths).

sizes="(max-width: 640px) 90vw, (max-width: 1024px) 50vw, 33vw"

---

Oversized

What it means: The intrinsic image width is much larger than how it’s shown on screen. You send extra pixels the user never sees.

• Resize the source image closer to its real display width or implement srcset/sizes.
• As a rule of thumb: hero 1600–1920px; content images 800–1200px; thumbnails 320–480px.

→ Read about Website Image sizes here

---

Outdated format (JPG/PNG)

What it means: Photos in JPG/PNG can often be 25–50% smaller as AVIF or WebP with the same visual quality.

• Use AVIF (best compression) with WebP/JPG fallback via <picture>.
• Keep PNG only for flat graphics with transparency; consider SVG for logos/icons.

<picture>
  <source type="image/avif" srcset="/hero.avif">
  <source type="image/webp" srcset="/hero.webp">
  <img src="/hero.jpg" alt="Showroom overview" width="1600" height="900">
</picture>

---

Lazy loading

What it means: Images below the fold should load later to speed up first render.

• Add loading="lazy" to non-hero images.
• Do not lazy-load the main hero image above the fold.

<img src="/gallery/sofa-1.webp" alt="Sofa, oak legs" width="800" height="600" loading="lazy" decoding="async">

---

Fetch priority

What it means: Tells the browser to start downloading the most important image earlier.

• Use fetchpriority="high" on the single hero/above-the-fold image only.

<img src="/hero.avif" alt="Studio workspace" width="1600" height="900" fetchpriority="high">

---

Decoding

What it means: decoding="async" lets the browser decode the image without blocking page rendering.

<img src="/team/sara.avif" alt="Sara" width="800" height="533" decoding="async">

---

Unhelpful filename

What it means: Gibberish names (e.g., IMG_938492.jpg, f3b9ad9c.png) make media hard to manage and don’t help accessibility.

• Use meaningful names like office-desk-oak-120cm.avif.
• In WordPress: rename before upload; or edit the media title/slug and re-insert.

---

SVG specifics

What it means: SVGs are vectors (great for logos/icons). They often don’t report pixel dimensions the same way as photos.

• Prefer inline SVG for icons; add a viewBox.
• Set explicit width/height on <img> so layouts don’t “jump”.
• Optimize with SVGO (or an online optimizer).

---

“Display est.” is an estimate

What it means: We estimate display width from your markup (srcset/sizes) and common layouts. On complex pages, the real number can differ slightly. It’s still a good guide for whether an image is much larger than needed.

---

Background images (CSS)

Note: Background images in CSS aren’t fully checked here. Keep them lean too.

• Size them appropriately (no 4k hero for a small card background).
• Use modern formats (AVIF/WebP) where supported by your builder/CSS pipeline.

---

Quick quality targets

• Photos: AVIF q≈45 or WebP q≈60 usually looks great.
• Bytes per pixel heuristic: if bytes / (width×height) > ~0.5 for photos, you can often compress more.
• Thumbnails/cards: keep under ~80–120 kB; large hero under ~300–500 kB if possible.

---

Useful tools

• Local apps: ImageOptim (Mac), Caesium (Win), GIMP/Photoshop export.
• Browser: Squoosh (AVIF/WebP, easy sliders).
• WordPress: image plugins (ShortPixel, EWWW, Imagify) or CDN features (Cloudflare Polish/Images).

---

Elementor tips

• Always fill the ALT field for meaningful images.
• Set Image Size close to how wide it appears (Elementor picks a generated size and helps create srcset).
• For the first, above-the-fold hero image, avoid lazy-load and consider fetchpriority="high".