Images are usually the heaviest part of a web page. A single unoptimized photo straight from a phone or camera can weigh more than all the text, code and fonts on the page combined. Fixing that is one of the easiest speed wins you’ll ever get.
Most people reach for a compressor first. That helps, but the order matters more than the tool. Resize first, then choose the format, then set the quality. Do it in that order and you’ll often cut file sizes dramatically with no visible difference.
Try it: Image CompressorMake JPG, PNG and WebP images smaller for faster websites, losslessly or with smart lossy compression.
Open tool — freeWhy image size matters for speed
Every byte has to travel to your visitor’s device before it can be shown. On a fast office connection, a bloated image is merely wasteful. On a phone with a weak signal, it can mean a page that sits half-loaded for several seconds.
Google measures real-world loading experience with Core Web Vitals. The one images affect most is Largest Contentful Paint, which tracks how quickly the biggest visible element appears. On many pages that element is a hero image or featured photo. A heavy image there directly slows that score down.
Images that load without reserved space can also cause layout shift, where text jumps around as pictures pop in. That’s another Core Web Vitals measure, and it’s just as annoying for readers.
Step one: resize to the size you actually display
This is the step people skip, and it’s the one that saves the most. A modern phone photo can easily be 4000 pixels wide or more. If your blog’s content column is 800 pixels wide, the browser downloads all those extra pixels and then throws them away.
A good rule of thumb is to export images at about twice their displayed width, to stay sharp on high-density screens, and no larger. For an 800-pixel content column, 1600 pixels wide is plenty. For a 300-pixel thumbnail, 600 pixels will do.
Our free image resizer lets you set exact pixel dimensions or scale by percentage, with high-quality downscaling so edges stay clean. Keep the aspect ratio locked unless you really want to crop.
Step two: choose the right format
The format determines how efficiently an image can be compressed. The short version:
- JPG for photos when you need maximum compatibility.
- PNG for screenshots, logos and graphics with sharp edges or transparency. It’s often a poor choice for photos because files get large.
- WebP for almost everything on a modern site. It handles photos and graphics, supports transparency, and is usually smaller than JPG or PNG at similar quality.
- AVIF for even smaller photos, with the trade-off of slower encoding and slightly less universal support in older software.
- SVG for icons and simple logos, since vector files stay crisp at any size.
You can switch formats with our image converter. For a deeper comparison, see our guide to WebP, AVIF, PNG and JPG.
Step three: compress with sensible quality
Now compress. You have two choices:
- Lossless removes wasted data without changing a single pixel. Savings are modest but completely safe.
- Lossy discards detail the eye is unlikely to notice. Savings are much larger.
For photos, lossy is almost always the right call. A JPG or WebP quality somewhere around 70 to 85 is a good starting range for most images. Below that, you’ll start to see blocky artifacts in skies and smooth gradients. Above that, file size grows quickly for little visible gain.
Here’s how to do it with our free image compressor, which runs in your browser so files never leave your device:
- Resize the image to its display size first, as described above.
- Upload the resized JPG, PNG or WebP files.
- Choose lossless for graphics and screenshots, or lossy for photos.
- Compare the preview with the original at 100% zoom, paying attention to faces, text and gradients.
- Download the compressed files and upload those to your site.
Always judge quality at the size the image will actually appear. Artifacts that are obvious at 300% zoom are usually invisible at normal size.
Step four: load images smarter
Once each file is lean, help the browser load them efficiently.
Lazy loading
Adding loading="lazy" to an image tag tells the browser to wait until the image is close to the screen before downloading it. That’s ideal for images further down the page. Don’t lazy load the main image at the top, though. It should start loading immediately, or you’ll slow down the very metric you’re trying to improve.
Width and height attributes
Always include width and height on image tags. The browser uses them to reserve the right amount of space before the image arrives, which prevents layout shift.
Responsive images
The srcset attribute lets you offer several sizes of the same image so phones download a small version and large screens a bigger one. WordPress generates these sizes and adds srcset automatically for images inserted through the editor.
Common mistakes that slow pages down
- Uploading originals and letting CSS shrink them. The full file still downloads.
- Compressing the same JPG repeatedly. Each lossy save degrades it further. Always start from the highest-quality original.
- Using PNG for photographs. It can be many times larger than a good JPG or WebP.
- Ignoring background images in CSS. They’re easy to forget and often the largest files on the page.
- Relying only on a plugin. Optimization plugins help, but they work best when the images you upload are already sensibly sized.
Images aren’t the only weight on a page. Once they’re under control, trimming code is the next step; see our guide on minifying CSS and JavaScript.
A simple routine you can keep
Before uploading any image, resize it to roughly twice its display width, save it as WebP or a well-compressed JPG, and check it at normal size. Then make sure it has width and height set, and lazy load it if it’s below the fold. It takes a minute per image, and it keeps your site fast without needing to fix things later.
Frequently asked questions
What is a good file size for website images?
There is no single number, but for most content images a few hundred kilobytes or less is a sensible target, and small thumbnails should be far lighter. Large full-width hero images may be bigger, so judge by how the image looks at its displayed size.
Does compressing images reduce quality?
Lossless compression keeps every pixel identical and only removes wasted data. Lossy compression does throw away detail, but at moderate quality settings the difference is usually invisible on a normal screen.
Should I lazy load every image?
No. Lazy load images below the fold, but load the main image at the top of the page normally, because delaying it makes the page feel slower and can hurt your largest contentful paint score.
