Veja como otimizar e aproveitar ao máximo as imagens do seu site. Muitas vezes as imagens são usadas para complementar e ilustrar um artigo ou tutorial. Elas são muito úteis, adicionam valor ao conteúdo e muitas vezes podem facilitar a compreensão de um texto. É muito fácil fazer o upload de uma imagem e adicionar ao conteúdo do seu site. Mas é possível otimizar as imagens para deixa-las muito mais leves e proporcionar uma melhor experiência de navegação em seu site.
Nome do Arquivo
É importante informar no nome do arquivo de imagem o conteúdo da imagem, principalmente, se for referente a uma palavra-chave importante. É muito importante evitar nomes como “imagem001.png”, procure utilizar um nome que reflita o conteúdo da imagem, por exemplo, nome-do-produto.png. Lembre-se que os nomes das imagens são muito importantes para o SEO, portando, escolha-os com cuidado.
Se o conteúdo é referente a criação de sites, por exemplo, você pode inserir uma imagem ilustrativa com nome “criando-seu-site.jpeg”. Desta forma o Google e outros buscadores podem identificar a imagem e relacioná-lo ao conteúdo do seu site. As palavras-chaves importantes em nomes de imagens ajudam bastante a melhorar o ranqueamento do conteúdo nos sites de buscas.
Atributo Alt
O uso do atributo “alt” é muito importante, ele deve ser usado para descrever o conteúdo da imagem. Lembre-se que o valor deste atributo é exibido no lugar da imagem quando ela não puder ser carregada. Procure fornecer informações relevantes que ajudem os buscadores identificar a imagem. Leitores de telas também utilizam informações contidas neste atributo para descrever a imagem.
Não Redimensione com HTML ou CSS
O HTML e o CSS permitem redimensionar uma imagem, mas isso não é indicado, principalmente, quando se trata de reduções significativas. Dê preferência ao uso de editores de imagens para fazer o redimensionamento de imagens, pode ser até mesmo o Paint, do Windows. Ao “reduzir” uma imagem via HTML ou CSS a cada acesso é feito o download da versão original da imagem, que possuí uma dimensão maior e, consequentemente, é bem mais pesada. Ao usar editores para fazer a redução é possível especificar no HTML e CSS o tamanho exato da imagem, dessa maneira evita o download desnecessário de um arquivo bem maior.
CSS Sprites
Quando for utilizar imagens em seu código CSS procure unir sempre que possível as imagens em apenas um arquivo. Desta forma você diminuí o número de requests necessários para carregar o site e faz com que ele abra mais rapidamente. O CSS Sprites é uma técnica muito utilizada e simples de ser aplicada.
O CSS Sprites consiste em pegar várias imagens e colocar em apenas um arquivo de imagem. Através do atributo “background-position” você posiciona a imagem dentre as várias contidas no arquivo. Por exemplo, se o menu do site utilize uma imagem para cada status (hover, link e visited), é possível utilizar apenas um arquivo de imagem e através do “background-position” selecionar a imagem desejada.
Ferramentas para redução de imagens
Existem algumas ferramentas disponíveis na internet que permitem reduzir o tamanho de uma imagem em até 80%, com perda de qualidade imperceptível em alguns formatos. Antes de fazer o upload da imagem para seu site, use uma ferramenta para comprimir a imagem e assim reduzir seu tamanho. Existem várias ferramentas para esta finalidade, dentre as principais podemos citar:
TinyPng – Excelente para imagens PNG. Consegue excelentes resultados praticamente sem perda de qualidade.
JPEG Mini – Utilizado em imagens JPEG, mantém uma boa qualidade.
Compress JPEG – Compacta imagens JPEG. Em alguns casos pode ter uma perda de qualidade razoável
Todas essas ferramentas são excelentes para diminuir o tamanho das imagens. É preciso lembrar que as imagens são os elementos mais pesados em um site, com a utilização dessas ferramentas é possível obter uma melhora significativa no tempo de carregamento do site.
É possível melhorar a experiência de navegação do visitante do seu site e otimizar seu site para SEO com simples mudanças nas imagens do seu site. Ao criar o hábito de inserir imagens otimizadas em seu site você tem uma série de benefícios.
