JPG to AVIF Crop Converter
Load a JPG, drag the crop handles to define exactly the area you need, preview the result, then download a compact AVIF. Everything runs in your browser — your image never leaves your device.
⚠️ AVIF encoding note: Your browser may not fully support AVIF encoding via the Canvas API. For best results, use Chrome 85+ or Edge 85+. Firefox 93+ also works. If conversion fails, try a different browser.
Drop a JPG here
or Browse Files · JPG / JPEG supported
What This Tool Does
This tool loads a JPG image directly in your browser, presents an interactive crop overlay with draggable handles, and converts the selected area to an AVIF file. No server upload is required. The full workflow — loading, cropping, encoding — runs entirely in client-side JavaScript using the HTML5 Canvas API and the browser's built-in toBlob('image/avif') encoder. AVIF delivers up to 50% smaller file sizes than JPG at equivalent visual quality, making it the ideal format for web-optimized images.
Who This Is For
- Web developers who need a cropped, web-optimized AVIF from a source JPG for use in a
<picture>element or CMS - Content teams reducing image weight for faster page loads and better Core Web Vitals scores
- Designers preparing hero images or product shots cropped to an exact composition in AVIF format
- Anyone who needs to trim and convert a JPG to AVIF without installing Photoshop or Squoosh
JPG vs AVIF: Format Comparison
| Property | JPG | AVIF |
|---|---|---|
| Compression | Lossy (DCT) | Lossy (AV1-based) |
| Typical file size vs JPG | Baseline | 40–50% smaller at same quality |
| Quality loss on re-save | Yes — accumulates | Yes — but only on re-encode |
| Transparency support | No | Yes (alpha channel) |
| HDR color support | No | Yes (10-bit, HDR) |
| Browser support | Universal | Chrome 85+, Firefox 93+, Safari 16.4+ |
| Encoding speed | Fast | Slower (CPU-intensive) |
| Best for | Universal compatibility, email | Web delivery, modern browsers |
Frequently Asked Questions
What is AVIF and why is it better than JPG for the web?▼
AVIF (AV1 Image File Format) uses the AV1 video codec's intra-frame compression to achieve significantly smaller file sizes than JPG. Google, Netflix, and major CDNs have widely adopted it. At equivalent visual quality, AVIF files are typically 40–50% smaller than JPG — directly improving page load times and Core Web Vitals metrics.
How precise is the crop tool?▼
The crop operates at native pixel accuracy on the original JPG dimensions. The canvas is scaled to fit your screen for display, but the actual crop coordinates are mapped back to the full-resolution image before the AVIF is generated. You get an AVIF at the exact pixel dimensions shown in the crop dimensions badge.
Can I move the crop selection after setting it?▼
Yes — click and drag inside the crop rectangle (away from the handles) to reposition it anywhere within the image. Handles resize; the interior pans.
What quality setting should I use?▼
85 (the default) is a good starting point for web images — visually indistinguishable from the source JPG for most content while achieving significant file size reduction. Use 90–95 for images with fine detail (product photography, portraits). Use 70–80 for thumbnails or background images where a little more compression is acceptable.
What browsers are supported?▼
AVIF encoding via the Canvas API requires Chrome 85+, Edge 85+, or Firefox 93+. Safari has AVIF display support from 16.4+ but canvas-based AVIF encoding may not work in all Safari versions. If conversion fails, switch to Chrome or Edge for best results.
Is there a file size limit?▼
There is no server-imposed limit because no upload occurs. The practical limit is your browser's available RAM. Most modern desktops handle JPGs up to 50 MP comfortably. Very large files on memory-constrained mobile devices may be slower to process.