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

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!

Andrey é o CEO da Bravulink e dedica o seu tempo em desenvolvimento de projetos mas, faz questão de estar presente também no atendimento aos clientes bem como em participar de praticamente todas as atividades da empresa.



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...