Performance Optimise Images for a Website Optimise website images by choosing the right dimensions, compressing safely, using descriptive alt text and reserving enough layout space so images do not slow down or destabilise the page.
Problem statement What this workflow solves Target outcome A faster, cleaner image workflow with smaller files, clearer accessibility text and fewer layout surprises.
Use this when You need a repeatable workflow, not a one-off article. You want tools, references and UI guidance in one place. You want a short implementation plan you can copy. List each image’s largest rendered size. Keep original source files outside the production asset folder. Decide whether each image is informative or decorative. <picture>
<source srcset="product-640.webp 640w, product-1280.webp 1280w" type="image/webp" />
<img src="product-1280.jpg" srcset="product-640.jpg 640w, product-1280.jpg 1280w" sizes="(max-width: 720px) 100vw, 720px" width="1280" height="720" alt="Product dashboard showing the weekly project overview" loading="lazy" decoding="async" />
</picture>Keep informative images sharp enough to inspect.
Resize images near the largest display size needed.
Set width and height or aspect-ratio where practical.
Uploading oversized images and expecting the browser to solve the cost.
Optimising visual effects before checking the biggest page assets.
Lazy-loading content that belongs in the first viewport.
1 Decide the image job Not every image needs the same treatment. Product images, screenshots, avatars and decoration have different requirements.
Keep informative images sharp enough to inspect. Avoid uploading huge originals when the rendered size is small. Use decorative images sparingly and keep them lightweight. 2 Resize and compress before upload Large images can dominate page weight even when the rest of the site is efficient.
Resize images near the largest display size needed. Compress while checking visible quality. Keep originals outside the production asset folder when possible. 3 Prevent layout shift Images should not push content around after they load.
Set width and height or aspect-ratio where practical. Use responsive image rules for different viewports. Avoid lazy-loading images that are needed in the first viewport. Verification Inspect rendered dimensions and intrinsic dimensions in browser developer tools. Compare compressed output visually at the actual display size. Confirm width and height reserve the correct aspect ratio before loading. Check that first-viewport images are not needlessly lazy-loaded. Edge cases Screenshots containing small text may need less aggressive compression. Animated imagery and transparent artwork need format-specific testing. Metadata removal can affect orientation if software has not normalised pixels first. ElementYard CTA Place optimised images in ElementYard Use ElementYard to test how optimised images fit inside hero, card and avatar layouts.
Open ElementYard Should I compress every website image? Yes, but inspect quality after compression. The goal is smaller files without damaging images users need to understand.
Do decorative images need alt text? Decorative images should usually use empty alt text so assistive technology can skip them.
More guides Build a Landing Page A practical landing page workflow for planning sections, writing copy, checking accessibility and preparing reusable UI components. Launch a Website A practical website launch checklist covering content, metadata, accessibility, sitemap, robots, performance and final link checks. Flexbox vs Grid Learn when to use CSS flexbox or grid for practical responsive layouts, navigation, cards, page sections and interface alignment.