Solte suas fotos e gráficos para obter cópias WebP, AVIF e JPG nas larguras que as suas páginas precisam, com os dados da câmera removidos. Veja quanto cada uma ficou menor, baixe todas como um .zip e cole o código srcset. Suas imagens nunca saem deste dispositivo. É grátis.
Como otimizar imagens para um site, passo a passo
- Escolha imagens ou solte-as na página. Arquivos JPG, PNG, WebP, AVIF e GIF funcionam.
- Marque as Larguras que você quer, de 480 a 2560. As imagens nunca são ampliadas além do original.
- Escolha os Formatos: AVIF, WebP, um JPG de reserva e PNG para imagens transparentes.
- Defina a Qualidade, o atributo sizes e a Pasta de imagens no seu site e toque em Refazer com estas configurações se mudá-las.
- Compare Antes e Depois e toque em Baixar tudo (.zip).
- Copie o código de imagem de cada uma e cole na sua página.
Por que várias larguras?
Um celular não precisa da mesma foto de 2000 pixels que um monitor grande. Com o srcset, você lista várias larguras e o navegador escolhe a menor que ainda fica nítida naquela tela. O atributo sizes diz a ele qual será a largura da imagem exibida, para ele poder escolher antes de a página terminar de se organizar.
AVIF, WebP ou JPG?
O AVIF costuma ser o menor, o WebP vem logo atrás e funciona em todos os navegadores atuais, e o JPG é a reserva segura. O código de imagem os oferece nessa ordem, então cada navegador pega o melhor que entende. Imagens transparentes recebem uma reserva em PNG em vez de JPG para a transparência ser mantida. Se um formato estiver esmaecido, este navegador não consegue criá-lo; os outros formatos ainda funcionam.
O que é removido
Cada imagem é redesenhada e salva de novo, então dados da câmera, localização GPS, histórico de edição e perfis de cor embutidos ficam de fora. Fotos tiradas de lado são viradas para a posição correta antes. Qualidade em torno de 75 a 82 é um bom equilíbrio para fotos; gráficos com bordas nítidas podem ficar melhores um pouco mais alto.
Por que importa
- Imagens menores fazem as páginas carregarem mais rápido, principalmente em celulares.
- Páginas mais rápidas são mais fáceis de usar e tendem a ir melhor na busca.
- Remover dados de localização protege a privacidade das pessoas e dos lugares nas suas fotos.
- Imagens do tamanho certo economizam banda para você e para os seus visitantes.
Quem usa
Blogueiros, donos de lojas, fotógrafos e desenvolvedores que querem imagens nítidas e que carreguem rápido. Para uma única imagem em um tamanho de arquivo específico, use o compressor de imagens e, para mudar o tipo de arquivo, o conversor de imagens.
Perguntas
Qual qualidade devo escolher?
Cerca de 75 a 82 é um bom equilíbrio para fotos. Aumente um pouco para gráficos com bordas nítidas.
Preciso de AVIF se tenho WebP?
O AVIF costuma ser menor, e o código da imagem recorre a WebP e JPG para os navegadores que não conseguem exibi-lo.
Minhas imagens são enviadas?
Não. Elas são processadas no seu navegador.