A escolha das imagens é uma parte importante do processo de criação de um site. No início, pode parecer uma tarefa simples, e por isso não damos a atenção necessária.

Imagens, assim como textos e outros elementos de um site, também precisam de otimização.E não se trata apenas de uma preocupação estética. As imagens costumam ser pesadas, e se não forem otimizadas podem ter um grande impacto no tempo de carregamento de um site.

Para ajudar neste processo, preparamos alguns itens essenciais que deve analisar ao otimizar as imagens do seu site.

SEO

Um site leve melhora o posicionamento no Google, pois a velocidade de carregamento do site é também um dos critério avaliados. Sites rápidos geram uma maior satisfação entre os visitantes e, consequentemente, aumentam as conversões.

Para garantir que as suas imagens sejam encontradas pelos motores de pesquisas, preocupe-se em adicionar os atributos title e alt nas imagens. Além de ganho em SEO,  está a garantir uma melhoria significativa na usabilidade do site.

Formatos

Há diversos formatos de arquivos para imagens digitais. Os mais usados na web são PNG, JPEG e GIF, mas cada um comporta-se de uma maneira diferente. Escolher o formato mais adequado é o início para otimizar as imagens.

• GIF:

  O GIF suporta até 256 cores e salva as imagens num formato pequeno – o que é prático para a internet. Mantém a fidelidade da imagem, além de suportar pequenas animações.

• PNG:

  O PNG também mantém a fidelidade da imagem e suporta transparência, mas com canal alpha – o que torna possível definir o nível de opacidade de cada pixel. O PNG padrão nas ferramentas gráficas é o 24 bits, que suporta 16 milhões de cores, mas existe também o de 8 bits, que possui 256 cores como no GIF. De modo geral o PNG é superior ao GIF pois preserva detalhes, e se precisar de elementos geométricos é também uma óptima escolha para o uso vectorial.

• JPG (ou JPEG):

  O formato mais indicado para fotografias e mais popular na internet, mas a compressão causa perda de qualidade. Não suporta transparência mas aceita 16 milhões de cores.

Simplificando: use JPEG para fotos, PNG para vetores e GIF para animações

Dimensões

Pense no seu site e visualize onde cada imagem será inserida, escolhendo quanto espaço cada uma irá ocupar. Dessa forma a otimização pode ser feita durante a produção ou escolha num banco de imagens, assim já terá em mente as dimensões necessárias e procura um arquivo adequado para utilizar o tamanho real da imagem.

Conhecer o espaço que cada imagem irá ocupar já define a preparação de cada uma delas. Por exemplo: se tem um espaço com dimensão de 600 pixels de largura no seu layout, não será preciso uma imagem com tamanho superior a esse, basta obter uma imagem com a dimensão correta.

Mas lembre-se: usar imagens com alta definição e dimensões maiores que o necessário torna o tempo de carregamento muito elevado e deixa o seu site mais pesado. Por outro lado, se usar imagens com baixa definição e dimensões inferiores o arquivo pode ficar embaçado e esticado.

Compressão

Outro passo no processo de otimização de imagens para deixar o seu site mais leve é a compressão.
Isso ajuda a diminuir o tempo de carregamento da página, pois em cada arquivo de imagem há metadados e informações duplicadas – o que torna o arquivo pesado.

Então, de forma simplificada, comprimir ou compactar é retirar essas informações redundantes e diminuir o peso do arquivo. Na compactação, a informação do pixel é guardada e repetida nos outros semelhantes a ele. Para realizar esse procedimento, irá precisar de ferramentas e seleccionamos duas opções que o podem ajudar:

• TinyPNG

  É uma ferramenta que reduz o tamanho do arquivo diminuindo o número de cores. Apesar do nome, o TinyPNG aceita outros formatos de arquivos e permite o upload de até 20 arquivos simultâneos com 5 MB cada.

• Smush.it

  O Smush.it é uma ferramenta online e também um pluggin para o WordPress. Com ele pode otimizar e redimensionar as imagens que estão no seu diretório.

CSS

Criar um elemento gráfico no seu site não precisa de ser apenas com arquivos de imagens. Pode fazer, por exemplo, alguns botões personalizados com a folha de estilos CSS. Com isso a manutenção e personalização dos itens fica mais fácil e prática, além de ser muito mais leve que uma imagem.