{"id":52311,"date":"2024-11-01T07:00:00","date_gmt":"2024-11-01T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=52311"},"modified":"2025-05-26T12:22:09","modified_gmt":"2025-05-26T19:22:09","slug":"avif-vs-webp","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/avif-vs-webp\/","title":{"rendered":"AVIF vs. WebP: Como Escolher o Formato de Imagem Moderno Correto"},"content":{"rendered":"

Se apenas ler a frase “formato de imagem” te assusta \u2014 calma. Fique conosco por um<\/em> segundo.<\/p>\n

JPEG. Voc\u00ea conhece esse, certo?<\/p>\n

PNG. Ei, voc\u00ea tamb\u00e9m j\u00e1 ouviu falar disso!<\/p>\n

Esses s\u00e3o ambos formatos de imagem. E WebP e AVIF s\u00e3o apenas duas vers\u00f5es um pouco mais recentes. <\/p>\n

Por que diabos eles foram criados?<\/p>\n

Bem, assim como quando o Modelo T foi desenvolvido pela primeira vez para substituir cavalos, esses formatos modernos visam mudar e melhorar o status quo em termos de velocidade e qualidade.<\/p>\n

Ent\u00e3o, por que diabos voc\u00ea deveria continuar lendo?<\/p>\n

Se voc\u00ea quer garantir que o site da sua pequena empresa esteja o mais preparado poss\u00edvel para acompanhar a tecnologia moderna e as demandas dos consumidores em evolu\u00e7\u00e3o, voc\u00ea vai querer seguir o exemplo de Henry Ford e ser inventivo.<\/p>\n

Felizmente, hoje esse trabalho \u00e9 um pouco menos complicado, mas provavelmente um pouco mais t\u00e9cnico. Este guia pode fornecer-lhe o racioc\u00ednio, as dicas e as ferramentas para entender, escolher \u2014 e at\u00e9 implementar o formato de imagem que far\u00e1 do seu site um sucesso estrondoso.<\/p>\n

\"linha<\/figure>\n

Por Que se Preocupar com os Formatos de Imagem para o Meu Site?<\/h2>\n

O formato dos arquivos em seu site, especialmente imagens<\/a>, pode parecer a \u00faltima<\/em> coisa com que voc\u00ea realmente precisa se preocupar.<\/p>\n

Instamos voc\u00ea a reconsiderar. <\/p>\n

Aqui est\u00e1 exatamente por que o formato que voc\u00ea usa para gr\u00e1ficos \u00e9 fundamental para a experi\u00eancia e desempenho do site.<\/p>\n

Imagens Est\u00e3o em Todo Lugar\u2026<\/h3>\n

N\u00e3o importa o seu neg\u00f3cio, as imagens provavelmente comp\u00f5em uma parte significativa do seu site.<\/p>\n

De acordo com o Web Almanac, em desktops, as imagens representam mais de 1.000 KB<\/a> dos 2.315 KB totais de um site. Isso \u00e9 pr\u00f3ximo de 50%! Para dispositivos m\u00f3veis, as imagens constituem quase 900 KB de um total de 2.020 KB. O pr\u00f3ximo tipo de conte\u00fado mais usado (JavaScript) nem sequer chega \u00e0 metade do peso das imagens!<\/p>\n

\"Peso<\/figure>\n

N\u00e3o \u00e9 surpresa que quase 100% das p\u00e1ginas de sites<\/a> contenham uma imagem. E que as imagens s\u00e3o o componente mais impactante em 80% dos sites visualizados por desktop (para mobile, isso cai para 70%). Isso \u00e9 evidenciado pela m\u00e9trica Largest Contentful Paint (LCP) dos Core Web Vitals<\/a>, que identifica o maior elemento encontrado \u201cacima da dobra\u201d em um site.<\/p>\n

Em outras palavras, \u00e9 quase imposs\u00edvel exagerar a presen\u00e7a e a import\u00e2ncia das imagens na web.<\/p>\n

…Ent\u00e3o, Como Eles Funcionam \u00e9 Importante!<\/h3>\n

Quando voc\u00ea considera como as imagens comp\u00f5em a maior parte do peso de uma p\u00e1gina de um site, como elas s\u00e3o formatadas \u2014 o que impacta como elas se comportam \u2014 torna-se cr\u00edtico pensar a respeito.<\/p>\n

Diferentes formatos, como AVIF e WebP, nos quais mergulharemos a seguir, impactam o tamanho e o peso das imagens. <\/p>\n

Al\u00e9m disso, diferentes formatos redimensionam e comprimem de maneiras distintas. Se voc\u00ea n\u00e3o conseguir editar uma imagem para o tamanho ou peso ideal para o seu site, voc\u00ea ficar\u00e1 preso com gr\u00e1ficos pesados e\/ou distorcidos que prejudicam a velocidade de carregamento, bem como a experi\u00eancia do usu\u00e1rio.<\/p>\n

E essa experi\u00eancia ruim n\u00e3o \u00e9 apenas um aborrecimento para os visitantes. Com o tempo, \u00e0 medida que os motores de busca percebem o tempo de carregamento lento e as rejei\u00e7\u00f5es causadas por imagens desagrad\u00e1veis, sua classifica\u00e7\u00e3o pode cair e prejudicar sua visibilidade, convers\u00f5es e, eventualmente, receita.<\/p>\n

Parece que est\u00e1 na hora de aprender sobre otimizar imagens para a web<\/a>?<\/p>\n

Neste artigo, vamos abordar dois formatos de imagem populares e modernos que todo propriet\u00e1rio e gerente de site deve conhecer.<\/p>\n\n

\n\n\n

Get Content Delivered Straight to Your Inbox<\/h2>

Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p>

<\/div>