Images usually make up the largest share of a web page's weight. Oversized images slow down loading, use up visitors' mobile data and can hurt your Core Web Vitals — the performance signals Google uses as part of its ranking systems. The fix is mostly simple and doesn't require any special software.
Step 1: Resize images to the size they're displayed
This is the single biggest win. A modern phone photo is often 4000 × 3000 pixels. If your blog's content column is 800 pixels wide, most of those pixels are downloaded for nothing.
A practical approach:
- Full-width hero images: 1600–2000 px wide.
- Content images: around 1200 px wide (enough for high-density screens at 600–800 px display width).
- Thumbnails: 300–600 px.
Use the Image Resizer to resize one image or a whole batch while keeping proportions.
Step 2: Compress with sensible quality
After resizing, compress. For JPG and WebP, a quality of 70–85% is usually visually identical to the original on screen, but far smaller.
With the Image Compressor you can:
- set the quality slider,
- limit the maximum width or height in the same step,
- compress many images at once and compare the savings.
There's no universal rule, but these targets work well for most sites:
| Image type | Target size |
|---|---|
| Hero / banner | under ~200 KB |
| Content image | under ~100 KB |
| Thumbnail | under ~30 KB |
Step 3: Choose the right format
- Photos → WebP (or JPG as a fallback).
- Graphics with flat colors, text or transparency → PNG or lossless WebP; use SVG for logos and icons when possible.
WebP is typically 25–35% smaller than JPG at similar quality and supports transparency. Convert your images with the WebP Converter.
Step 4: Load images smartly
Compression makes files smaller; good HTML makes sure they're loaded efficiently.
- Always set width and height attributes (or CSS aspect-ratio). This reserves space and prevents layout shift (CLS).
- Lazy-load images below the fold with
loading="lazy". - Don't lazy-load the main image at the top of the page — it's often your Largest Contentful Paint (LCP) element and should load immediately.
- Serve responsive sizes with
srcsetso phones get smaller files than desktops. - Write descriptive alt text for accessibility and image search.
<img src="/images/team-1200.webp"
srcset="/images/team-600.webp 600w, /images/team-1200.webp 1200w"
sizes="(max-width: 700px) 100vw, 700px"
width="1200" height="800"
alt="Our support team at the office"
loading="lazy">
A quick checklist
- Resize to the largest size the image is displayed at.
- Compress to 70–85% quality.
- Prefer WebP for photos.
- Set width and height.
- Lazy-load everything except the top image.
- Add meaningful alt text.
Conclusion
You don't need expensive tools to make an image-heavy website fast. Resize first, compress second, choose modern formats and load images carefully. Check the result with a tool like Google PageSpeed Insights to see the difference.