Free Tool

AVIF Image Converter

Convert PNG, JPG, WebP, GIF & BMP to next-gen AVIF — with optional responsive breakpoints for srcset. Drag in a batch, download in seconds.

100% browser-side — your images never leave your device

Sitethreesixty is committed to privacy. We don't track you, set cookies, or store anything — we can't see your images and never could. This tool is completely free with no ads, no sign-up, and no popups.

How it works

Drop your images
Drag a batch onto the zone, or click to browse. PNG, JPG, WebP, GIF and BMP all accepted.
Set quality
Drag the quality slider. 75 is a solid default — great file size with barely noticeable quality loss.
Responsive sizes (optional)
Toggle responsive mode to output multiple widths. Each file gets a ready-to-copy srcset string.
Convert & download
Hit Convert, then download individual files or grab everything at once. All processed locally.
Drop images here, or click to browse
PNG · JPG · WebP · GIF · BMP — batch supported

Why this tool exists

One piece of how we achieve perfect PageSpeed scores

We built this tool for our own builds — we needed something that handled AVIF conversion, responsive breakpoints, and srcset output in one place, and couldn't find anything that did all three without friction.

If you're managing your own site and want to do this yourself, this tool gives you everything you need. If you'd rather hand it over entirely — along with the other 46 performance optimisations that combine to hit 100 on Google PageSpeed Insights — that's what we do.

See what's included View our sites

Developer Reference

How to Use AVIF Images on Your Website

The <picture> element lets you serve AVIF to browsers that support it, with an automatic fallback for those that don't. Combine it with srcset for responsive breakpoints and you're serving the right size and the right format to every device.

HTML 
<!-- Responsive AVIF with JPG fallback -->
<picture>
  <source type="image/avif"
          srcset="hero-400.avif 400w,
                  hero-800.avif 800w,
                  hero-1200.avif 1200w"
          sizes="(max-width: 600px) 400px,
                 (max-width: 1024px) 800px,
                 1200px">
  <img src="hero.jpg"
       alt="Descriptive alt text"
       loading="lazy"
       width="1200"
       height="675">
</picture>
How to add AVIF with fallback
The browser reads <source> elements top-down and picks the first format it supports. Place AVIF first, then WebP if you like, with <img> as the universal fallback. No JavaScript needed.
Always set width and height
Explicit width and height on the <img> tag let the browser reserve space before the image loads — eliminating layout shift (CLS). Use CSS to make it responsive.
Use loading="lazy" below the fold
Native lazy loading defers off-screen images until the user scrolls near them. For your hero image, use fetchpriority="high" instead to prioritise the LCP element.

Image Weight Calculator

How Much Bandwidth Are Your Images Costing You?

Enter your page's image stats to see the real-world impact of switching to AVIF. Most sites see 70–85% bandwidth reduction.

Typical JPG: 200–500 KB
Current (JPG/PNG)
2.7 MB/page
Page weight
27 GB/mo
Monthly transfer
After AVIF
0.5 MB/page
Page weight
4.9 GB/mo
Monthly transfer
82%
bandwidth reduction

From the 360° View blog

More on Performance & Web Design

Practical insights on building faster, more effective websites for small businesses.

View all posts