ImgShift🌐 δΈ­ζ–‡

Image optimisation checklist: eight fixes that make pages faster

Images are usually more than half the weight of a page. Work through these eight items and most sites get measurably quicker.

1. Switch to WebP

Biggest win, least effort. Same picture, same apparent quality, 25–35% smaller than JPG and often less than half the size of PNG β€” and every current browser supports it. Run your existing assets through PNG to WebP or JPG to WebP at quality 80.

2. Export at the size you display

The most common mistake: a 400-pixel-wide slot on the page filled by a 4000-pixel-wide file. The browser does scale it down β€” after downloading, decoding and holding all ten times the pixel data in memory.

The fix is to export at roughly 1.5–2Γ— the display size (to cover high-DPI screens). The Max width field in the converter does exactly this.

3. Serve different sizes to different devices

A phone does not need a 2000-pixel image. If you control the markup, let the browser choose:

<img src="photo-800.webp" srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w" sizes="(max-width: 600px) 100vw, 800px">

Phones download the 400-pixel version, desktops get the 800, and nobody wastes bandwidth.

4. Turn on lazy loading

Anything below the fold can wait until the reader scrolls near it. One attribute:

<img src="photo.webp" loading="lazy">

One exception: the hero image at the top of the page should not be lazy β€” it should load first.

5. Always set width and height

Declaring width and height lets the browser reserve space before the image arrives. Without it, the layout jumps as images load β€” often right as someone is about to tap a button. That jump has a name: layout shift.

6. Use SVG where it belongs

Icons, logos, diagrams and simple illustrations should be SVG, not PNG: usually a few kilobytes and sharp at any size. Convert to PNG only when some other piece of software refuses SVG.

7. Put images on a CDN

If your server's bandwidth is limited, serve images from a CDN so readers download from a node near them. Many also resize and re-encode on the fly via URL parameters.

8. Strip the metadata

Photos from a camera carry the timestamp, device model and sometimes GPS coordinates. None of that helps the page, all of it costs bytes, and the location data is a privacy leak. Re-exporting through a converter removes it automatically.

An order you can follow today

  1. Find your twenty heaviest images.
  2. Batch convert them to WebP with the PNG to WebP or JPG to WebP tool at quality 80.
  3. Cap the dimensions at the size you actually display them.
  4. Add loading="lazy" plus width and height attributes.
  5. Re-measure. Half the image weight usually disappears.
JPG β†’ WebPTypically 25–35% smaller, no visible changeOpen β†’GIF β†’ WebPTypically 25–35% smaller, no visible changeOpen β†’BMP β†’ WebPTypically 25–35% smaller, no visible changeOpen β†’SVG β†’ WebPTypically 25–35% smaller, no visible changeOpen β†’AVIF β†’ WebPTypically 25–35% smaller, no visible changeOpen β†’ICO β†’ WebPTypically 25–35% smaller, no visible changeOpen β†’