Change image width and height
To resize an image online, set the width the layout needs, then compress if you still care about weight. Compression without resize is how a 24-megapixel JPEG becomes a slightly smaller 24-megapixel JPEG. The browser still decodes millions of pixels to paint a 320-pixel thumbnail.
For a content column around 720 CSS pixels, 1440 pixels of width covers 2x screens. For a full-bleed hero, 1920 is enough more often than pride admits. Print is the exception; this tool is for the web. If you are filling Instagram or Open Graph, skip the guesswork and use social image sizes, which already knows the boxes.
Keep aspect ratio (do not stretch)
Stretching a bottle to fill a square slot distorts the label. Crop instead. Lock aspect here, or set only a width and let height follow. Percent mode is for reducing a set together - half-size proofs, not for fitting a feed.
"Do not upscale" exists because someone will type 2000 into a 640-pixel screenshot and call the blur a bug. We will not invent detail. If you need a larger file for a platform minimum, add a border or a canvas, or shoot it again.
Resize for websites: 1440, 1920, and CSS max-width
max-width: 100% only shrinks on screen. Visitors still download the whole file. Resize first, then let CSS handle fluid layout.
.prose img {
max-width: 100%;
height: auto;
display: block;
}<img src="/media/article-1440.jpg" alt="Walnut desk with prints"
width="1440" height="960" loading="lazy">After resize, compress or convert to WebP. If you are building srcset, jump to the picture tag generator and cut several widths in one pass.
Frequently asked questions
Should I lock aspect ratio when I resize an image?
Yes, unless you intend to stretch. Stretching a pack shot to fit a slot is how products look cheap. Use crop or the social presets if you need a new frame.
What does do not upscale mean?
It refuses to invent pixels. A 400-pixel icon cannot become a sharp 1600-pixel banner. The tool will not pretend otherwise.
Resize by percent or by pixels?
Pixels when you know the layout. Percent when you want a set of images all 50% of themselves, for example a contact sheet.
What width should a blog photo be?
If the column is about 720 CSS pixels, 1440 pixels of width covers 2x screens. Full-bleed heroes are usually fine at 1920. Print is the exception; this tool is for the web.
Does resize image change the file format?
Only if you pick JPEG, PNG, or WebP in the output control. Keep similar stays in a family the browser can encode from the source.
Why is my resized JPEG still a large file?
You may have kept the original pixel count by accident, or quality is too high. Set the real width, then compress or drop quality toward 80.