Skip to content

Wineries: Launch your wine club and grow recurring revenue

Learn More
Tectalic

Articles

Preparing Image Files Before Uploading to WordPress

If you upload very large images to your website, it will slow down whenever those images are viewed. The fix is to optimise your images — trim them down to size — before you upload them.

This article explains the two factors that control how big your image files are, and links to some free and low-cost tools you can use.

Dimensions and file size

Every image has:

  • dimensions — width and height, in pixels
  • file size — how much it “weighs”, in kilobytes (KB) or megabytes (MB)

Think of these as size and weight.

Images straight from a camera or a stock library can be enormous — 4,000+ px wide and several megabytes each. That’s far wider than most screens display, and the weight causes delays while the file downloads. Preparing an image means reducing both the dimensions and the weight while still leaving it looking good. Nobody wants grainy images, and you don’t need them.

Choosing dimensions

Match the image to how it’s used:

  • A full-width hero or feature image is commonly sized around 1,920 px wide for modern displays. If you’re targeting very large screens you might go wider.
  • An image that’s only part of a page (say, half the width of a blog post) can be much smaller.

Modern WordPress helps here: when you upload an image it automatically generates several smaller sizes and serves the most appropriate one for each visitor’s screen (using responsive srcset markup). You still shouldn’t upload a 4,000 px original if you’ll only ever display it at 1,200 px — start from a sensible size.

You can review and adjust the generated image sizes under Settings → Media in your WordPress dashboard.

Reducing file size (compression)

This is the most important part. Large files take longer to download and slow your pages.

As a rough guide, aim for a full-page web image of around 80–150 KB, and a smaller in-content image around 20–40 KB. You can often drop a 2–3 MB photo to well under 200 KB with no visible loss of quality — try it and compare side by side.

To check you haven’t over-compressed, open the original and the optimised version next to each other and look for “jaggies” (blocky pixelation). Skies, plain backgrounds and thin lines against neutral backgrounds are where you’ll notice it first.

Modern image formats

JPEG is still fine for photos, but newer formats compress better at the same quality:

  • WebP is widely supported and a good default for photos and graphics on the web.
  • AVIF compresses even further where it’s supported.

Many optimisation tools and WordPress plugins can convert to these formats for you.

Inspecting an image’s size

To see how big a file is, use the Mac Finder (Get Info) or Windows Explorer (right-click → Properties). Most image editors also show dimensions and file size as you export.

Tools for preparing images

Automated (set-and-forget): an optimisation plugin such as ShortPixel, Imagify or EWWW will automatically compress (and optionally convert to WebP/AVIF) every image you upload.

Manual:

  • Mac: the built-in Preview app (Tools → Adjust Size, then Export as JPEG).
  • Any device (browser-based): Squoosh is a free Google tool for resizing and compressing one image at a time; TinyPNG compresses PNG/JPEG/WebP; Canva is handy for resizing and light editing.
  • Windows: free tools like FastStone or IrfanView.
  • Advanced: Photoshop’s Export As / Save for Web gives you fine control, though it’s overkill if all you need is a resize.

Most tools let you dial image quality up or down. For large, high-resolution photos you can usually drop quality noticeably and still not see a difference — experiment for yourself.

Don’t over-optimise

You can compress a JPEG too far. The simple rule: if you can see a difference in quality, you’ve gone too far. Back off until it looks clean again.

If you want to offer a genuinely high-resolution file for download (for printing, say), link to it as a download rather than displaying the full-size original on the page — a huge image embedded in a page will slow it right down.

Next: Colour Profiles, sRGB and Adobe RGB.