Twice the width it is displayed at. That is the whole rule; the rest is what that number works out to for each use.
Everyone knows photos should be shrunk before going on the web. The question is by how much. There is only one answer to that: twice the width the image is actually displayed at. What follows is what that number comes out to for each use, and why it is twice.
A phone photo today is over 4000 pixels on the long edge and 3 to 8MB per file. In a blog post, that photo occupies maybe 800 pixels of width. The other 3200 pixels are never drawn.
The browser scales it down for you, so nothing looks wrong on screen. That is why most people leave it. The cost shows up elsewhere: the visitor downloads all 3200 pixels' worth before the photo appears, and anyone on mobile data pays for it. Ten photos in a post means asking for 40MB.
One of the metrics that feeds search ranking measures when the largest element on screen finishes drawing. The photo at the top of a post is usually that element, so one slow photo drags the whole number with it.
One screen pixel and one image pixel are not the same thing. Modern phones and laptops pack two physical dots into the space of one layout pixel. Put an 800-pixel image into a slot that is 800 pixels wide and it looks soft on those screens. Put in 1600 and it looks sharp.
Two is enough. Going to three changes nothing you can see and multiplies the file size by 2.25. Screens that pack three dots do exist, but almost nobody can pick the 3x file out of a lineup next to the 2x one.
"Long edge" means the width for landscape photos and the height for portrait ones.
| Use | Displayed width | Long edge to save |
|---|---|---|
| Photo in a blog post | 700–800px | 1600px |
| Thumbnail in a list | 200–300px | 600px |
| Profile picture / avatar | around 100px | 300px |
| Full-width background | 1200–1600px | 2400px |
| OG image (link preview) | — | fixed 1200 × 630 |
The OG image is the odd one out. It is not derived from a displayed size; it is a spec. This is the preview picture that appears when someone pastes your link into Slack, X, or a chat app, and if the aspect ratio is off, each service crops it its own way. Match 1200 × 630 exactly and keep any important text well away from the edges.
If you pin both dimensions, say 1600 by 1200, a portrait photo either stretches or gets cropped. Set the long edge to 1600 instead and a landscape photo becomes 1600×1200 while a portrait one becomes 1200×1600 — both at a sensible size, both with the original proportions intact.
When you genuinely need a square, such as a profile picture, crop first and resize second. Forcing a square during the resize hands the decision about what to keep to the tool.
You do not have to guess. Right-click the image in your browser and choose Inspect to open developer tools. Hovering the image in the element list shows two numbers side by side.
Anything by which the intrinsic size exceeds twice the rendered size is data being thrown away. Four and five times over is common.
Open the Bulk Image Resizer and drop all the photos in at once. Choose long edge under size and type in the number from the table above. Not enlarging past the original is the default, so smaller images mixed into the batch are left alone rather than stretched.
For format, WebP suits photographs, and quality around 0.8 is a safe setting. Screenshots, logos and anything made of lines and text belong in PNG — converting those to WebP or JPEG usually makes the file bigger and leaves fuzzy edges around the letters.
Take the results as a single zip. Files never leave the browser, so there is no cap on how many or how large.
A resized photo cannot be un-resized. Leave these as they are.
This tool writes new files and never touches your originals, but if you have already overwritten an original elsewhere, that is not recoverable. Keep important photos in a separate folder and work on copies.