Snappy

HostGator Blog

Blog oficial da HostGator

Como otimizar as imagens do seu site

Escrito por Eduarda Delavy

quinta-feira, 16 de junho de 2016

Share Button

 

Como otimizar as imagens do seu site - HostGator Brasil

 

A escolha das imagens é uma parte importante do processo de criação de um site. De início, pode parecer uma tarefa simples, e por isso algumas vezes deixamos de dar 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. Imagens costumam ser pesadas, e se não forem otimizadas podem impactar muto no tempo de carregamento de um site.

Para ajudar você com todo esse processo, preparamos alguns itens essenciais que você deve analisar ao otimizar as imagens do seu site. Confira.

SEO

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

Para garantir que suas imagens sejam encontradas pelos mecanismos de busca, preocupe-se em adicionar os atributos title e alt nas imagens. Além de ganho em SEO, você estará garantindo uma melhoria significativa na usabilidade do site.

Para saber mais sobre o assunto, confira o post 7 dicas de SEO – no qual falamos sobre como utilizar esses atributos com foco em SEO.

Formatos

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

  • GIF:
    O GIF suporta até 256 cores e salva as imagens em um formato pequeno – o que é prático para a internet. Admite transparência na imagem, mas apenas uma transparência total. Ele mantem a fidelidade da imagem, além de suportar pequenas animações.
  • PNG:
    O PNG também mantem 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 sutis, e se você precisar de elementos geométricos é também uma ótima escolha para o uso vetorial.
  • JPG (ou JPEG):
    O formato mais indicado para fotografias e mais popular na internet, mas em sua compressão sempre 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 em um banco de imagens, assim você já tem 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 você tem um espaço com dimensão de 600 pixels de largura em 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 seu site mais pesado. Por outro lado, se você 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, você irá precisar de ferramentas e selecionamos duas opções para você:

    • TinyPNG
      É uma ferramenta que reduz o tamanho do arquivo diminuindo seletivamente 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 você pode otimizar e redimensionar as imagens que estão no seu diretório.

CSS

Criar um elemento gráfico em seu site não precisa ser apenas com arquivos de imagens. Você 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.

 

Gostou das dicas? Agora é só começar a otimizar as imagens para melhorar o carregamento do seu site e receber muitos visitantes!

 


Eduarda Delavy

Sobre Eduarda Delavy

Estudante de Comunicação Social e Mídia Eletrônica. Atualmente cria conteúdos para o blog e redes sociais da HostGator Brasil.

Postado em:

Dicas, Marketing Digital, SEO
Comentários