Como deixar meu Site mais rápido? Diminua já o tamanho das imagens. - Bravulink Brasil

Como deixar meu Site mais rápido? Diminua já o tamanho das imagens.

Como deixar meu Site mais rápido? A resposta é diminuir o tamanho das imagens que você coloca dentro dele.

As imagens de um site representam 80% do volume de dados utilizados no seu carregamento.

Quanto menor o tamanho dos arquivos a serem baixados pelo navegador, menos o cliente disputará largura de banda e mais rápido será o download e a renderização do conteúdo na tela.

Entenda o que determina o “tamanho” de uma imagem:

Por exemplo: uma imagem que tem 100×100 pixels totaliza 10.000 pixels. Independente do formato ou tipo da imagem, quando carregada pelo navegador, cada pixel tem o “peso” de 4 bytes. Sendo assim, a imagem do exemplo tem o total de 40.000 bytes, ou 39 KB.

Além de ser um fato complicador para a velocidade de carregamento de um site, imagens muito grandes podem causar problemas com seu servidor, dependendo de qual é seu plano de hospedagem. Além de inviabilizarem a sua visualização em dispositivos de pouca memória disponível.

Sem contar que o Google posiciona melhor em seu mecanismo páginas que demoram menos de 3 segundos para carregar.

Confira algumas dicas que separamos pra você otimizar sua página:

  1. Os formatos em GIF e PNG não perdem qualidade de imagem quando compactadas. Para imagens estáticas, utilize o PNG, pois tem melhor taxa de compactação. Para imagens animadas, considere usar o elemento de vídeo ao invés de GIF, também pela melhor compactação.
  2. Mesmo tendo perdas, formatos JPEG podem ser compactados 10x mais que os outros formatos. Prefira o formato “Progressivo”, pela taxa de compactação e renderização serem maiores.
  3. Sempre converta seus GIFs para o formato PNG, a não ser que a imagem original seja bem pequena.
  4. Se a imagem for em preto e branco, utilize escalas de cinza.

Menos é muito mais!

Antes de gastar energia procurando elementos para criar uma imagem impactante, analise se ela é realmente necessária para a mensagem que você deseja transmitir. Em caso positivo:

  1. Elimine recursos e elementos desnecessário à imagem;
  2. Use efeitos CSS3 sempre que possível;
  3. Não converta texto em imagem, a web é generosa em fontes que você pode usar de graça;
  4. Utilize gradientes e sombras. Cause impacto, sem “pesar” demais a sua imagem.
  5. Se for usar formas geométricas, converta-as em vetores;
  6. Defina o formato e tamanho ideais, sem por nem tirar, para a sua imagem.

Saiba otimizar imagens vetoriais: utilize SVG

SVG, ou Scalable Vector Graphics, é um formato de imagem que utiliza XML para fornecer imagens através de codificação de dados.

O recurso é encontrado na maioria dos softwares gráficos. Com ele, é possível reduzir em mais da metade o peso de imagens vetorizadas

Diminua a paleta de cores de uma imagem

Uma forma rápida de diminuir tamanho de imagens é diminuir a paleta de cores utilizada. Já que muitas vezes a nossa percepção visual não vê “diferença” entre inúmeras nuances de cores, diminuir essa variação pode nem ser notada e contribuir em até 50% na redução de bytes por pixel.

 

Acompanhe sempre o Blog da Bravulink!

Toda semana uma dica sensacional especialmente pra você.

Até a próxima!

 

 

 



Comentários

comentário(s)

Tags: , , , , , , ,

Related posts

Porque usar um VPS?

Usar um VPS (Servidor Virtual Privado) é uma ótima maneira de aproveitar um pouco...

Porque usar um firewall?

Queremos destacar uma das ferramentas mais importantes e utilizadas para proteger um servidor na...

Como criar um site?

Impressionar os seus amigos, compartilhar idéias e alcançar pessoas em todo o mundo. Tudo...

O que é FFmpeg?

FFmpeg é uma ferramenta que implementa um descodificador e, em seguida, um codificador. Isto...

O que é código EPP?

O Extensible Provisioning Protocol (EPP) é um protocolo concebido para a atribuição de objetos...
Top