Improving SEO & Lighthouse Score

Lighthouse image audits usually come down to the same practical issues: oversized images, missing dimensions, slow hero images, missing alt text, and formats that are not ideal for the browser. Imgwire gives you delivery controls for the image-specific parts of that work.

Deliver correctly sized images

Use Imgwire transformations to deliver the size the page actually needs:

https://cdn.imgwire.dev/{organization_id}/{environment_id}/{image_id}?width=1200&height=630&resizing_type=cover&format=auto&quality=auto

This helps with Lighthouse audits such as properly sizing images and serving efficient image formats. It also reduces transfer size for real users.

For fluid layouts, use srcset candidates so the browser can choose a smaller file on smaller screens:

<img
  src="https://cdn.imgwire.dev/.../img_123?width=960&format=auto&quality=auto"
  srcset="
    https://cdn.imgwire.dev/.../img_123?width=480&format=auto&quality=auto   480w,
    https://cdn.imgwire.dev/.../img_123?width=960&format=auto&quality=auto   960w,
    https://cdn.imgwire.dev/.../img_123?width=1440&format=auto&quality=auto 1440w
  "
  sizes="100vw"
  width="960"
  height="540"
  alt="Dashboard showing uploaded product images"
/>

Prevent layout shift

Images without stable dimensions can contribute to Cumulative Layout Shift. Set width and height attributes, reserve space with CSS aspect-ratio, or use framework components that emit stable image markup.

When using fixed cards or previews, make the transformation match the reserved aspect ratio:

?width=640&height=360&resizing_type=cover&format=auto&quality=auto

Optimize the LCP image

If the largest contentful paint element is an image, treat it differently from below-the-fold media.

For the LCP image:

• Request the exact size needed for the first viewport.
• Use format=auto&quality=auto.
• Avoid lazy loading the visible hero image.
• Avoid serving multiple competing hero candidates that the browser will not use.
• Keep the image URL stable so cached variants can be reused.

For images below the first viewport, use loading="lazy" and avoid oversized high-DPR variants unless the placement needs them.

Use useful alt text

Imgwire controls image delivery, but your application still controls accessibility and search context. Add alt text that describes the image's purpose in the page.

Good alt text is specific:

<img
  src="https://cdn.imgwire.dev/.../img_123@medium?format=auto&quality=auto"
  alt="Create API Key dialog with Client Key selected"
/>

Use an empty alt attribute only for decorative images:

<img
  src="https://cdn.imgwire.dev/.../img_123@thumbnail?format=auto&quality=auto"
  alt=""
/>

Use social and preview images intentionally

OpenGraph and social preview images usually need fixed dimensions and predictable crops. Generate those variants explicitly rather than reusing an arbitrary page image:

https://cdn.imgwire.dev/{organization_id}/{environment_id}/{image_id}?width=1200&height=630&resizing_type=cover&format=jpeg&quality=85

Use explicit format and dimensions when a crawler or social platform has a documented requirement.

Lighthouse audits to watch

Imgwire can help with several common image-related diagnostics:

Lighthouse signal	Imgwire practice
Properly size images	Use width, height, presets, and responsive variants
Serve images in next-gen formats	Use format=auto for browser-facing delivery
Efficiently encode images	Use quality=auto, or an explicit quality value after testing
Avoid large layout shifts	Set HTML dimensions or CSS aspect ratio and use matching transforms
Largest Contentful Paint image	Resize the hero image and do not lazy-load it when it is visible
Image elements have alt attributes	Add meaningful alt text in your app markup

Best practices checklist

• Use transformed Imgwire URLs instead of raw originals in page markup.
• Use format=auto&quality=auto for browser-facing images.
• Create responsive variants for fluid layouts.
• Set image dimensions or aspect ratio to prevent CLS.
• Give meaningful alt text to content images.
• Use explicit social image dimensions for OpenGraph and sharing workflows.

Related pages

• Improving Website Performance
• Automatic Image Optimization
• Using Preset Image Variants
• Responsive image variants using srcset
• Social and OpenGraph images

Last updated at: May 8, 2026