Como detectar o suporte ao WebP nos navegadores de internet
Nem todos os navegadores de suportam o formato de imagem WeP. Saiba como validar o suporte ao WebP nos browsers dos seus usuários.
A otimização de imagens é fator chave para a garantia de performance em sites WordPress.
O processo pode ser dividido em duas etapas: atuação na base legada e as novas imagens a partir de agora.
A estrutura do site pode conter imagens não otimizadas. Sejam imagens estruturais do layout ou de conteúdo.
É preciso definir um processo manual antes de enviar novas imagens, ou fazer uso de tecnologia para garantir a otimização.
Otimização de imagens: SEO x Performance
Quando falamos em otimizar imagens, precisamos separar dois universos: SEO e Performance.
No quesito em melhorar a indexação das imagens nos mecanismos de busca, consideramos nomes de arquivos, atributos ALT, Title e Longdesc, por exemplo.
Quando o assunto é performance (o foco deste artigo), as considerações são direcionadas para: tamanho de arquivos, resoluções, tipos de imagens, dimensões e outras variáveis.
Os pilares da performance em WordPress
Eu costumo dividir a estrutura de um projeto em WordPress, no sentido de performance, em três pilares.
- Servidor / Infraestrutura;
- Tecnologia / Desenvolvimento;
- Conteúdo / Integração.
Esse é impactado diretamente por imagens não otimizadas.
Para garantir uma otimização contínua e eficaz é necessário o envolvimento de todos os times do projeto. Marketing, Conteúdo, Operações, Desenvolvimento, onde cada um contribui em sua área para o sucesso da performance.
No entanto, otimizar imagens é sempre desafiante. A tarefa não é tão simples quanto parece.
Os desafios da otimização de imagens
Arquivos de imagens realmente são necessários?
Fontes de ícones, em alguns casos, podem entregar o mesmo resultado visual. E podemos evitar um arquivo e melhorar a performance.
Uma quantidade excessiva também pode ser prejudicial. Além da quantidade, devemos nos atentar com os formatos, dimensões e a compreensão utilizada.
Há inúmeras possibilidades de comprimir imagens. Alguns sem perda de qualidade, mas outros que prejudicam. Precisamos encontrar o melhor caminho.
Com um cenário mobile fragmentado e com expressivos números no Brasil, é de suma importância considerar a aplicação de imagens responsivas.
Evite imagens, sempre que possível
Sabemos que uma imagem fala mais do que mil palavras.
Mas ela é realmente necessária? Não conseguimos passar a mesma mensagem com outra tecnologia ao contrário de um arquivo de imagem?
Precisamos ter equilíbrio. Passar a imagem desejada, vender, mas garantir um bom desempenho.
Através dos seguintes recursos, em alguns casos, conseguimos resultados expressivos e sem o uso de milhares de bytes.
CSS
Com as folhas de estilo podemos aplicar sombras, degradês, bordas, cores. Esses elementos podem eliminar algumas imagens?
Se sim, considere usar as CSS ao contrário de arquivos e garanta uma maior otimização.
Fontes web
A Awesome font é uma verdadeira “image killer”.
Através dessa família de fonte conseguimos consideráveis representações visuais. Além disso, os textos são possíveis de serem selecionados e redimensionados.
Ou seja, além de mais performático, temos o projeto ainda mais acessível.
Otimize pela quantidade
Com o menor uso de imagens, o consumo de tráfego de dados será menor.
Segundo o HTTP Archive 60% da transferência de dados para a renderização de uma página web são imagens JPEGs, GIFs e PNGs.
E o mais importante: a taxa de conversão é maior ao fazer uso de menos imagens, principalmente no mobile. É o que afirma os pesquisadores do Google Daniel An e Pat Meenan.
Tamanho da imagens
Podemos pensar no tamanho das imagens em dois sentidos. Em sua dimensão e o tamanho do arquivo gerado.
Nos dois casos precisamos considerar uma otimização.
Se o seu espaço para alocar a imagem é de no máximo 1.500 pixels, por que enviar uma imagem de 3.000?
Se precisa de imagens maiores para visualização de detalhes, por que não ter duas? Uma miniatura e outra maior complementar?
O WordPress, por padrão, em suas configurações de mídia lhe permite definir diferentes tamanhos para imagens.
Temos tecnologias que reduzem o tamanho do arquivo sem a perda de qualidade.
Imagens responsivas
Com a era mobile temos uma diversidade enorme de tamanho de telas.
E um único aparelho possui dois tamanhos, um em seu modo retrato e outra em paisagem.
Para cada tamanho de tela, ou modo de exibição, podemos considerar tamanhos específicos de imagens.
Com essa abordagem o tamanho mais adequado a situação será utilizada. Ganhamos em performance, tempo de carregamento e melhoramos a experiência do usuário.
O WordPress e vários plugins que se relacionam com imagens utilizam essa abordagem.
Tecnologia para otimizar imagens
Talvez o recurso mais conhecido para otimizar imagens seja o “Salvar para a web” de software gráficos, como o Photoshop.
Mais saiba, que a escolha correta do formato da imagem e o tipo de arquivo também é uma grande ajuda em otimização de imagens.
E várias outras ferramentas fazem um melhor trabalho em reduzir o tamanho do arquivo, sem comprometer a qualidade.
No grande ecossistema de plugins do WordPress há boas opções para compactar imagens.
Conclusão
Otimizar imagens é relevante. É necessário e todos saem ganhando.
Ganha o usuário com uma melhor experiência.
Ganha o gestor do site por conseguir gerar mais negócios e ter mais oportunidades com o seu projeto web.
Sabe-se que o Google prioriza sites com melhores carregamentos.
Também sabemos que o Facebook está penalizando sites lentos.
Portanto, você precisa considerar a otimização das imagens o quanto antes. Faça isso revisando a necessidade de uso, a quantidade, os formatos e a responsividade.
