“I already compressed it.” You took a photo for the website, ran it through a compressor, got it down to a few hundred kilobytes, and uploaded it. The speed report still says the image is too big. Or someone told you a picture is “web ready” because it is saved at 72 dpi, and you are not sure what that even means.
Most of this confusion comes from mixing up two different measurements. Image dimensions vs file size is the distinction that matters: one is how many pixels a picture has, the other is how many bytes it takes up. They are related, but fixing one does not automatically fix the other. Once you see the difference, deciding how to prepare images before upload becomes much simpler.
Image dimensions vs file size: two different numbers
Dimensions are the width and height of the image in pixels, such as 4000 by 3000. They decide how much detail the picture holds and how large it can be shown before it looks soft.
File size is how much storage the file uses, in kilobytes (KB) or megabytes (MB). It decides how long the image takes to download.
You can see both easily:
- In WordPress, open an image in the Media Library. The attachment details show the dimensions and the file size side by side.
- On Windows, right-click the file, choose Properties and open the Details tab.
- On a Mac, select the file and choose Get Info, or open it in Preview and use the inspector.
A photo can be small in one and large in the other. A heavily compressed 5000-pixel photo may have a modest file size and still be far more image than the page needs. A barely compressed 1200-pixel photo may have sensible dimensions and still be a heavy file.
How dimensions drive file size
The number of pixels grows with the area of the image, not its width. Double the width and the height, and you have four times as many pixels. A 4000 by 3000 photo holds 12 million pixels. Resized to 1200 by 900, it holds just over a million, roughly eleven times fewer.
File size does not shrink in exact proportion, because compression depends on how much detail is in the picture. But fewer pixels almost always means a much smaller file, which is why resizing usually saves more than any compression setting.
There is a second cost that file size hides. To display an image, the browser decodes it back into its full grid of pixels in memory. A 12-million-pixel photo needs that memory and processing on the visitor’s phone, however well its file was compressed. On a budget phone with a long page of large photos, this is part of why scrolling can stutter.
The 72 dpi myth
DPI or PPI is a note stored inside the file that tells a printer how many pixels to place per inch of paper. Screens ignore it. A 1200-pixel-wide image displays exactly the same at 72 dpi or 300 dpi, and the file is essentially the same size. When someone says an image is “web ready because it is 72 dpi”, what matters is its pixel dimensions. Check those instead.
Where phone and camera photos start
Modern phones and cameras produce photos thousands of pixels wide, which is great for printing and cropping and far more than any web page displays. iPhones often save photos in HEIC format, which many websites and older tools do not handle well, so they usually need converting to JPEG or WebP anyway. Screenshots from a phone or a large monitor are bigger than people expect too.
So almost every photo from a phone, a camera, a stock library or a designer’s export needs resizing before it goes on a website. The question is to what size.
Sensible sizes per use
The right width is roughly the widest the image is displayed on your site, multiplied by about two so it stays sharp on high-density screens. These are reasonable starting points; your theme’s layout may suggest different ones.
| Use | Starting point for width | Notes |
|---|---|---|
| Full-width hero or banner | Around 1920 pixels | Wider rarely adds visible detail; check how it crops on phones |
| Image inside a text column | Around 1200 to 1600 pixels | About twice the column width |
| Team or staff portraits | About twice the displayed size | Use the same ratio for every person |
| Product photos | Large enough for zoom on a big screen | Agree one maximum for the whole shop |
| Logos | SVG if possible; otherwise about twice the displayed height | Keep transparency if the logo sits on colour |
| Thumbnails and cards | Upload the normal size | WordPress creates the small copies |
Larger than this, and visitors download pixels they will never see. Much smaller, and the image looks soft on a laptop or a good phone.
Finding how wide an image really displays
- Open the page on a desktop browser at its normal width.
- Right-click the image and choose Inspect.
- In the Elements panel, hover over the image’s src address. Chrome shows the rendered size, such as 760 by 507, and the file’s own (intrinsic) dimensions.
- Use the rendered width, doubled, as your target. Check a phone layout too, because a column image can be full width on mobile.
Compression levels after resizing
Resize first, then compress. Compression works on whatever pixels are left, so starting from the right dimensions gives the compressor less to do and a better result.
- Lossy compression throws away detail the eye is unlikely to notice. It is right for photos. Most tools have a quality slider; lower means a smaller file and eventually visible blur and blotches.
- Lossless compression keeps every pixel and only tidies how the data is stored. It is right for logos, screenshots and simple graphics, and saves less on photos.
For photos, the sensible setting is the lowest one where you cannot see a difference at normal size without hunting for it. Faces, skin, gradients like a sky, and text inside an image show problems first, so test with those. Which file format to save in is a separate decision, explained in our comparison of WebP, AVIF and JPEG.
Resizing and compressing with our free tool
If you do not have image editing software, our free image compressor does both jobs in the browser. Nothing is uploaded to a server; the work happens on your own device.
- Select one image or several. JPEG, PNG and WebP are accepted.
- Choose a maximum width. The options include 1920 pixels for full-width banners and 1200 pixels for typical content images. Pick the one closest to the target from the table above.
- Set the quality slider. Start around the default and move it down while watching the preview and the saving.
- Choose the output: same as input, WebP or JPEG. For photos saved as PNG, switching the output to WebP or JPEG usually makes the biggest difference, since PNG is lossless.
- Download the results and upload those to your site.
For a batch of team photos or a product shoot, process them together with the same settings so they match.
What WordPress does with a huge upload
WordPress creates several resized copies of every image you upload, and it scales down very large uploads to a more manageable size automatically. Our post on how WordPress chooses which image size to show explains that process. It is a useful safety net, but not a substitute for resizing yourself:
- Some features use the largest stored version, such as a “full size” image setting, product zoom and lightboxes.
- Very large uploads take longer to process and can fail on modest hosting, showing an HTTP error in the media library.
- The uploads folder and your backups grow with every oversized original.
Resizing before upload keeps all three under control. For the bigger picture of how images affect load time, see our overview of which images slow a site down, and for everything beyond images, the guide to improving website speed.
A two-minute routine before every upload
The habit worth building is simple: resize images before upload, every time, rather than cleaning up later.
- Check where the image will go and what width it needs.
- Resize to that width.
- Compress, and look at the result at normal size.
- Give it a descriptive file name.
- Upload, add alt text, and place it.
Write the target widths for your site on a single note and share it with anyone who adds content. That note does more for long-term speed than any one-off clean-up.
Frequently asked questions
What is a good file size for a website image?
There is no single right number, because a full-width banner and a small team photo have different needs. Aim for the correct dimensions first, then the lowest quality setting that still looks right. If a content image is still well over a few hundred kilobytes after that, check whether it is wider than needed or saved as PNG.
Should I resize images on my phone before uploading them to the website?
It helps, especially if you upload from your phone often. Some phones let you choose a smaller size when sharing or exporting a photo. You can also open our image compressor in the phone’s browser, set a maximum width and download the smaller version before uploading it to WordPress.
Does cropping an image reduce its file size?
Yes. Cropping removes pixels, so the file has less to store, and a tighter crop often makes the subject clearer too. It changes the shape of the image, though, so make sure the new ratio suits the space on the page. Resizing reduces pixels while keeping the whole picture.
Why does my image look blurry after resizing it for the web?
Usually because it was resized smaller than the space it fills, or because it is being stretched on a high-density screen. Check the rendered width on the page and make the image about twice that. Heavy compression on top of resizing can also cause softness, so try a higher quality setting.
If the media library already holds years of oversized photos, our website speed optimisation service includes image optimisation and WebP conversion for what is already there. New uploads stay under control with the routine above.
