A otimização de imagens costuma ser a primeira etapa na jornada de velocidade de página e desempenho da web de uma pessoa. É uma solução relativamente fácil com recompensas potencialmente altas. A otimização de uma única imagem não é complicada ou demorada e pode significar ganhos de velocidade do site, melhor UX e Vitais vitais da Web visivelmente aprimorados .
Não é de admirar que existam inúmeros artigos criados para ajudar as pessoas a otimizar suas imagens com mais eficiência.
Muitas ferramentas podem ajudá-lo a otimizar imagens (algumas das melhores estão descritas abaixo). No entanto, como a otimização de imagens geralmente é ensinada a iniciantes, as explicações de como fazer isso geralmente ignoram muitos detalhes cruciais necessários para obter os melhores resultados. Você precisará saber mais para garantir que suas imagens sejam o mais otimizadas possível. Este guia fornecerá aos alunos de todos os níveis de habilidade conselhos sobre otimização de imagem construídos a partir de anos de trabalho no campo de desempenho da web. Dessa forma, você pode entender o que é uma imagem adequadamente otimizada, por que ela é importante e como extrair todo o desempenho das imagens em seu site.
O que é otimização de imagem?
A otimização de imagem é a configuração de imagens em seu site para fornecer aos visitantes a melhor experiência possível. Uma imagem bem otimizada deve:
- Seja um auxílio visual de alta qualidade que tenha um propósito funcional em seu conteúdo.
- Tenha um tipo e tamanho de arquivo apropriados que equilibrem o desempenho com a qualidade da imagem.
- Ajuste-se perfeitamente a uma página sem redimensionar ou alterar o layout, independentemente da tela em que está sendo visualizado.
- Ser carregado, para não atrasar a renderização de outros recursos críticos em sua página.
Esses quatro critérios para uma imagem bem otimizada são ordenados do mais complicado ao menos complicado. Se tudo o que você pode fazer são os dois primeiros, isso não é um problema. Mesmo remover ou alterar imagens que não agregam valor é suficiente para acelerar suas melhores páginas.
Por que a otimização de imagens é importante?
As imagens são cruciais para estabelecer uma marca e retratar ideias, pessoas e produtos. No entanto, as imagens permanecem entre os contribuintes mais significativos para o mau desempenho e a experiência do usuário. Em maio de 2022, o peso médio de uma página de desktop era de 2,3 MB. Desses 2,3 MB, cerca de 1 MB (ou 43%) do carregamento da página foram imagens.
Como as imagens compõem grande parte do processo de carregamento da página, qualquer otimização que você fizer para reduzi-las ou entregá-las com mais eficiência equivale a ganhos significativos de velocidade. É essencial manter suas páginas rápidas porque o tempo de carregamento da página afeta diretamente as taxas de conversão. Um estudo recente descobriu que as taxas de conversão aumentam em 17% para cada segundo que você reduz o tempo de carregamento da página.
Apesar de ser uma fonte de velocidades de página mais baixas, as imagens ainda são recursos necessários na maioria das páginas. Às vezes não é prático ou eficiente descrever algo apenas com palavras. As imagens fornecem aos seus leitores uma ajuda visual que os ajuda a entender os assuntos ou processos complexos sobre os quais você está falando. Por esse motivo, é necessário garantir que cada imagem que você cria seja otimizada para que sua página equilibre a necessidade de imagens poderosas e a velocidade do site extremamente rápida.
Quais ferramentas ajudam na otimização de imagens?
Existem muitas ferramentas por aí que pretendem ajudá-lo a manter suas imagens otimizadas facilmente. É útil saber o que essas ferramentas fazem e o que você precisa considerar ao avaliar quais delas escolher.
Compressores de imagem
Os compressores de imagem pegam arquivos de imagem e reduzem seu tamanho, mantendo a qualidade da imagem alta.
Existem dois tipos de compressores de imagem: sem perdas e com perdas. Os compressores sem perdas reduzem o tamanho da imagem sem afetar a qualidade da imagem. Eles removem metadados dentro do arquivo de imagem, deixando os dados reais da imagem sozinhos. Por outro lado, a compactação com perdas permite reduzir ainda mais os arquivos de imagem, prejudicando a qualidade da imagem.
A compactação de imagem é algo que todo site deve fazer, pois é uma maneira fácil de reduzir o tamanho dos arquivos de imagem. Para escolher o certo para você, você precisará decidir se deseja um compressor que exija que você faça imagens uma de cada vez ou que se integre automaticamente aos seus sistemas.
Um compressor básico de arrastar e soltar será a escolha certa se você estiver executando um site menor. Alguns compressores de imagem básicos incluem:
- ImageOptim : Compressor de arrastar e soltar nativo do MacOS
- Trimage : Compressor de arrastar e soltar nativo do Linux
- FileOptimizer : Compressor nativo do Windows
- Squoosh : Um compressor de arrastar e soltar baseado em navegador
Para pessoas que procuram compactar um grande número de imagens, você vai querer um compressor que faça o trabalho automaticamente. Se você for um usuário do GitHub, criamos uma ação de imagem que compactará automaticamente as imagens em todas as suas solicitações pull. É simples de habilitar e resolverá muitas dores de cabeça relacionadas à construção de um sistema automatizado.
Redes de entrega de conteúdo (CDNs)
CDNs são redes de servidores distribuídos geograficamente que facilitam a entrega de suas imagens porque garantem que um servidor esteja próximo ao local do visitante. Quanto mais próximos seus recursos estiverem das pessoas que os solicitam, mais rápido será o download.
Além de uma entrega de imagem mais rápida, os CDNs também ajudam você a:
- Eliminando parte do estresse da largura de banda de seus servidores.
- Tornando seu site mais capaz de lidar com um grande número de visitantes.
- Reduzindo os tamanhos de arquivo de imagem incluindo compactação e minificação de imagem antes da entrega.
- Armazenando seu conteúdo em cache para uma entrega mais rápida.
Para uma melhor otimização de imagem, você também deve procurar uma CDN de imagem especializada, que pode funcionar em conjunto com um serviço CDN mais geral.
Os CDNs de imagem melhoram a velocidade de entrega de imagens ao:
- Redimensionando suas imagens automaticamente.
- Convertendo imagens para o melhor formato de imagem em tempo real.
- Cortar imagens maiores foca automaticamente no ponto central da sua imagem.
O melhor de tudo, eles não exigem nenhum trabalho de você. Tudo o que você precisa fazer é escolher o CDN certo para o seu negócio.
Ao escolher um CDN de imagem, você deve considerar:
- Preço : existem CDNs de imagens gratuitas, mas podem oferecer pouco controle, confiabilidade ou suporte.
- Recursos : Alguns CDNs de imagem permitem mais personalização ou tipos de arquivo de imagem suportados. Certifique-se de escolher um que faça tudo o que você precisa.
- Integrações : Muitos CDNs de imagem podem ser integrados ao seu CMS para uma experiência de otimização de imagem perfeita.
- Velocidade : certifique-se de que este CDN de imagem entregue suas imagens rapidamente para uma melhor experiência do usuário em seu site.
- Serviço : verifique as avaliações on-line para ver como as pessoas são tratadas pelo atendimento ao cliente.
Como muitos desses fatores se resumem à sua situação, é quase impossível dizer o que funcionará melhor para você. No entanto, se você considerar cada CDN pelas lentes dos fatores acima, poderá encontrar um que atenda às suas necessidades específicas.
Como otimizar totalmente suas imagens
As ferramentas são apenas uma parte do caminho quando se trata de otimização de imagem. Essas etapas ajudarão você a garantir que suas imagens sejam o mais otimizadas possível.
1. Certifique-se de que as imagens sejam funcionais para todos
Primeiro, você precisa garantir que todas as suas imagens tenham um propósito funcional em sua página. Isso não significa que todas as suas imagens devem ser gráficos ou tabelas. No entanto, eles devem ajudar seus leitores complementando o que está no texto.
Por exemplo, uma foto da vista do seu hotel pode ajudar os visitantes em potencial a entender o que estão recebendo se reservarem um quarto. No entanto, se a mesma página tiver apenas uma foto de Paris, isso é simplesmente uma fachada e não ajuda os visitantes.
Remova ou substitua todas as imagens que não atendem ao limite de veiculação de uma função na página. A remoção dessas imagens aumenta automaticamente a velocidade da página e, se elas não servirem a nenhum propósito funcional, seus leitores não sentirão falta delas.
Depois de decidir quais imagens permanecerão, forneça um texto alternativo descritivo para cada imagem. O texto alternativo ajuda as pessoas com deficiência visual a entender o que está em uma imagem. Desta forma, todos os seus visitantes obtêm o benefício de seus recursos visuais.
2. Escolha o formato certo
Escolher o formato de imagem adequado é uma grande parte do tamanho do arquivo que a imagem terá. Os formatos de imagem afetam significativamente o tamanho do arquivo, a qualidade, a escalabilidade e as opções de compactação.
Existem muitas complexidades técnicas na compactação de imagens e no controle de qualidade, mas você pode navegar efetivamente pelo processo de seleção sem se aprofundar muito. Aqui estão os formatos mais populares com seus casos de uso:
| Formatar | Melhor para | Transparência | Animação |
|---|---|---|---|
| JPEG | Fotos e capturas de tela | Não | Não |
| PNG | Imagens com menos cores (256 cores para PNG-8) ou transparência parcial (PNG-24) | Sim | Não |
| WebM ou MPEG-4 | Animação e movimento | Sim | Sim |
| SVG | Formas geométricas simples ou ilustração vetorial | Sim | Sim |
| AVIF | Formato de imagem de última geração que pode substituir WebP, JPEG, GIF e PNG | Sim | Sim |
Embora os GIFs tenham sido popularizados para fins de animação, uma maneira mais eficaz de explorar o movimento é animar SVGs ou gravar um vídeo em WebM ou MPEG-4. GIFs são incrivelmente pesados (último exemplo na natureza; 30 MB para uma única imagem!), enquanto um vídeo pode ser acelerado por hardware, resultando em reprodução mais suave e melhores cores e compactação.
Dois novos formatos de imagem, WebP e JPEG XR, podem introduzir economias significativas de largura de banda (25-34% no caso do WebP). No entanto, esses formatos de imagem de última geração ainda não são suportados em todos os navegadores, então é melhor usá-los com fallbacks (ou com a ajuda de CDNs de imagem).
3. Substitua as fontes dos ícones por SVGs
Os ícones são amplamente utilizados, ainda mais no design de produtos. Várias estruturas e bibliotecas de ícones de código aberto estão disponíveis gratuitamente, o que populariza ainda mais o uso de ícones.
Existem várias maneiras de implementar ícones — duas das mais populares são fontes de ícones (onde usamos um arquivo de fonte que contém ícones como glifos) e SVGs (gráficos vetoriais escaláveis). As fontes de ícones são amplamente difundidas, principalmente devido à facilidade de implementação e uso. No entanto, eles causam problemas de velocidade e acessibilidade.
Fontes de ícones são contadas como fontes; portanto, os visitantes recebem nada ou um glifo de caractere ausente enigmático quando a fonte do ícone falha ao carregar. Eles também causam problemas significativos para tecnologias assistivas (imagine leitores de tela pronunciando um absurdo completo para tentar retratar o ícone sem descritores e tags HTML apropriados).
Do ponto de vista da velocidade, a diferença entre as fontes dos ícones e os arquivos SVG geralmente pode ser pequena e extremamente dependente do contexto (número de ícones e como eles são implementados no código). No entanto, pesando acessibilidade e escalabilidade e sendo propenso a falhas, os SVGs têm uma vantagem significativa.
Ao criar iconografia, considere seu contexto – quantos ícones haverá e se seus estilos e tamanhos são adaptáveis. Se implementada corretamente, a iconografia SVG é rápida, confiável e, mais importante, semântica e acessível.
4. Compacte seus arquivos
Dependendo do contexto e da familiaridade com as ferramentas do desenvolvedor, há muitas maneiras de lidar com a otimização de imagens. Mesmo que a codificação não seja sua praia, você ainda pode garantir que suas imagens sejam compactadas.
Se você estiver trabalhando em projetos menores, execute cada imagem por meio de uma ferramenta de otimização de arrastar e soltar (como algumas das descritas acima). Como o processo de otimização é manual, isso funciona melhor para projetos menores que não são atualizados com frequência.
Para organizações maiores com vários projetos ou aplicativos que dependem fortemente de imagens (Airbnb, por exemplo), é necessário implementar scripts de automação potencialmente complexos ou considerar CDNs de imagens. Essas soluções têm implicações no escopo do desenvolvimento e geralmente têm um preço alto, mas vale a pena discutir com sua equipe se as imagens contribuírem significativamente para um desempenho ruim.
5. Projete para capacidade de resposta de imagem ou use um CDN
Na era do web design responsivo, as imagens devem atender a vários dispositivos e tamanhos de tela. O envio de imagens muito grandes é um problema generalizado (principalmente quando se trata principalmente de telas Retina da Apple versus dispositivos de resolução mais baixa). Quando você exibe imagens maiores do que o necessário, isso aumenta o tempo de análise do navegador e faz com que os gráficos dimensionados pareçam borrados.
Existem várias decisões que você pode tomar para lidar com esse problema. A primeira é determinar como as imagens vão se comportar quando a viewport mudar:
- A proporção é constante ou variável?
- As imagens serão cortadas?
Outra consideração é a densidade de pixels nas telas dos dispositivos. Com densidade variando de 100% a 300%, é relativamente fácil de manusear incorretamente. As mesmas imagens podem parecer muito menores em telas de alta densidade e maiores em telas de baixa densidade. Para controlar a mídia e garantir sua mais alta qualidade, você precisa fornecer dimensões e densidade de pixels apropriadas.
Uma solução comum para lidar com imagens responsivas que você pode explorar com sua equipe são os CDNs de imagem. Os CDNs de imagem facilitam a criação de imagens responsivas, ao mesmo tempo em que introduzem ganhos significativos de velocidade.
6. Adicione espaços reservados e telas de esqueleto
A velocidade do site é essencial, mas também a velocidade percebida do site. Até mesmo dar a seus leitores uma dica de que o conteúdo está realmente carregando pode melhorar a experiência do usuário.
Uma maneira de melhorar essa percepção de velocidade é aproveitar as telas de esqueleto. Cunhado por Luke Wroblewski, as telas de esqueleto indicam que o conteúdo está carregando e eventualmente aparecerá. Eles são implementados apresentando um wireframe aproximado de layout e elementos em uma página, geralmente com uma animação sutil e relativamente rápida.
Trabalhe com sua equipe de desenvolvimento para identificar quais partes do aplicativo são excepcionalmente lentas, seja por causa do excesso de imagens ou da riqueza de dados. Em seguida, crie simplificações de interface apropriadas que ocultarão, atrasarão ou renderizarão parcialmente as interfaces para criar uma impressão de velocidade. Essa estratégia vai além das imagens e pode ser aproveitada para telas inteiras, especialmente propensas a carregamento lento, mas deve ser usada com cuidado.
A velocidade do site é mais importante do que a otimização da imagem
A otimização de imagem é uma ótima maneira de se familiarizar com o mundo da velocidade do site. No entanto, há muito mais que você deve fazer com seu site se estiver disposto a aprender um pouco e começar a experimentar.