Como Otimizar Imagens para a Web Usando o Squoosh.app

Você provavelmente já sabe sobre otimização de imagens.

É destinado a comprimir fotos no seu site, para que as páginas não carreguem em uma velocidade glacial.

Até agora, você meio que ignorou a ideia toda. Justo — isso não faz uma grande diferença até que seu site esteja completamente formado.

Mas agora, chegou a hora de fazer alguma coisa. Seu arquirrival…bem, queremos dizer…seu concorrente mais próximo está superando totalmente seu site nas guerras de desempenho. É hora de reagir.

Squoosh é uma das melhores ferramentas à sua disposição. É grátis, de código aberto e fácil de usar.

Neste guia, vamos ver como usar o Squoosh para comprimir imagens e reduzir os tempos de carregamento. Vamos começar!

Como Otimizar Imagens Com Squoosh em 30 Segundos

Vamos direto ao assunto.

Você pode começar a otimizar imagens para o seu site muito rapidamente.

Vá até https://squoosh.app.

Clique na grande mancha rosa no topo da página e selecione a imagem que deseja comprimir.

Em seguida, você entrará em uma tela de pré-visualização, com um Painel de configurações no canto inferior direito.

Aqui, você pode escolher redimensionar sua imagem, reduzir a paleta de cores, alterar a qualidade e selecionar o tipo de arquivo de saída preferido.

Abaixo disso, um contador informa o quanto menor será seu novo arquivo.

Ao selecionar diferentes opções, você pode mover o controle deslizante no meio da sua tela para ver o efeito na qualidade da imagem. À esquerda está uma visão ampliada da sua imagem original; à direita é uma prévia da sua versão comprimida.

Parece bom? Baixe sua imagem comprimida tocando na bolha azul no canto inferior direito. Esta está pronta para adicionar ao seu site.

Pronto, concluído.

Dica Profissional: Queres acelerar as coisas para a próxima imagem? Toca no pequeno ícone de “engrenagem” no painel de controle. Isso salvará suas configurações atuais como um preset, que podes carregar posteriormente tocando no outro ícone de engrenagem.

Conhecendo Melhor o Squoosh

Essa é a versão resumida, mas há muito mais em Squoosh.

Esta ferramenta de compressão de imagens de código aberto foi realmente desenvolvida pelos especialistas do Google. Está disponível tanto como um aplicativo web quanto como um complemento para o navegador Chrome.

Se você está se sentindo técnico, também pode baixar o Squoosh do GitHub e executá-lo offline via linha de comando.

O Squoosh suporta PNG, JPG, TIFF, GIF e muitos outros formatos. Todas as versões são gratuitas para uso, e o aplicativo gerencia a compressão localmente. Isso é uma boa notícia para a privacidade, porque as imagens nunca saem do seu dispositivo.

Aprendendo A Usar O Squoosh Como Um Profissional

A outra grande vantagem do Squoosh é que ele oferece um monte de controle. Você só precisa saber como navegar no painel de controle.

Vamos fazer um tour rápido.

Quando você carrega pela primeira vez uma imagem no Squoosh, você verá apenas quatro opções no painel de controle:

Redimensionar

Se planejas usar uma imagem para uma miniatura, não precisas de resolução completa. Podes ativar esta opção para alterar o tamanho da imagem.

Insira a contagem de pixels desejada, mas mantenha as opções padrão selecionadas, a menos que tenha um bom motivo. Certifique-se de que “Manter Proporção” esteja selecionado para evitar distorções!

Reduzir Paleta

Muitas imagens na verdade não contêm tantas cores. Esta opção permite que você descarte matizes para reduzir o tamanho do arquivo.

Aquele controle deslizante de “Dithering”? Ele basicamente cria um padrão de ruído para disfarçar a paleta de cores reduzida.

Nota: Esta técnica é melhor utilizada em designs em vez de fotos, pois as fotos podem acabar parecendo cópias ruins.

Formato

Sob o rótulo “Comprimir”, você pode selecionar um formato de saída para sua imagem. As opções se dividem em duas categorias principais.

• Lossy (por exemplo, JPG, GIF): Estes formatos descartam pequenas partes da sua imagem para economizar espaço. Geralmente, você não notará a diferença, a menos que deseje algo com resolução realmente alta.
• Lossless (por exemplo, PNG, AVIF): Em contraste, os formatos lossless encontram maneiras de reduzir o tamanho do arquivo sem afetar a qualidade da sua imagem.

Como regra geral, o formato com perdas é adequado para gráficos simples, enquanto o formato sem perdas é melhor para ícones nítidos e fotos detalhadas.

Qualidade

Se você escolher um formato com perda, também verá este controle deslizante. Ele vai de 0 (achatando sua imagem completamente) até 100 (sem alterações).

Antes de salvar sua imagem, recomendaríamos mover este controle deslizante e observar o efeito na área de visualização. Para obter um arquivo pequeno e agradável, mova o controle deslizante o máximo possível para a esquerda sem criar artefatos feios.

Se estás a converter para WebP, também verás um deslizador de “Esforço”. Este controla o quão minuciosamente o Squoosh analisará a tua imagem antes de decidir como aplicar a compressão. Escolhe um número maior se tens detalhes que desejas manter.

Configurações Avançadas

Dependendo do formato de saída que você selecionar, poderá ter acesso a mais opções na aba “Configurações avançadas”.

A menos que você tenha um doutorado em edição de imagens, é melhor evitar essas configurações.

Dicas Rápidas Para Aproveitar Mais o Squoosh

No geral, o Squoosh é super fácil de usar. E honestamente, a seção acima contém tudo que você realmente precisa saber sobre o aplicativo.

Mas nós te vemos, leitor. Você quer se tornar um deus da compressão de imagens, não é?

Bem, aqui estão algumas dicas profissionais que vão ajudar-te a alcançar esse status imortal.

• Arraste e Solte: Não se preocupe com o menu de arquivos. Apenas arraste sua imagem diretamente para o Squoosh.
• Conheça Seus Formatos: Use WebP para navegadores modernos, MozJPEG para fotos e OptiPNG para gráficos. Lembre-se, AVIF é o novato na área; verifique quais navegadores podem lidar com ele.
• O Tamanho Importa: Comprima pela qualidade, não apenas pelo tamanho do arquivo. Se sua imagem passar de parecer uma obra-prima para um projeto de arte infantil, dê um passo atrás e ajuste essas configurações.
• O Esforço Conta: Aumente o controle deslizante de esforço para PNGs e WebP para extrair cada último bit do tamanho do arquivo sem impactar drasticamente a qualidade. 
• “Reduzir Paleta” é Seu Amigo: Quantas cores diferentes sua imagem contém? Se for bastante simples, você pode economizar muito espaço movendo o controle deslizante “Reduzir Paleta” para a esquerda.

Lembre-se, cada MB economizado significa menos tempo de espera para os seus usuários!

Como Gerenciar Imagens do Site para Melhor Desempenho

Embora o Squoosh possa reduzir o tamanho das suas imagens para um tamanho mais gerenciável, ele não é uma solução para tudo.

Siga estas orientações para garantir que suas imagens comprimidas proporcionem o aumento de desempenho que você espera!

• Use um CDN: Redes de entrega de conteúdo (CDNs) são otimizadas para mídia, e elas aliviam a pressão nos servidores do seu host.
• Pense cuidadosamente sobre os tipos de arquivo: É fácil tornar todas as imagens iguais. Mas a escolha do arquivo deve corresponder às necessidades de cada imagem no seu site.
• Remova metadados desnecessários: Será que sua imagem precisa carregar informações de localização e câmera? Provavelmente não.
• Tente usar sprites: Em vez de usar uma imagem grande com um padrão que se repete, você pode ser capaz de usar um pequeno sprite várias vezes. Isso poderia realmente acelerar as coisas!

Se você está curioso sobre todas as maneiras de implementar a otimização de imagens, nosso blog está absolutamente repleto de tutoriais úteis. Aqui estão alguns dos destaques:

• Adeus, JPG: Como Otimizar Imagens para a Web Moderna (WebP, SVG e Mais)
• Como Corrigir 16 Problemas Comuns de Imagens no WordPress
• Problemas Comuns de Upload de Imagens no WordPress e Como Corrigi-los (5 Métodos)

Alternativas ao Squoosh: As Melhores Ferramentas de Compressão de Imagem

Squoosh é um ótimo ponto de partida para comprimir e otimizar imagens para seu site. No entanto, existem outras opções disponíveis:

• TinyPNG: Este aplicativo web comprime imagens instantaneamente enquanto mantém uma qualidade impressionante. É gratuito para uploads em lote de 20 imagens ou menos; você pode desbloquear mais por $39 por mês.
• ShortPixel: Se você possui um site WordPress, este plugin permite que você comprima imagens diretamente da sua área de administração. É gratuito para até 100 imagens por mês.
• ImageOptim: Para os proprietários de Mac. Este aplicativo de código aberto permite que você comprima lotes de imagens em seu computador. E é totalmente gratuito!
• Kraken.io: Esta poderosa ferramenta de compressão de imagens funciona de forma semelhante ao Squoosh, embora sem o agradável display de pré-visualização. Ah, e é apenas gratuito para arquivos de até 1MB.
• JPEGmini: Trabalha com muitas fotos de alta qualidade? Com um rápido arrastar e soltar, este aplicativo para desktop permite que você reduza o tamanho do arquivo de JPGs em até 80%.

Faça Seu Site Funcionar Mais Suavemente Hoje

Otimizar imagens é uma tarefa árdua. Mas vale a pena quando suas páginas carregam na velocidade da luz. Além disso, não é um grande esforço quando você tem uma ferramenta como o Squoosh.

Claro, as imagens não são a única causa de lentidão no carregamento da página. Seu plano de hospedagem pode ser o culpado.

Queres algo que ofereça um desempenho mais confiável? Na DreamHost, todos os nossos planos vêm com garantia de uptime de 100% e largura de banda ilimitada. Isso significa que seu site nunca vai oscilar sob pressão.

Quer experimentar? Inscreva-se hoje para sentir a diferença!