How should I compress and size images for my website?

Modern phone cameras produce photos far wider than any screen will show. Uploading them unchanged forces every visitor to download the full file and the phone to shrink it, wasting data and time. Start by deciding the largest width each image is shown at, for example the full width of the content area on a desktop, and resize to that, with perhaps a double-size version for sharp screens. Product photos, team pictures and gallery images can each have their own sensible size.

Format matters next. WebP is widely supported and usually much smaller than JPEG at similar quality; AVIF can be smaller still, with slightly less universal support and slower encoding. Keep PNG for logos, icons or images with transparency, and use SVG for simple graphics where possible. Then compress: most tools let you lower quality gradually, and there is usually a point where the file shrinks a lot before the eye notices any change. Compare on a phone screen, not a large monitor, since that is where most visitors will see it.

Finally, help the browser. Give images width and height attributes so space is reserved before they load, which prevents layout shift. Lazy-load images below the first screen so they download only when needed, but never lazy-load the main image at the top, since that slows the most important content. On WordPress, a well-chosen image plugin or the host's image service can automate much of this. Sites we build under the Business bundle handle images this way by default, and our speed optimisation service fixes existing image libraries as part of the work.