How to Optimize Images for Faster Web Pages
A beginner, hands-on guide to optimize images for faster web pages with browser inspection, exact code-level changes and verification.
By the end: You will implement and verify optimize images for faster web pages on a real local/staging page.
You will implement and verify optimize images for faster web pages on a real local/staging page.
Key terms before you start
These definitions make the steps easier to follow and help distinguish controls, files and concepts that can look similar at first.
What you need before starting
- A page you are allowed to edit
- Access to the HTML/CSS/JS or CMS/template that renders it
- A modern browser with Developer Tools
Step-by-step tutorial
Every step is shown below. Work through them in order and use each checkpoint to confirm the result before moving on.
Work on a local or staging copy
Open the project containing the website source. If this is a production site, use a staging copy or backup before structural changes.
A browser page is rendered from source files/CMS output; DevTools edits do not save back to the server.
Move it into the actual source and reload.
Open the page in a modern browser
Load the page, then press F12 or Ctrl+Shift+I (Windows/Linux) to open Developer Tools.
DevTools lets you inspect the DOM, applied CSS, computed sizes, requests and console errors.
Move it into the actual source and reload.
Measure the rendered size
Inspect the image in DevTools and note its displayed CSS pixel width at common layouts.
Do not optimize blindly from original camera size.
Move it into the actual source and reload.
Keep the original offline
Preserve the high-resolution master outside the public web folder.
Web optimization should not destroy the only source asset.
Move it into the actual source and reload.
Export an appropriate pixel size
Create a web copy near the largest needed dimension plus reasonable high-density allowance.
Uploading a 6000px source for a 700px card wastes transfer bytes.
Move it into the actual source and reload.
Choose format by content
Compare JPEG/WebP/AVIF or PNG/SVG according to photographic detail, transparency and browser/tool requirements.
Format is not a substitute for correct dimensions.
Declare width and height
Add intrinsic width/height attributes for raster images when known.
This gives the browser an aspect ratio before download and can reduce layout shift.
Use srcset/sizes where useful
Provide multiple widths so browser can choose an appropriate source.
Do not send a desktop source to every phone if responsive alternatives exist.
Move it into the actual source and reload.
Lazy-load below-fold images
Use loading="lazy" for non-critical offscreen images.
Avoid lazy-loading a critical above-the-fold hero without measuring the effect.
Check Network transfer
DevTools → Network → Img → reload and inspect transferred bytes/selected URL.
The actual response proves which source was delivered.
Move it into the actual source and reload.
Test the public/staging URL logged out
Open the final URL in a private/incognito window.
CMS/admin sessions can hide caching, permission or styling differences.
Check caching, loaded asset URL, theme/template and logged-out view.
Document the changed file/rule
Record the file/template/component and purpose of the change in the project notes or version-control commit.
Future maintainers should not have to reverse-engineer why a rule exists.
Check caching, loaded asset URL, theme/template and logged-out view.
Measure the user-facing result
Run a performance measurement before and after the change and record what moved rather than assuming fewer bytes or less JavaScript automatically produced a meaningful improvement.
Google’s current Core Web Vitals 'good' thresholds are LCP ≤ 2.5 s, INP ≤ 200 ms and CLS ≤ 0.1, evaluated at the 75th percentile of visits. Use the metric relevant to the problem you changed.
Reload the real page and reproduce the result after all temporary DevTools edits are gone.
Concrete examples
Copyable example
<img src="office-800.webp"
srcset="office-480.webp 480w, office-800.webp 800w, office-1200.webp 1200w"
sizes="(max-width:700px) 100vw, 50vw"
width="1200" height="800"
alt="Office reception area">Troubleshooting
Move it into the actual source and reload.
Check caching, loaded asset URL, theme/template and logged-out view.
Use the Styles/Computed panels to trace the final value instead of adding stronger selectors blindly.
You have a before/after measurement tied to a user-facing metric.
Continue with these tutorials
Documentation and references
Use these primary and supporting sources to verify current controls, browser behavior and product-specific details.