A practical guide to your next decision
A practical field guide to image size, composition and file weight. Read from start to finish, or jump straight to the decision you need to make.
Worked example and sample files
Transparency is stored in an alpha channel. A transparent pixel is not the same as a white pixel, and partially transparent edges need careful resampling to avoid dark halos. Keep PNG or choose WebP when the destination supports transparency. JPEG has no alpha channel, so exporting to JPEG composites the image over your chosen background color.
Work through an example
A 640 × 480 transparent graphic resized to width 320 becomes 320 × 240. With PNG output and transparency enabled, empty corners remain transparent. To place it on a 600 × 600 square without enlargement, choose padding; the 640 px source first fits to 600 × 450.
- Open the relevant tool below and choose a supported image. Check the original dimensions and bytes before changing anything.
- Set the dimensions and fitting mode for your destination. Enable enlargement only if you accept that it cannot restore missing detail.
- Process the image, switch between Original and Result, and check the final pixel dimensions and exact bytes. If a target is not met, change an allowed constraint and run again.
Check before you download
PNG has no meaningful JPEG-style quality control here. If a transparent PNG is too large, try the optional lossless optimizer or reduce its dimensions. Always inspect semi-transparent edges against both light and dark backgrounds.
Try the files yourself
The following original geometric illustration and exports are supplied with this project. These are actual files, not estimated savings. The exported examples use JPEG quality 85. Your own images will have different byte counts; compare details as well as weight.
| Result | Width × Height | File size |
|---|---|---|
| Original | 4032 × 3024 | 225354 bytes |
| Try a sample image | 1200 × 900 | 36438 bytes |
| Fit within bounds | 1440 × 1080 | 41113 bytes |
| Fill & crop | 1920 × 1080 | 44272 bytes |
| Add padding | 1920 × 1080 | 44602 bytes |
Choose your next step
Exported images remove EXIF, GPS and XMP metadata. Processing uses SDR/sRGB.
Check opacity separately from background appearance
A transparent image can look white because the viewer places it on a white surface. That is not evidence that its alpha channel was flattened. Conversely, an opaque white corner can look identical in that viewer. Test the exported PNG on a contrasting background or in an application that shows transparency. Inspect soft edges too, because they use partial opacity rather than simply transparent or opaque pixels.
Keep the transparent original for every test. If a previous JPEG has already combined the artwork with a solid background, choosing PNG cannot recover the alpha. Resize from the source with transparency enabled, then compare its light and dark edge behavior. A small file is only useful if it still integrates correctly into the intended layout.
Transparency needs a format and a background decision
Transparent space is not white space. An alpha channel records how opaque each pixel is, including soft edges around a logo or illustration. PNG and static WebP outputs can retain this channel. JPEG cannot: the image must be composited onto a background. Choose that background deliberately, especially when the final page is dark or the artwork has pale lettering.
Inspect edges against both light and dark surfaces. A logo that looks correct on white can reveal a halo on navy. Padding has the same choice: keep its empty space transparent, or fill it with a chosen color. Once alpha has been flattened into an opaque file, switching the extension back to PNG cannot reconstruct the missing transparency. Return to the transparent original instead.
Why a resized PNG can become heavier
Resizing changes pixel values along edges and gradients. A compact source may use a palette, while a browser export may use a fuller color representation. The original may also have been carefully optimized. Fewer pixels therefore do not guarantee fewer stored bytes. Compare the real source and output sizes rather than assuming a particular saving from the scale percentage.
Try the optional lossless optimizer when PNG is required. “Lossless” describes the optimization of the already exported PNG: it must preserve that image’s decoded pixels. It does not undo changes introduced by resizing, and it does not guarantee a smaller file for every input. If the optimized export is not smaller, retaining the valid native output is preferable to claiming a saving that did not happen.
A square file does not have to be a square crop
Padding changes the canvas while leaving the whole photograph visible. It is useful for catalog tiles, artwork previews and layouts where every file needs the same outer shape. Cover changes the composition to fill that shape. Both can make a 1080 × 1080 file, but only padding keeps all the original edges. Think about whether empty space or missing content is the more acceptable tradeoff.
A 1200 × 1800 portrait fitted into 1080 × 1080 becomes 720 × 1080, leaving 180 px on each side. A small 600 × 400 source stays at that size when enlargement is disabled; on a 1080 square it leaves 240 px horizontally and 340 px vertically. This can be the correct outcome. A larger canvas is not permission to invent missing source detail.
The concepts behind this page
These relationships explain why changing one setting can affect another. Use them to identify which constraint matters most for your image.
- Alpha channel
- Per-pixel opacity, including partially transparent edges.
- PNG
- A supported lossless output that can carry an alpha channel.
- JPEG
- A supported photographic output with lossy encoding and no transparency.
- Static WebP
- A supported still-image format with transparency and quality-controlled export.
- Padding
- Added canvas space around an image whose proportions stay intact.
- File size in bytes
- The amount of data in the encoded download, measured after processing.
- Pixel dimensions
- The width and height of the decoded image grid.
- Output canvas
- The complete exported rectangle, including any padding.
- Aspect ratio
- The relationship between width and height, such as 4:3 or 16:9.
- Pixel dimensions determine the proportions described by Aspect ratio.
- Padding adds space to Output canvas.
- JPEG flattens instead of retaining an Alpha channel.
- PNG can preserve an Alpha channel.
- Static WebP can preserve an Alpha channel.
Questions worth asking before you export
Why did my transparent logo get a solid background?
JPEG cannot retain alpha, and disabling transparency also flattens it. Choose PNG or static WebP with transparency enabled, starting from the transparent original. Converting an already opaque JPEG back to PNG cannot recover alpha.
Why is a smaller PNG heavier than its source?
Resampling, palette differences and encoder settings can change storage efficiency. Compare actual bytes and try the optional lossless optimizer. Fewer pixels alone do not guarantee a smaller encoded file.
Does quality 100 make the export lossless?
No. JPEG quality 100 is still an encoding setting, not a promise of identical source pixels. Resizing itself also changes the grid. Preserve the original when you need an unchanged archive.
Sources and how to verify the examples
The numerical examples on this page come from explicit geometry calculations and the project’s synthetic files. Hypothetical byte counts illustrate acceptance rules; downloadable sample counts describe those specific files. The references below explain the underlying formats and browser export API, not a guaranteed saving or acceptance by another service.
Ready to prepare your image?
Keep the original, choose one clear requirement, and inspect the exported file. A useful result meets its destination’s rules and keeps the details that matter.
Back to the image tools