# AVIF

> Neste drop falo do AVIF, um novo formato de imagem otimizado para web que promete ser mais potente do que o WebP.

- Canonical: https://betomuniz.com/blog/avif-superando-o-formato-webp
- Published: 2020-09-14
- Updated: 2026-04-21T17:44:00.000Z
- Language: pt
- Tags: Front-End

---

**AVIF** (AV1 Image File Format) é um padrão de compressão de imagens proposto pela [Netflix](https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4) que suporta [SDR, HDR](https://www.viewsonic.com/library/photography/what-is-hdr-hdr-vs-sdr/) e [WCG](https://www.cnet.com/how-to/what-is-wide-color-gamut-wcg/).

Além de imagens estáticas e transparência, AVIF suporta imagens animadas, assim como [GIF](https://pt.wikipedia.org/wiki/GIF), [APNG](https://pt.wikipedia.org/wiki/Animated_Portable_Network_Graphics) e [WebP](https://betomuniz.com/drops/webp).

O suporte hoje é amplo: **Chrome 85+, Edge 121+, Firefox 93+ e Safari 16+**. Confira o status atualizado no [Can I Use](https://caniuse.com/avif).

Para começar a usar AVIF, é preciso converter imagens existentes (recomendo o [Squoosh](https://squoosh.app/) do Google, ou plugins como o `sharp` para Node.js, e equivalentes para o sistema de build do seu projeto).

Em seguida, use a declaração HTML abaixo para entregar AVIF nos browsers que suportam, com fallback para WebP e formatos tradicionais:

```html
<picture>
  <source srcset="imagem.avif" type="image/avif" />
  <source srcset="imagem.webp" type="image/webp" />
  <img src="imagem.jpg" alt="Descrição da Imagem" />
</picture>
```