Start with where the image will actually appear
An image file has pixel dimensions; a website layout has display dimensions. They are not necessarily the same. A photograph that is 4000 pixels wide might be displayed in an 800 CSS-pixel article column. Delivering all 4000 pixels for every visitor is often unnecessary.
Inspect the image's real display width on desktop and mobile. As a practical starting example, if an image occupies about 800 CSS pixels, preparing a 1600-pixel variant can help on a higher-density screen. That is an example, not a mandatory size. Your site's responsive layout and the original photograph should decide the final dimensions.
Aspect ratio is the first setting to leave alone
Suppose a photo measures 3000 by 2000 pixels. Its aspect ratio is 3:2. If you change its width to 1200 while keeping the ratio, the corresponding height becomes 800. If you force it into 1200 by 1200 without cropping, people and products will look stretched.
RezSat's free Image Resizer keeps the original aspect ratio locked by default. Type a new width or height and the other number updates. You can unlock it for a deliberate stretch, but usually a crop is the better answer when a design requires a different shape.
Know the difference between shrinking and upscaling
Shrinking takes away pixels; upscaling invents positions for pixels that weren't in the original. A modern browser can interpolate the gaps, but it cannot reconstruct a missing eyebrow, fabric texture or product label. Enlarging a 300-pixel image to 3000 pixels does not create real photographic detail.
Our resizer blocks upscaling unless you explicitly allow it. That small safeguard prevents a common mistake: making a file much larger and assuming it became sharper.
Choose a format after choosing a size
A resized JPEG may be a good choice for a photograph. WebP often provides useful quality at fewer bytes. PNG is better when transparency or lossless graphic detail matters, but can cost much more space. No single format is best for every image.
Resize, export and compare visually. If the file is still heavy, try the Image Compressor to change format or quality. That is usually a better sequence than repeatedly exporting the same image without understanding which setting changed.
One more thing: your HTML matters
Responsive websites can offer different file resolutions to different screens with srcset and sizes. The browser can then select a suitable resource based on the layout and device density. A single huge JPEG, even after some compression, does not give the browser those choices.
Put the actual displayed image dimensions in context: check the layout, prepare appropriate variants, then use the right HTML and CSS. Google PageSpeed Insights can help surface oversized image delivery, but a green score is not the only goal. Your picture also needs to look right.
Useful links and sources
These links point to the original tool or official documentation. Features and free-tier limits may change.
- MDN — Responsive images — How srcset, sizes and responsive variants work
- web.dev — Choose the right image format — Practical guidance for WebP, JPEG and PNG
- Google PageSpeed Insights — Find delivery and image performance issues