Images account for around 50% of the average webpage's total weight. If your page is slow, images are almost certainly the biggest culprit — and image optimization is one of the highest-ROI improvements you can make to both speed and SEO.
Google uses Core Web Vitals as a ranking signal. The two metrics most affected by images are LCP (Largest Contentful Paint — how fast the main content loads) and CLS (Cumulative Layout Shift — whether images shift the layout as they load). Fix your images and you fix both.
1. File size — Are your images unnecessarily large? Tools like Google PageSpeed Insights flag images that could be reduced.
2. Format — Are you serving modern formats (WebP, AVIF) or outdated ones (uncompressed PNG, BMP)?
3. Dimensions — Are images sized to their display dimensions, or are you serving 4000px images in 400px slots?
4. Lazy loading — Are off-screen images deferred with loading="lazy"?
5. Alt text — Does every image have a descriptive alt attribute? This matters for accessibility and image search.
6. Compression — Is your JPEG/WebP actually compressed, or exported at 100% quality?
This is the single highest-impact change you can make.
| Format | Browser support | Size vs JPEG |
|---|---|---|
| JPEG | Universal | Baseline |
| PNG | Universal | Larger for photos |
| WebP | 97%+ of browsers | 25–35% smaller |
| AVIF | 95%+ of browsers | 50%+ smaller |
WebP is the safe default. AVIF is better but has slightly less universal support. Both are supported in Chrome, Firefox, Safari 16+, and Edge.
Convert your images: imgshrnk Compressor → choose WebP or AVIF output → download.
For web use, 75–85% quality is indistinguishable from 100% in a browser. The visible difference only appears at 65% and below, in fine-detail areas like hair, grass, and gradients.
At 80% WebP, a typical product photo is 200–400 KB instead of 2–4 MB. The user sees the same image. The page loads 5–10× faster for that image.
If your website displays images at 800px wide, upload images at 800px (or 1600px for retina displays). Uploading a 4000px image that gets shrunk to 800px in CSS still forces the browser to download and decode the full 4000px of data.
Steps:
For responsive images with multiple breakpoints, use the srcset attribute to serve different sizes at different viewport widths.
Alt text serves two purposes: accessibility for screen readers, and a signal to Google about what the image contains.
Good alt text is descriptive and specific:
alt="image" or alt="photo1.jpg"alt="Red leather Chelsea boots with 2cm heel"alt="Screenshot of imgshrnk compressor showing 78% file size reduction"Don't keyword-stuff alt text. Describe what's in the image naturally. If the image is purely decorative (e.g. a background texture), use alt="" to tell screen readers to skip it.
Add loading="lazy" to any image that isn't visible in the initial viewport:
<img src="product-photo.webp" alt="Product description" loading="lazy" width="800" height="600">
This tells the browser to defer loading the image until the user scrolls near it. It reduces initial page weight and improves LCP — because the browser isn't wasting bandwidth on images that may never be seen.
Always specify width and height attributes alongside loading="lazy" to prevent layout shift (CLS).
Camera images contain EXIF metadata — GPS coordinates, camera model, timestamps. This adds kilobytes to every file and has no value for web display.
Strip it with imgshrnk Metadata Remover before uploading to your CMS or site. Re-encoding via Canvas API removes all EXIF automatically.
alt attribute is descriptiveloading="lazy" on below-fold imageswidth and height attributes set to prevent layout shiftAll of the following run entirely in your browser — no uploads: