How to Optimize Images for Your Website (and Why It Matters for SEO)
A practical workflow for resizing, compressing and serving images so your pages load fast, rank better and look sharp on every screen.
Images usually make up the largest part of a web page’s weight. A single large hero photo can be heavier than all the text, code and fonts on the page combined. Slow pages frustrate visitors, increase bounce rates and can hurt search rankings, because Google measures loading performance through Core Web Vitals. The good news: image optimisation is one of the easiest performance wins available.
Why image size affects SEO
Google’s Core Web Vitals include Largest Contentful Paint (LCP)how quickly the biggest visible element loads. On most pages that element is an image. If your hero image is 4 MB, LCP suffers, especially on mobile networks. Faster pages also keep visitors engaged longer, which supports conversions and ad revenue.
Step 1: Resize to the size you actually display
Modern phones take photos 4000 pixels wide or more. Most website layouts never display an image wider than 1200 to 1600 pixels, and content images are often 600 to 900 pixels wide. Uploading the full photo means visitors download millions of pixels they never see.
- Full width hero images: 1600 to 2000 px wide.
- Blog content images: 800 to 1200 px wide.
- Thumbnails and cards: 300 to 600 px wide.
Use Resize Image with the aspect ratio lock on. To look sharp on high density (Retina) screens, you can provide images about 1.5 to 2× the displayed size, but rarely more.
Step 2: Crop for the layout
If your theme displays images at 16:9 or 1:1, crop them before uploading rather than letting the browser or CMS crop automatically. You control the composition, keep the important parts in view and avoid wasting pixels. Crop Image has presets for common ratios.
Step 3: Choose the right format
For photos, WebP typically saves 25 to 35% compared with JPG. For logos and icons, use SVG where possible, or PNG/WebP when you need raster images with transparency. Convert with Convert Image.
Step 4: Compress
Compression removes unnecessary data. For photos, a quality setting around 75 to 82 usually produces no visible difference while cutting file size a lot. As a target, aim for:
- Hero images: under 200 to 300 KB.
- Content images: under 100 to 150 KB.
- Thumbnails: under 30 to 50 KB.
Compress Image shows the new size before you download so you can fine tune quality.
Step 5: Write good file names and alt text
Search engines read image file names and alt text. Instead of a camera name like “IMG_4821.jpg”, use a name that describes the picture, made of real words such as kuwait city skyline at night. Alt text should describe the image for people using screen readers (for example “Kuwait Towers lit up at night”) and naturally include relevant keywords without stuffing.
Step 6: Serve images efficiently
Lazy loading
Add loading="lazy" to images below the fold so the browser loads them only when needed. Do not lazy load your main hero image, because that delays LCP.
Specify width and height
Always include width and height attributes (or CSS aspect ratio) so the browser reserves space and the layout does not jump while images load. This improves Cumulative Layout Shift (CLS).
Responsive images
The srcset attribute lets browsers choose a smaller file on phones and a larger one on desktops. Many CMS platforms generate these sizes automatically.
Caching and CDNs
Set long cache lifetimes for images and consider a content delivery network so images are served from locations close to your visitors.
A real world example
Consider a blog post with eight phone photos straight from the camera: 4032 × 3024 pixels, about 3.5 MB each, 28 MB in total. Resizing each to 1200 px wide brings them to about 400 KB. Converting to WebP at quality 80 brings them to around 120 KB. The page weight drops from 28 MB to under 1 MB (a 96% reduction) and on a typical mobile connection the page goes from taking many seconds to load to feeling almost instant.
Checklist for every image you upload
- Crop to the shape your layout uses.
- Resize to the maximum display size (×1.5 to 2 for Retina at most).
- Convert photos to WebP (or JPG), graphics to SVG/PNG/WebP.
- Compress to quality 75 to 82 for photos.
- Use a descriptive file name.
- Write meaningful alt text.
- Lazy load images below the fold and set width/height.
All of the image steps above can be done for free in your browser with Everytoool (no software to install and no uploads) so optimising images can become a routine part of publishing rather than a chore.