Choosing image size and format for the web
Practical guidance on target dimensions, when to pick PNG, JPEG or WebP, and how to balance sharpness against file size for fast pages.
Match the pixels to the display size
The single biggest saving comes from not shipping more pixels than a page will ever show. A photo displayed in a 600 pixel wide column does not need to be 4032 pixels across, even on a high-density screen where roughly double is plenty. Decide the largest size the image appears at in your layout, then resize to that, or a little more for retina displays. Longest edge and Fit box modes make this easy because you cap the dimension that matters and let the other side follow.
PNG, JPEG or WebP
Reach for JPEG for photographs and detailed scenes, where its lossy compression removes detail the eye barely notices and keeps files small. Use PNG when you need lossless quality or transparency, such as logos, icons and screenshots of text, accepting that photos saved as PNG can be several times larger. WebP is the modern all-rounder: it usually beats both, offering smaller photos than JPEG and lossless transparency like PNG, and it is supported by every current browser. When in doubt, export the same resize as WebP and compare the file size shown.
Quality settings that matter
For the lossy formats the quality slider is where you trade sharpness against weight. Around 75 to 85 percent is a common sweet spot for web photos, where the image still looks clean but the file is far lighter than at 100 percent. Pushing quality to the maximum rarely looks better to a viewer yet inflates the download. It helps to lower the quality a few steps and watch the file size readout until you notice the image softening, then step back up one notch.
Why smaller images pay off
Image weight is often the largest part of a web page, so trimming it directly speeds up loading and improves Core Web Vitals such as Largest Contentful Paint. Lighter images also save mobile data and render sooner on slow connections. Because this resizer works locally, you can iterate quickly: try a dimension, glance at the new size and the percentage saved, and adjust until the picture is as small as it can be without visibly degrading.