Developer Guide
Resize and Compress Images in the Browser
Shrink PNG, JPEG, WebP, or GIF locally on a canvas. Quality 10–100 for JPEG/WebP, 10 MB and 8192px caps, GIF first frame only, JPEG white background. Nothing uploaded.
A 4000-pixel phone photo does not belong in a blog hero at full resolution. /tools/image-resizer draws the file onto a canvas in your tab, scales it, and encodes JPEG, PNG, or WebP. The dropzone refuses SVG (that is markup — use /tools/svg-editor) and anything over 10 MB. Longest side is 8192 pixels. Nothing is uploaded, which is why a confidential screenshot can be shrunk here without a third-party compressor.
Resize, then decide on a format
Width and height default to the natural size with aspect ratio locked. Change one side and the other follows unless you unlock it. Scaling 200×100 to width 100 yields 100×50 — the same ratio, fewer pixels. That is usually what cuts bytes. Re-encoding the same pixel grid at a lower JPEG quality is the other lever.
Pick JPEG for photographs, PNG when you need lossless RGB plus alpha, WebP when you want a modern lossy (or lossless) option and the consumer can decode it. The download name is original-resized.jpg (or .png / .webp).
Quality applies to JPEG and WebP, not PNG
The slider runs from 10 to 100 and defaults to 80. Internally that is canvas.toBlob(type, quality/100). PNG encoding ignores the quality argument — a PNG is lossless either way, so moving the slider will not shrink a PNG. JPEG and WebP will. The page shows before and after byte sizes and a “N% smaller” (or larger) label so you can tell if a high-quality JPEG actually grew.
JPEG has no alpha channel. Transparent PNGs get a white fill (#ffffff) before JPEG encode. If you need the checkerboard holes, stay on PNG or WebP.
GIF, animation, and the first frame
GIF is accepted as input. The browser’s image decoder exposes the first frame. Output is still JPEG, PNG, or WebP — there is no animated GIF writer on this page. A twelve-frame spinner becomes a still. If you need the animation, do not run it through a canvas resizer.
Color profiles and EXIF orientation can also surprise you. Canvas draw uses decoded pixels; some browsers apply EXIF rotation and some strip profiles. Check the preview before you download.
Caps: 10 MB and 8192 pixels
MAX_FILE_BYTES is 10 × 1024 × 1024. MAX_DIMENSION is 8192 on both axes. Values below 1 clamp to 1. Those limits exist so a huge drop cannot freeze the tab. For print-resolution TIFFs or a 40 MB RAW, use an offline editor.
Image to Base64 on this site caps drops at 5 MB and emits a data URI. Resize first if you plan to inline: Base64 adds about 33% and a 2 MB JPEG becomes a painful HTML payload. The resizer is the wrong tool for turning a photo into data:image/jpeg;base64,… — encode after you like the pixel size.
When not to use a canvas
SVG should stay paths. Rasterizing an icon to PNG at 24×24 and then scaling it up is how you get blur. Photographs that must keep a clipping path, CMYK, or a 16-bit channel need a real image editor. The canvas path is 8-bit sRGB as the browser decoded it.
Do not chase a 90% size cut on a 64-pixel icon. You will spend more time than you save. Do chase it on a 3 MB hero that will sit behind max-width: 720px.
Common pitfalls
Unlocking aspect ratio and stretching a face. Expecting the quality slider to shrink a PNG. Dropping an animated GIF and wondering where the other frames went. Encoding JPEG and losing transparency. Skipping the preview because the percentage looked good.
- SVG is rejected; use
/tools/svg-editor. - GIF in → still JPEG/PNG/WebP out (first frame).
- JPEG fills transparent pixels with white.
Worked examples
Scale a 200×100 image to 100px wide
200 × 100, lock ratio, width 100100 × 50Same aspect ratio, one quarter of the pixels. That is usually a larger win than dropping JPEG quality one notch.
Quality slider range
JPEG or WebP qualityminimum 10, maximum 100, default 80 (canvas 0.8)PNG ignores this. If the after size is larger than before, pick a different format or a smaller dimension instead of raising quality.
Frequently asked questions
Is the image uploaded?
No. FileReader and a local canvas run in your tab. There is no image API on thedevtools.in.
Why did my transparent PNG become a white JPEG?
JPEG has no alpha. The resizer paints white, then draws the image. Keep PNG or WebP if you need transparency.
Why will it not accept my SVG?
SVG is markup, not a bitmap. Edit it in /tools/svg-editor. The resizer accepts JPEG, PNG, WebP, and GIF.
Can I compress without changing width and height?
Yes. Leave the dimensions alone and lower JPEG or WebP quality. Watch the before/after sizes; PNG will not respond to the slider.
What happened to my animated GIF?
Only the first frame is decoded. Export is JPEG, PNG, or WebP, none of which keep the GIF timeline.
Summary
Drop a JPEG, PNG, WebP, or GIF on /tools/image-resizer, lock the ratio unless you mean to stretch, and use the quality slider only on JPEG and WebP. Stay under 10 MB and 8192 pixels. Resize before you send the file through /tools/image-to-base64. SVG and animation need other tools.