Como otimizar suas imagens para web sem perder qualidade
Muitos fatores são responsáveis para um carregamento rápido de um site. Desses fatores, o peso das imagens tem uma parcela significativa.
Você já aprendeu como escolher boas imagens para seus projetos. Mas, como otimizá-las para que seu peso seja o menor possível, mantendo ainda uma boa qualidade?
Nesse post, vamos abordar 2 maneiras:
Opção 1: Salvar para Web no Photoshop
O conhecido atalho Alt+Shift+Ctrl+S (Salvar para Web) do Photoshop permite escolher várias opções de qualidade para suas imagens, sendo possível testar em tempo real se aquela configuração é adequada para seu projeto.
No exemplo abaixo, escolhi uma imagem ilustrativa para testar algumas opções:
Imagem Original (196kb)
O painel Salvar para Web é bem intuitivo e fácil de ser explorado. O ideal é ir alterando a o campo Qualidade até encontrar o equilíbrio entre peso e qualidade da imagem.
Note que à medida que o valor do campo Qualidade é alterado, um novo peso é calculado no canto inferior direito.
Alterando o valor do campo Qualidade para 60, um ajuste muito simples, já é possível ter uma significativa redução do peso da imagem. Veja abaixo como ficou a imagem otimizada:
Imagem Otimizada (99kb)
Comparando as duas imagens, a diferença de qualidade é praticamente imperceptível, porém há uma diferença de quase 100kb de uma para outra.
Se houvessem 10 imagens como essa em uma seção de um site, a otimização pouparia aproximadamente 1Mb de carregamento.
Multiplique isso por dezenas, centenas ou talvez milhares de visitantes diários na página e a quantidade de tráfego economizado entre o cliente e o servidor será extremamente significativa. Viu como a otimização de imagens é importante?
Opção 2: Tiny JPG/PNG
Existe dois serviços gratuitos muito bons para quem deseja otimizar uma imagem de forma ainda mais simples: o TinyJPG e o TinyPNG.
Para usar, é bem simples: basta carregar as imagens para o site (máximo de 20 imagens por vez) e deixar que ele faça tudo. Vamos testar na prática?
Selecionei uma imagem com muitos tons de cores para testarmos o poder de compressão do serviço:
Imagem Original (263kb)
Depois disso, acessei o site TinyJPG e fiz o Upload da imagem acima. Em poucos segundos a compressão é feita, possibilitando o download da imagem otimizada logo em seguida.
Veja como ficou:
Imagem Otimizada (140kb)
Uma redução de quase 50% no tamanho da imagem com praticamente nenhuma perda de qualidade. Legal né?
Utilizando qualquer uma das duas formas citadas você conseguirá uma significativa melhora no tempo de carregamento de suas páginas.
Lembre-se que sites que carregam mais rápido são favorecidos pelo Google e outros mecanismos de buscas. Otimizar imagens é um dos processos de SEO (Search Engine Optimization).
Ah, vale lembrar também que esse tipo de otimização é válido somente para web. Caso seu projeto seja gráfico, talvez o melhor seria trabalhar com a forma “bruta” (sem compressão) da imagem para garantir uma boa impressão.
Conhece mais dicas para deixar suas imagens ainda mais leves em seus projetos? Compartilhe com a gente nos comentários logo abaixo!
Post um comentário