🖼️ Image Tools
Compress, resize, convert, crop, and filter images — all processing happens in your browser.
📦 Image Compressor
Usage Guide
What it does
Reduces image file size by re-encoding at a lower quality using the Canvas API. Output is always JPEG (lossy compression gives best size reduction).
How to use
- Drag & drop or click to upload an image
- Adjust the Quality slider (lower = smaller file, more loss)
- Click Compress to process
- See original vs compressed size and savings percentage
- Click Download to save the compressed image
Tips
- Quality 60–80% usually gives great results with minimal visible loss
- Photos compress better than graphics with sharp edges or text
- Combine with the Resizer tool for maximum savings
📐 Image Resizer
Usage Guide
What it does
Resizes an image to custom width and height dimensions. Optionally locks aspect ratio so the image isn’t stretched or squished.
How to use
- Upload an image — original dimensions auto-fill
- Enter a new Width or Height
- With Lock aspect ratio checked, changing one dimension auto-updates the other
- Click Resize, then Download
Real-World Use Cases
- Resize images for social media (e.g., 1200×630 for Open Graph)
- Create thumbnails for web pages
- Reduce dimensions for email attachments
🔄 Image Format Converter
Usage Guide
What it does
Converts images between PNG, JPEG, and WebP formats using the Canvas API.
How to use
- Upload an image in any browser-supported format
- Select the desired Output Format
- Click Convert, then Download
Format Comparison
- PNG — lossless, supports transparency, larger file size
- JPEG — lossy, no transparency, best for photos, small file size
- WebP — modern format, lossy or lossless, great compression, transparency support
🔤 Image → Base64
Usage Guide
What it does
Reads an image file and outputs its full Base64-encoded data URL string, ready to embed in HTML, CSS, or JSON.
How to use
- Upload an image — the Base64 data URL appears below
- Click Copy to copy the full data URL to clipboard
Real-World Use Cases
- Embedding images directly in HTML:
<img src="data:image/png;base64,..."> - Inline CSS backgrounds:
background-image: url(data:...) - Sending images in JSON API requests
- Avoiding extra HTTP requests for small icons
🖼️ Base64 → Image
Usage Guide
What it does
Takes a Base64-encoded image string (with or without the data: prefix) and renders it as a downloadable image.
How to use
- Paste the full data URL (
data:image/png;base64,iVBOR...) or just the raw Base64 string - Click Decode & Preview to see the image
- Click Download to save it as a file
Tip
If you paste raw Base64 without the data: prefix, the tool assumes PNG format. For other formats, include the full data URL.
🎨 Image Filters
Usage Guide
What it does
Applies real-time CSS/Canvas filters to an image: brightness, contrast, grayscale, sepia, blur, invert, and hue rotation.
How to use
- Upload an image — filter sliders appear
- Drag sliders to adjust each filter in real time
- Click Apply & Render to burn filters into the canvas
- Click Download to save the filtered image
- Click Reset to restore all sliders to defaults
Filter Reference
- Brightness — 100% = normal, >100% = brighter, <100% = darker
- Contrast — 100% = normal, higher = more vivid
- Grayscale — 0% = color, 100% = full grayscale
- Sepia — 0% = normal, 100% = warm vintage tone
- Blur — 0px = sharp, higher = blurrier
- Invert — 0% = normal, 100% = negative
- Hue Rotate — shifts all colors around the wheel (0–360°)
✂️ Image Crop Tool
Usage Guide
What it does
Lets you select a rectangular area on an image by clicking and dragging, then crops to that selection.
How to use
- Upload an image — it appears on the canvas
- Click and drag to draw a selection rectangle
- Click Crop to extract that region
- Click Download to save the cropped image
- Click Reset Selection to re-draw
Tips
- The selection rectangle is shown with a blue dashed outline
- You can draw a new selection at any time
- Output is always PNG to preserve quality