How to resize an image for a website

Pick the right pixel width for hero images, content images and thumbnails, then compress and choose a format so pages load fast and stay sharp.

By Utility Mule editorial team · Last updated September 30, 2026 · How we write guides

Photos straight from a phone or camera are often 4000 pixels wide and several megabytes each. A web page only needs a fraction of that, and every extra megabyte makes the page slower, especially on mobile connections. Search engines measure page speed too, so oversized images cost visitors and rankings.

How wide is wide enough?

Find out how wide the image appears on the page, then make it about twice that, so it stays sharp on phones and high-resolution laptop screens:

If you don’t know the displayed width, 1600 pixels wide is a safe choice for most content images.

Resizing

Drop the images into Resize image and choose Fit inside. Enter the maximum width and height, and each image shrinks to fit inside that box while keeping its shape, so a batch of landscape and portrait photos all come out the right size without being stretched. Common sizes includes presets such as Full HD and the 1200 × 630 Open Graph preview image used when pages are shared on social networks.

Resizing down is safe: the image keeps its sharpness at the new size. Avoid enlarging small images; they will look soft on large screens.

Then compress and pick a format

Resizing cuts the pixel count; compression cuts the bytes each pixel takes. Compress image lets you set a quality level, or type a target file size and have it find the best quality that fits. Check the result at the size it will be shown before using it. A 2000-pixel photo usually ends up well under 300 KB.

Format matters as much:

• WebP for photos and most graphics. It is supported by every current browser and is usually 25 to 35 percent smaller than JPG at the same quality.
• JPG where WebP isn’t accepted, such as some older content management systems.
• PNG for screenshots and graphics that need perfectly sharp edges or transparency.
• SVG for logos and icons, when you have the original vector file.

Convert changes formats in a batch, and which image format should I use? explains each one in more detail.

DPI doesn’t matter on the web

Browsers ignore the DPI value in an image file and display it by its pixels alone. Advice to save web images “at 72 DPI” is a leftover from print software; only the pixel dimensions affect how big and sharp an image looks on a page. How to make an image 300 DPI explains where DPI does matter.

Let the website help

Many site builders and content management systems create smaller copies automatically and serve the right one for each screen. Uploading a sensibly sized original, around 2000 pixels wide, gives them enough to work with without storing huge files.