About Image Resize

Resize images with aspect ratio preservation and preview. Part of the DevTools Surf developer suite. Browse more tools in the Images collection.

Use Cases

• Resize a high-resolution photo to web-optimized dimensions before uploading to a CMS.
• Generate multiple sizes of a product image (thumbnail, medium, large) from a single source.
• Resize icons and logos to the specific dimensions required by an app store submission.
• Batch-resize a folder of images to a maximum dimension for email attachment size limits.

Tips

• Always enable 'maintain aspect ratio' unless you specifically need a non-proportional resize — distorting aspect ratio is almost always unintentional.
• Resize down, not up — upscaling a small image makes it larger but blurrier; it's better to use a higher-resolution source if quality matters.
• For retina/HiDPI displays, export at 2x your target display size (e.g., 400px display = 800px export) to ensure sharp rendering on retina screens.

Fun Facts

• Bicubic interpolation, the resizing algorithm used by Photoshop and most professional tools, was first described by Keys (1989) and considers 4×4 pixel neighborhoods for each output pixel — producing smoother results than bilinear (2×2) interpolation.
• CSS image-rendering: pixelated was added to browsers in 2019 specifically for pixel art — it disables anti-aliasing interpolation when scaling, preserving the crisp edges of pixel-art game assets that would otherwise become blurry.
• WebP images support both lossy and lossless compression. When resizing and re-saving as WebP, you can choose lossless mode to avoid introducing JPEG-style artifacts that accumulate across multiple save cycles.

FAQ

What resize algorithms are available?

Nearest-neighbor (fastest, pixel art), bilinear (smooth, fast), bicubic (smooth, slower), and Lanczos (sharpest, slowest). Lanczos is recommended for photographic downscaling.

Can I resize by percentage instead of pixels?

Yes — toggle between pixel dimensions and percentage scaling. 50% halves both dimensions; use this mode to reduce all images uniformly without knowing their original sizes.

Does it handle animated GIFs?

Animated GIFs are resized frame-by-frame. Each frame is resized and the animation timing is preserved. Output file size increases proportionally to the number of frames.