To prepare an image for a screen, use the destination’s pixel dimensions and decide whether seeing the whole image or filling every pixel matters more. A single file cannot fill screens with different shapes while also keeping every edge visible and avoiding distortion.
Choose your target dimensions
For a 1920 × 1080 display, enter 1920 as width and 1080 as height. For another display, use its actual resolution. A website banner may have a different shape from the visitor’s full screen, so use the banner container’s intended dimensions instead of assuming a desktop resolution.
Keep the entire image
Choose Keep proportions — fit inside. The result stays within the target box without cropping. For example, a 1200 × 1200 square fitted inside 1920 × 1080 becomes 1080 × 1080. It is still square, so the screen viewer needs to leave space on either side.
Create an exact screen-sized file
Choose Add padding to create a 1920 × 1080 canvas containing the whole square. Use black or white padding for a predictable solid surround, or transparent padding with PNG/WebP. JPG changes transparent padding to white.
Choose Centre and crop to fill the screen completely. Parts of an image with different proportions will be cut away. Check faces, text and logos near the edges before downloading.
Avoid stretching photographs
Stretching fills exact dimensions by changing width and height independently. It can be useful for abstract textures, but makes people and familiar shapes look wrong. Fit, crop or padding is usually easier to control for photos.
The viewer still affects the result
Wallpaper settings, presentation software and website styling may scale or crop a file again. This tool prepares the file; it cannot control every device’s display settings. Test the exported image where you intend to use it. Enlarging a small source to a large screen may look soft.
Behind the result
A screen is not a fixed image size: layout and device pixel density affect display. Fit preserves the whole image; crop fills a fixed box at the cost of edges. For a 600 CSS-pixel slot, a 1200-pixel source may suit a 2× display, depending on the layout.
How dimensions are calculated
A decoded image is drawn onto a new canvas. With one dimension blank, the other is calculated from the original aspect ratio. Fit inside uses the smaller of the width and height scale factors; centre crop uses the larger and clips the excess. Stretch uses separate horizontal and vertical scales. Padding keeps the subject proportional and fills the remaining canvas area.
Resampling versus canvas size
Resizing resamples pixels through the browser’s canvas drawing implementation with smoothing enabled. Reducing dimensions removes spatial detail. Enlarging interpolates pixels and cannot recover missing photographic detail. Change canvas size keeps the image at its original pixel size and adds space or clips edges around it. Maximum-long-edge mode only reduces dimensions, while custom dimensions can enlarge.
What does encoding mean?
Decoding turns the bytes in an image file into pixels that a browser can display. Encoding turns pixels back into a file, using the rules of JPG, PNG or WebP. It is not encryption. Our compression and conversion tools decode locally, draw the image onto a canvas and call the browser’s canvas.toBlob encoder. The browser supplies the codec, so results can vary between browsers.
Why size and quality are different
Pixel dimensions describe the image grid; file size measures encoded bytes. A 600 × 600 image has 360,000 pixels, but its byte size depends on format, visual complexity and quality. PNG preserves transparency; JPG requires an opaque background.
Where processing happens
Your selected image is processed on your device, without an image upload. Canvas exports are new files and may change embedded metadata or colour information. Keep a master copy for archival work. Animated PNG and animated WebP are rejected; these tools handle static images.
How target-size compression works
Choose 100 KB, 200 KB, 500 KB or a custom decimal-KB limit. For JPG/WebP, the tool tries quality values from your selected maximum down to 10% and refines a successful bracket with a bounded binary search. When you explicitly allow smaller dimensions, it can also try up to eight downsizing steps. PNG ignores quality. Exact resizer dimensions are preserved. Only a measured output within the byte limit is marked Target met; otherwise the smallest tested candidate is marked Above target. This is a bounded search, not proof of a globally optimal result.
Metadata choice
Preserve supported metadata is the default: EXIF dates, camera and GPS fields are copied, with orientation reset after decoding and dimensions updated. PNG text/dates and JPG comments stay within their format. XMP, IPTC and original colour profiles are not transferred; embedded preview links are cleared. Retained metadata is included in target-size measurements. Remove metadata omits source metadata and disables the original-file fallback. Filesystem download dates are separate.
Explore the details: Browser encodingImage formats — MDN