Table of contents
Aspect ratio, in plain termsPicking dimensions by where the image goesThe resize workflowBefore you publishAspect ratio, in plain terms
Aspect ratio is just the relationship between an image's width and height. A square avatar is 1:1. A typical camera photo is closer to 3:2. A video-style banner is 16:9, and a vertical social story is 9:16. Resizing keeps that ratio intact while changing the overall pixel count — it is not the same operation as cropping, which removes part of the image entirely.
Getting the ratio wrong is what makes people or products look subtly stretched or squashed on a page. Most resizing tools let you lock the aspect ratio so this cannot happen by accident.
Get the right dimensions in one pass
Enter a target width in the Resize Image tool and lock the aspect ratio so nothing distorts.
Picking dimensions by where the image goes
A full-width hero image needs more pixels than a blog thumbnail, a profile photo, or a small product card. Match the target width to where the image will actually be displayed, not to the resolution your camera happened to produce.
For most content images — blog headers, article photos, product shots — widths around 1200 to 1600 pixels are plenty. Smaller cards and thumbnails need less. web.dev has a useful breakdown of why serving appropriately sized images matters for page performance, if you want to go deeper on the technical side.
The resize workflow
Start from the original file and work on a copy — repeatedly resizing the same JPG loses a little detail with every export.
Enter a target width in the Resize Image tool and keep aspect ratio locked so nothing distorts.
Choose a quality level that balances clarity and size — ordinary photos tolerate moderate JPG quality well, while screenshots and text-heavy images need a higher setting to stay legible.
Download and check the image in the actual page layout on both desktop and mobile. An image that looks sharp in one context can look oversized or soft in another.
Before you publish
Open the finished page on a real phone if you can — slow loading, blurry detail, and awkward crops are much easier to spot there than on a wide desktop monitor.
Use descriptive file names. "blue-folder-dashboard.jpg" is more useful long-term than "IMG_4021.jpg", both for your own organization and for image search.
Do not scale a small image up expecting it to sharpen — upscaling makes existing softness more visible, not less.
If the image contains text, zoom in after resizing. Text edges reveal quality problems faster than ordinary photo content does.
Stop shipping full-resolution camera photos
Resize to the width your layout actually needs and keep pages loading fast.
FAQ
What width should I use for website images?
Match the largest size the image will display at — often 1200 to 1600 pixels for typical content images.
Does resizing reduce quality?
It can if you choose very small dimensions or low quality settings, but sensible choices keep images clear.
Should I use JPG or PNG?
JPG for most photos; PNG for graphics that need transparency or crisp flat colors.
Can I resize images on mobile?
Yes — a browser-based resizer can create smaller copies directly from phone photos.
Should I keep the original file?
Yes, always — it lets you create different sizes later without starting over.