Image Optimizer
Compress, resize, and convert images locally in your browser. No uploads, no server.
Your images stay private. All processing happens entirely in your browser using the Canvas API. Nothing is uploaded to a server, stored, or transmitted. Safe for unreleased product shots, internal assets, and privacy-sensitive media.
Drop images here or click to browse
JPEG, PNG, WebP, AVIF · Multiple files supported
All image processing happens locally in your browser using the Canvas API. Your images are never uploaded to CodeAva servers, never stored between sessions, and never transmitted anywhere. This makes the tool safe for unreleased product shots, internal brand assets, and any privacy-sensitive media you would not want to upload to a third-party service.
Why image optimization matters for web performance
Images are consistently among the largest contributors to page weight on the web. A single uncompressed hero image or product photo can weigh several megabytes, adding seconds to first load times, hurting Largest Contentful Paint scores, and increasing bandwidth costs for every visitor. Converting to modern formats like WebP or AVIF and compressing to a sensible quality level often cuts file size by 50–80% with no meaningful loss in visual quality for most use cases.
Core Web Vitals, Google's page experience signals, are directly affected by image weight. Lighthouse flags unoptimized images under “Serve images in next-gen formats” and “Properly size images.” Addressing these findings with real format conversion and resizing — not just renaming files — is one of the highest-impact changes you can make to a slow page.
Browser-based processing matters beyond convenience. Uploading images to a third-party compressor server means your files leave your device. For unreleased product photography, internal brand assets, client work under NDA, or any imagery that is not yet public, that is a real privacy exposure. This tool processes everything inside your browser tab using the Canvas API — the same technology browsers use to render graphics — so your images never leave your machine.
Why should I convert JPEG or PNG to WebP or AVIF?
WebP and AVIF are modern image codecs designed for the web. They typically deliver meaningfully smaller files than JPEG or PNG at equivalent visual quality — WebP generally 25–35% smaller than JPEG, AVIF often more. Smaller images load faster, consume less bandwidth, and contribute to better Core Web Vitals scores. WebP is broadly supported across all modern browsers and is usually the safest default for web delivery today. AVIF offers stronger compression but has some gaps in older environments — a <picture> element with a JPEG fallback is recommended when serving AVIF in production.
Format comparison
| Format | Best used for | Transparency | Compression | Practical note |
|---|---|---|---|---|
| JPEG | Photos, complex images | No | Lossy | Universal support; reliable fallback for any browser. |
| PNG | Logos, screenshots, transparency | Yes | Lossless | Larger files; best when pixel-perfect quality or alpha channel is required. |
| WebP | Most web images | Yes | Lossy or lossless | Strong default for web delivery. Broadly supported. Typically 25–35% smaller than JPEG. |
| AVIF | High-performance web delivery | Yes | Lossy or lossless | Best compression available. Use a JPEG or WebP fallback in production for older environments. |
Serving next-gen images with fallback support
Once you have optimized your images to AVIF or WebP, use the HTML <picture> element to serve the best format each browser supports, with a safe fallback:
<picture>
<!-- AVIF: best compression, requires modern browser -->
<source type="image/avif" srcset="hero.avif" />
<!-- WebP: broad support, smaller than JPEG -->
<source type="image/webp" srcset="hero.webp" />
<!-- JPEG: universal fallback -->
<img
src="hero.jpg"
alt="Descriptive alt text"
width="1200"
height="630"
loading="lazy"
/>
</picture>The order of <source> elements matters: browsers pick the first type they support and ignore the rest. Put the most compressed format first (AVIF), then WebP, then the JPEG fallback. The <img> tag at the end serves as the fallback for browsers that do not support <picture>.
What this tool helps with
Good uses
- Reducing image file size for websitescompress hero images, product photos, and blog images before publishing to improve load times.
- Converting JPEG or PNG to WebPreplace legacy formats with a broadly supported modern codec for immediate performance gains.
- Preparing Open Graph and social imagesresize to exactly 1200×630 for og:image or 1080×1080 for Instagram using built-in presets.
- Fixing Lighthouse next-gen format warningsconvert the images Lighthouse flags under 'Serve images in next-gen formats' directly in the browser.
- Processing privacy-sensitive assetscompress unreleased product shots, internal media, or client assets without uploading them to a third-party server.
- Bulk compressing content marketing imagesdrop a folder of blog images, optimize them all at once, and download as a ZIP.
- Resizing e-commerce product imagesstandardize product photography to consistent dimensions before uploading to a storefront.
Limitations to know
- Very large raw files (50MB+)browser Canvas has practical memory limits. Very large images may be slow or fail on low-memory devices.
- AVIF on older or unsupported browsersAVIF encoding requires browser support. The tool will warn you if AVIF is unavailable in your current browser.
- Lossless output from lossy sourcesre-encoding an already-compressed JPEG as PNG or lossless WebP will increase file size, not reduce it.
- Replacing an image CDN or build-step pipelinethis tool is for manual optimization. For automated image optimization at scale, integrate a CDN or build tool.
How to use the Image Optimizer
- 1
Upload one or more images
Drag and drop images onto the upload area or click to browse. Multiple files are accepted at once. JPEG, PNG, WebP, and AVIF inputs are supported.
- 2
Choose an output format
Select WebP for the best broadly supported option, AVIF for maximum compression (with graceful fallback if unavailable), JPEG for universal compatibility, or PNG for lossless output.
- 3
Set quality and resize options
Adjust the quality slider (82 is a practical default) and pick a resize preset — Open Graph, Instagram square, hero image — or enter custom dimensions. Enable aspect ratio lock to fit within bounds without stretching.
- 4
Run optimization
Click the Optimize button. Each image is processed locally using the Canvas API. A progress state shows for each file.
- 5
Review results and download
Check per-image savings, drag the before/after comparison slider to inspect quality, then download individual files or all results as a ZIP archive.
Common issues and how to fix them
Images are too large and slow to process
Very large images (typically 20MB+) can exhaust browser Canvas memory. Reduce batch size or split large files across multiple runs. On a 16GB RAM device most images under 20MB process without issue.
AVIF not supported — encoding fails
AVIF encoding requires browser-level codec support. If the tool shows a warning, switch to WebP which offers strong compression with near-universal modern browser support.
File size increased after optimization
If the source is already well-compressed (e.g. a quality-85+ WebP), re-encoding at a similar quality may not reduce size further. Try lowering quality or switching format. Also note that PNG output is always lossless and will often be larger than the JPEG equivalent.
Transparent areas became white or black
JPEG does not support transparency. Converting a PNG with an alpha channel to JPEG fills transparent areas with white. Use WebP or PNG as the output format to preserve transparency.
Image dimensions changed unexpectedly
When aspect ratio lock is enabled, the tool fits your image within the target bounds proportionally — it will not stretch or distort. If one dimension is left blank, only the specified dimension constrains the resize. Use 'Keep original dimensions' preset to disable resizing entirely.
Output looks visibly degraded
Quality is set too low for this image. Increase the quality slider to 80–90. Some images — particularly those with flat colours, text, or sharp edges — are more sensitive to quality reduction than photographs.