Image Resize
Resize one image locally with exact pixel dimensions, scale presets, aspect-ratio locking, and JPEG/WebP quality control.
Click or drag an image file here
PNG, JPEG, WebP · Max 10MBWhat does Image Resize do?
Image Resize changes image dimensions in the browser for PNG, JPEG, and WebP files.
- Primary use: Image Resize changes image dimensions in the browser for PNG, JPEG, and WebP files.
- Key technical fact: Resizing changes pixel dimensions; reducing width and height by 50% cuts pixel count by 75%.
- Practical check: Compare visual quality, pixel dimensions, metadata, and exported file size before publishing the processed image.
| Topic | Direct answer | Source |
|---|---|---|
| Direct answer | Image Resize changes image dimensions in the browser for PNG, JPEG, and WebP files. | HTML Canvas API |
| Key fact | Resizing changes pixel dimensions; reducing width and height by 50% cuts pixel count by 75%. | HTML Canvas API |
| Processing model | Runs locally in the browser; no production Node server receives the input. | Browser JavaScript |
Resize images to exact dimensions
Image Resize changes the pixel width and height of a PNG, JPEG, or WebP image without uploading it. Use it to prepare thumbnails, app assets, screenshots, profile images, and web images that need a specific size.
Lock the aspect ratio when the image should keep its original proportions, or unlock it when you intentionally need a different shape. Reducing both width and height by 50% removes 75% of the pixels, which often makes files much smaller.
Processing uses the browser canvas. JPEG and WebP output can be re-encoded with a quality setting; PNG keeps transparency but may not shrink as much as photographic formats. Check the preview because resizing can soften fine detail.
How to use
- Upload one PNG, JPEG, or WebP image.
- Enter a target width and height, lock the aspect ratio if needed, or choose a preset.
- Adjust JPEG/WebP quality, preview the result, then download the resized image.
When should you resize an image?
Image Resize is for changing dimensions, not just file size. It is useful when a layout, CMS, email, avatar, or documentation image requires an exact pixel width and height.
The original file stays on your device while the browser creates a new output image. Large downscales usually look best; upscaling can make an image blurry because it invents pixels that were not in the original.
Resize with Canvas
Canvas resizing draws the source image into a canvas set to the target dimensions:
const canvas = document.createElement('canvas');
canvas.width = targetWidth;
canvas.height = targetHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0, targetWidth, targetHeight);
canvas.toBlob(saveBlob, outputMime, quality);
MCP integration
MCP (Model Context Protocol) lets AI agents and apps discover and run Coding.Tools utilities for repeatable conversions, formatting, hashing, and generation workflows.
MCP tool name: image-resize
MCP endpoint: https://coding.tools/mcp
Call tools/list first. Each tool entry includes inputSchema, outputSchema, and examples so an AI agent or client can build valid arguments without guessing.
For tools/call, read result.content[0].text for the display value and result.structuredContent for machine parsing. Tool-level failures return isError: true; protocol failures return a JSON-RPC error.
Example tools/call request:
curl -s https://coding.tools/mcp \
-H "Content-Type: application/json" \
-H "Accept: application/json" \
-H "MCP-Protocol-Version: 2025-06-18" \
-d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"image-resize","arguments":{}}}'
This image tool is browser-only in MCP. tools/call returns isError: true plus a resource_link to the web UI instead of processing local image bytes on the server.
Most text and data tools accept an input string plus optional options. Browser-only image tools are listed for discovery and return a web UI link when they need browser image APIs.