The short answer
Find out how wide the image appears on the page, in CSS pixels, then export it at twice that width. A blog column that is 760 pixels wide needs an image of about 1520 pixels. A product card shown at 280 pixels needs about 560. A background that spans the whole screen needs 1920 pixels for typical laptops and up to 2560 for large desktop monitors.
The resizer below does this in one step: choose Pixels, type the width, leave Height empty and keep Keep proportions on. Resizing a batch of phone photos from about 4000 pixels to 1600 usually cuts each file by 80 to 90 percent before any extra compression.
Try it here: Image Resizer
Open the full tool pageRecommended sizes by image type
These sizes cover the common cases on blogs, shops and company sites. Width matters most; height follows from the aspect ratio you choose. The file size targets assume JPG or WebP at a quality of about 75 to 85.
| Image type | Width in pixels | Common aspect ratio | File size target |
|---|---|---|---|
| Full width hero or banner | 1920 to 2560 | 16:9 or 21:9 | 200 to 400 KB |
| Image inside an article | 1200 to 1600 | 3:2 or 16:9 | 100 to 200 KB |
| Product photo with zoom | 1000 to 2000 | 1:1 | 100 to 300 KB |
| Thumbnail, product card | 300 to 600 | 1:1 or 4:3 | 20 to 60 KB |
| Social sharing image (Open Graph) | 1200 x 630 | about 1.91:1 | under 300 KB |
| Logo | about 2x its display size | any | under 30 KB, or use SVG |
| Team or author photo | 400 to 800 | 1:1 | 30 to 80 KB |
Retina and 2x images explained
Modern phones, many laptops and most Macs have high density screens, where one CSS pixel is drawn with two or three physical pixels. An image that is exactly as wide as its display area looks soft on those screens. Doubling the width (2x) makes it crisp; going to 3x adds a lot of weight for a difference few people notice, so 2x is the usual ceiling.
If your site or platform supports responsive images (the srcset attribute, which WordPress and most shop systems add automatically), export one large version at 2x and let the system create smaller copies. If it does not, a single image at 2x the largest display width is the best compromise.
For a full width hero this means about 2560 pixels for desktop. On a phone the same area is around 400 CSS pixels wide, so a responsive setup would serve a version near 800 to 1200 pixels there.
Aspect ratios and resizing without distortion
Aspect ratio is the relation between width and height. 16:9 is the widescreen shape of videos and most banners, 3:2 is the native shape of many cameras, 4:3 is the native shape of most phone cameras and 1:1 is square, common for product grids. Keeping one ratio for all images of a kind makes your pages look tidy.
Resizing only changes the size, never the shape, as long as proportions are kept. With Keep proportions on, the resizer fits the image inside the width and height you type, so it never looks stretched. If you need an exact shape, for example 1200 x 630 for a sharing image or a square for a product, crop first with the image cropper, then resize.
Do not enlarge small images. Upscaling adds pixels without detail, so the result is larger and blurrier. That is why Do not enlarge small images is on by default.
Step by step for a typical website
- Measure: open the page, right click the image area and choose Inspect, or check your theme's documentation for the content width.
- Crop to the ratio you use for that kind of image, if the original has a different shape.
- Resize to twice the display width with Pixels mode.
- Choose the output format: WebP for the smallest files if your platform accepts it, otherwise JPG. Keep PNG for logos and graphics with transparency.
- Compress if the file is still above the target, then upload and check the page on a phone.
Common mistakes
- Uploading the camera original and letting the browser scale it down. The full 4000 pixel file still has to download, which slows the page and hurts the Largest Contentful Paint score.
- Scaling with HTML width and height attributes only. They control the display size, not the file size. They should still be set, because they reserve space and prevent layout shift.
- Using PNG for photos. A photo saved as PNG is often 5 to 10 times larger than the same photo as JPG or WebP.
- Mixing ratios in one grid, which makes product lists look uneven.
- Placing text inside images. It is not readable by search engines and becomes tiny on phones; use real text over the image instead.
Tips for faster pages
Images below the first screen should use lazy loading so they only download when the visitor scrolls near them; most content systems add this automatically. The main image at the top should load normally, since it is often the largest element the speed score measures.
Resize whole folders at once: add all images, set the width once and use Download all as ZIP. The list shows the old and new dimensions of each file. Everything happens in your browser, so even a few hundred product photos are processed without uploading anything.