For the broadest compatibility, export PNG or JPG.
Image Resizing 101: Quality, Formats, and Best Practices
Resizing a raster image (JPG, PNG, WebP, GIF, BMP, TIFF) changes the number of pixels it contains.
Because raster graphics are made of a fixed grid of pixels (unlike vector graphics such as SVG),
scaling down usually removes detail, while scaling up cannot invent new detail. Modern browsers apply
high-quality interpolation when you resize on a canvas, which keeps edges smooth, but it can’t restore
texture that wasn’t there. For the best results, avoid enlarging photos far beyond their original
dimensions, and prefer downscaling in sensible steps (e.g., 2–4× smaller rather than 20×).
Pixels vs. PPI/DPI (What Actually Matters)
For screens, pixel dimensions (e.g., 1600×900) determine how large an image appears.
PPI/DPI metadata has little effect on web display. For printing, pixel count and target DPI both matter:
a 3000×2400 image at 300 DPI prints crisply at 10×8 inches. If you plan to print, keep the largest,
highest-quality version; for the web, export only as large as needed to reduce file size and loading time.
Aspect Ratio and Cropping
Maintain the original aspect ratio to avoid distortion. If you must change shape (e.g., square avatar from a
rectangular photo), crop first, then resize. Our aspect-ratio lock helps prevent stretched faces and squashed logos.
Choosing the Right Format
JPEG (JPG): Best for photographs. Small files with adjustable quality. No transparency.
PNG: Best for UI, text, line art, or when you need transparency. Larger files than JPG.
WebP: Excellent modern choice—often smaller than JPG/PNG with similar quality. Supports transparency.
GIF: Simple graphics and tiny animations; limited colors; not ideal for photos.
BMP/TIFF: Legacy or print workflows; very large; limited browser support for export.
ICO: Favicons; typically export small sizes (16–256 px).
Quality, Compression, and File Size
When exporting JPG/WebP, use the quality slider to balance clarity and size. Higher quality preserves fine details
but increases file weight. For web use, aim for the smallest image that still looks clean at its intended display size.
If an image contains sharp edges or text, consider PNG or high-quality WebP to avoid compression halos.
Upscaling Tips
Small enlargements (up to ~150%) are often acceptable; larger jumps will look soft.
Start with the highest-resolution source you have.
Sharpening after upscaling can help, but be careful of halos and noise (not included here).
Workflow Suggestions
Decide the target pixel size first (e.g., 1200 px wide hero image, 512×512 app icon).
Keep lock ratio enabled for proportional resizing; crop separately when needed.
Export WebP or optimized JPG for photos; use PNG/WebP for graphics with transparency.
For “retina” displays, consider providing 2× assets (e.g., 512 px graphic for a 256 px slot).
Quick rule of thumb: pick the smallest format and dimensions that still look crisp at the largest size your site or app will display.
🧪 5 Fun Facts about Resizing & Converting
1
Halving is a quarter
Cut width and height in half and you drop 75% of the pixels. That’s why a tiny resize can slash file size without looking worse.
Pixel math
2
Canvas has a chef’s choice filter
Browsers use high-quality downscalers (Lanczos-esque) on canvas. Even without “AI upscalers,” you get surprisingly clean shrinks for photos and UI.
Hidden helper
3
WebP does transparency and animation
WebP can replace both PNG (alpha) and GIF (animation). Safari joined late, but modern browsers now handle both in one format.
Format superpower
4
ICO is a tiny portfolio
An .ico file can bundle multiple sizes (16–256 px) inside one file. Windows picks the sharpest one for each context.
Favicons 101
5
Q ≈ 92 is the JPEG sweet spot
Above quality ~92, JPEG gains are hard to see but file size balloons. Dropping to the 80–92 range often halves weight with little visible change.