Resizing photos for the web means cutting an image down to roughly twice the size it will actually display, then saving it as a JPEG or WebP file under about 500KB. Do that in the Photos app on Windows, Preview on a Mac, or any browser-based editor, and most photos upload in seconds instead of stalling a page load. It takes about five minutes once you know the numbers.
The reason it matters is simple. A 24-megapixel photo straight off a modern camera is around 6000 pixels wide and 10MB to 15MB. Browsed on a phone, most of that file gets downloaded and thrown away before anyone sees it.
Table of Contents
- What You Need
- Step-by-Step: How to Resize Photos for the Web
- Step 1: Choose the Right Size and Aspect Ratio
- Step 2: Resize a Copy, Not the Original
- Step 3: Export the Best Web Format
- Step 4: Check File Size, Sharpness, and Appearance
- How to Resize Photos on Your Phone or Computer
- Common Mistakes
- Frequently Asked Questions
- What size should a photo be for a website?
- Can I make a small photo look better by enlarging it?
- Should I use JPEG, PNG, or WebP for a website?
- How much should I compress a photo for the web?
- Does resizing a photo reduce its quality?
- Can I resize several photos at the same time?
- Conclusion
What You Need
Four things, and only one of them is software you may not already have:
- The original photo, untouched, on your computer or phone.
- An image editor. The one on your machine is fine for most work.
- The destination’s recommended dimensions. Check the platform’s own help page, because these numbers change.
- A backup of the full-resolution file before you overwrite anything.
Windows 11 and Windows 10 both ship with the Photos app, which resizes and exports without installing a thing. Mac users get Preview and Preview does the same job in three clicks. On a phone, the gallery share sheet handles most social platforms on its own.
What a dedicated editor adds is control. Photoshop’s Export for Web gives you a live quality slider and a side-by-side file size readout. Squoosh, which runs in the browser and processes files on your own machine, gives you the same comparison without an install. Free desktop options like GIMP cover batch work too, if you have twenty images rather than one.
Step-by-Step: How to Resize Photos for the Web
Work through these four steps in order and the file will be ready to upload. The order matters, because resizing after compressing means compressing twice, and compressing twice is where the mushy look comes from.
Step 1: Choose the Right Size and Aspect Ratio
Decide where the image is going before you change a single number. A photo on a blog post and the same photo as a full-width banner need different dimensions, and a phone screen needs far fewer pixels than a desktop monitor.
A few reference points that cover most cases:
- Full-width website hero: 2000px wide, horizontal, roughly 3:2.
- In-article blog image: 1500px wide is comfortable on most monitors without looking soft on a retina screen.
- Square social post: 1080 by 1080 pixels.
- Portrait social post: 1080 by 1350 pixels, which is the taller 4:5 shape feeds favour.
- Email newsletter: 1200px wide. Email clients choke on anything wider.
- Product photo for a shop: 1500px on the long edge so buyers can still zoom in.
Those are display widths. Export at about twice the largest size it will be viewed at, which gives sharp results on high-density screens without carrying pixels nobody sees.
Aspect ratio is width divided by height, and a 3:2 photo should stay 3:2. Every editor has a lock that keeps the ratio fixed when you drag a corner, and you want that on. Free to crop deliberately, but never stretch. A 3:2 photo forced into a 1:1 square without cropping gets squeezed and everything looks slightly wrong.
On the DPI question: for screens, pixels are what matter. The 72 DPI rule came from print convention, and browsers assume 96 pixels per inch. Setting a different number in the file changes nothing on a webpage, so don’t spend time on it.
Step 2: Resize a Copy, Not the Original
Duplicate the file first and work on the duplicate. In Photoshop that is Image, then Image Size with Convert to Smart Object ticked, so the resize stays reversible. In GIMP it is Image, then Scale Image. In the Windows Photos app, open the picture, hit the resize icon in the toolbar, set the width, and choose Save a copy rather than Save.
Rename it as you go. Something like lake-dawn-web.jpg tells you later what it is, and it saves you hunting through downloads six months from now.
If you resize the wrong file, Ctrl+Z in every one of these editors steps back through the change. That is the fastest way to confirm you are working on the copy and not the master.
Step 3: Export the Best Web Format
Pick the format based on what the image contains.
JPEG suits photographs. It uses lossy compression, which discards detail the eye barely notices and can cut a file by 80 percent or more. It cannot handle transparency, and text on gradients turns to mush at low quality settings.
PNG suits screenshots, logos, line art and anything with transparency. It is lossless, so quality never degrades, and the file is correspondingly large. A screenshot saved as PNG at quality 100 is usually wasted weight.
WebP is now the sensible default for most sites. It handles both photographs and transparency, and typically lands 25 to 35 percent smaller than an equivalent JPEG at the same visible quality. Nearly every browser in current use supports it. If you serve older Safari traffic, keep a JPEG fallback.
AVIF compresses harder still, at the cost of slower encoding. Most image pipelines generate it as a secondary format alongside WebP rather than on its own.
Practical export settings: JPEG at quality 75 to 80, subsampling on, progressive encoding enabled. WebP at quality 75 to 80. Keep PNG for transparency and let it be lossless. Anything at quality 100 is wasted bytes on the web, because no screen can resolve the difference.
Two extras worth doing. Strip EXIF data, since it carries GPS coordinates and camera serial numbers you have no reason to publish. And convert to sRGB if your original is Adobe RGB, otherwise skin tones and skies drift on uncalibrated monitors.
Step 4: Check File Size, Sharpness, and Appearance
Take thirty seconds before you upload. Zoom to 100 percent in an image viewer and inspect the fiddly areas: text, faces at a distance, thin lines like power cables or railings. Slight softness is normal after compression. Visible blocks around edges are not, and they mean dropping quality one notch and checking again.
Then open the file in a browser at its actual display size. That is the only view that matters, because a photo filling a 400px column is judged at 400px, not at 2000px.
Check the saved file size in your file manager. A 1500px blog photo over 300KB is worth another pass, a product shot at 250KB is fine, and anything past 1MB on a normal page is a problem worth solving before upload.
Still too heavy? Two options. Lower the quality slider by five or ten points, which is nearly invisible, or cut the dimensions another 10 to 15 percent. Do the quality drop first, then the dimensions.
How to Resize Photos on Your Phone or Computer
On Windows, open the photo in the Photos app, click the resize icon in the bottom toolbar, set the height or width, tick maintain aspect ratio, then use the three-dot menu to save a copy. Menu labels shift between Windows versions, but the path has been stable for years.
On a Mac, open the image in Preview, choose Tools, then Resize. Enter a width in pixels, tick Resize image when prompted rather than resizing the canvas, and export through File, Export As.
On a phone, the Photos app share sheet is enough for most social sharing. Pick the platform from the share row and it sends a version sized for that feed. If you need an exact dimension, use a browser editor instead of guessing, since the share sheet picks sizes for you.
For batches, native apps are usually quicker than the cloud tools because you are not uploading anything. Square resizing or rounding corners on twenty shots by hand gets old fast.
Common Mistakes
Enlarging a small image. A 600px photo blown up to 1200px does not gain detail, it gains blur. You cannot add pixels that were never captured. Fix: find the original file, or accept the smaller size.
Stretching instead of cropping. Dragging width and height independently distorts faces and bends straight lines. Fix: lock the aspect ratio, then crop deliberately if the shape has to change.
Saving over the original. One careless Ctrl+S and your only full-resolution copy now weighs 400KB forever. Fix: Save a copy or Save As, with a new name, every single time.
Using print dimensions on screen. A 300 DPI setting or a 3000px image sized for a printed handout is wasted transfer weight on a webpage. Fix: size to display, about double at most.
Compressing repeatedly. Opening a compressed file, saving it again, and re-uploading stacks the losses. Each pass throws away detail the next pass treats as noise. Fix: always resize and compress from the original master.
Choosing a file far bigger than the slot. A 20MP upload into a 1400px banner makes visitors download ten times what they see. Fix: measure the container, then export to roughly double it.
One habit catches most of these: keep a folder of untouched originals. Every web version gets exported from there, and nothing in the folder ever gets overwritten.
Frequently Asked Questions
What size should a photo be for a website?
For most sites, 1500px wide works well for in-article images and around 2000px for a full-width hero or banner. Export at roughly twice the largest size the image will actually display, which keeps high-density screens sharp without carrying wasted pixels. Aim for under 500KB on a normal blog image and under 1MB on a hero.
Can I make a small photo look better by enlarging it?
No. Enlarging an image does not add detail, it stretches what little detail exists across more pixels, which reads as blur. Editors can sharpen the result a little, but the underlying information is gone. The only real fix is finding the original full-resolution file or capturing the scene again at a higher resolution.
Should I use JPEG, PNG, or WebP for a website?
Use JPEG for ordinary photographs, PNG for screenshots, logos and anything needing transparency, and WebP as the general default when your audience supports it. WebP usually lands 25 to 35 percent smaller than JPEG at the same visible quality and handles transparency too. Keep a JPEG version as a fallback for older browsers if you serve them.
How much should I compress a photo for the web?
For JPEG, start at quality 75 to 80. Differences below about 70 start showing as blocky edges around high-contrast areas, while anything at 100 wastes bytes no screen can resolve. Open the result at 100 percent zoom and check text and fine detail. For WebP, quality 75 to 80 is the comparable starting point.
Does resizing a photo reduce its quality?
Reducing dimensions discards pixels, so yes, but intelligently. Shaving 6000px down to 1500px is invisible because the extra pixels were never displayed anyway. Enlarging, resampling poorly, or compressing an already-compressed file is where quality really suffers. Resize down from the original, once, and the result looks perfectly sharp on screen.
Can I resize several photos at the same time?
Yes. GIMP handles batches through Script-Fu, ImageMagick does it from the command line, and most CMS platforms compress uploads automatically as they arrive. Online tools generally limit batch size or ask for an account. For twenty or fewer images, opening them in one editor and exporting with a consistent preset is usually faster than any automated route.
Conclusion
Start by naming the destination. Look up its current recommended dimensions, keep your original in a separate folder untouched, and export a new copy at about double the display size as a JPEG or WebP file under 500KB.
That combination is usually the whole trick: fewer pixels than the camera captured, plus sensible compression. Updated for 2026, the numbers stay the same because they come from screen sizes rather than fashions.
