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:
- 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.
- 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.
- Sempre converta seus GIFs para o formato PNG, a não ser que a imagem original seja bem pequena.
- 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:
- Elimine recursos e elementos desnecessário à imagem;
- Use efeitos CSS3 sempre que possível;
- Não converta texto em imagem, a web é generosa em fontes que você pode usar de graça;
- Utilize gradientes e sombras. Cause impacto, sem “pesar” demais a sua imagem.
- Se for usar formas geométricas, converta-as em vetores;
- 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!
