Otimização de Imagens para a sua Landing Page

RESUMO DA NOTÍCIA:

• Introdução à  construção de uma Landing Page
• Otimização das imagens da Landing Page

Ops! Minha Landing Page possui muita rejeição… o que fazer?

Já pensou que as imagens podem não estar otimizadas para web ou mobile?

Algumas das grandes vilãs na construção de uma landing page são as imagens que comportam no html. Pois o site pode ter um html bem estruturado, respeitando as regras de inserção de tags e metadatas, um CSS e Javascript comprimido e reduzido, porém, ainda assim ser considerado pelo Google como um site lento, justamente porque o PageSpeed considera imagens otimizadas como 40% relevante.

Para otimização das imagens da Landing Page como proceder?

O mais importante é que o sistema a qual o site foi desenvolvido tenha recursos para isso, ou seja, ao subir uma imagem ele aplica automaticamente a qualidade para web mais o tamanho adequado para a posição onde será inserido, se o site foi desenvolvido na mão uma boa opção é a extensão em PHP. Imagine que atende estes requisitos, para o CMS existem inúmeros plug-ins que podem ser instalados e que facilitam este processo de otimização.

Caso o sistema não tenha esta opção, precisamos tratar e redimensionar a imagem antes de subir no site.

1 – Redimensione a imagem usando o photoshop ou outro software para um tamanho para web, geralmente as imagens estão com a resolução em 300 dpis, e o tamanho em 5000px x 5000px, para ajustar isso deixe com o tamanho conforme o tipo de posição terá no site, por exemplo se for banner principal o máximo seria 1900px X 560px (isso se a imagem compor toda a tela), caso seja imagens menores podem ser um tamanho mais quadrado 350px X 290px e a resolução para 70 dpi.

2 – O Photoshop possui a opção “Save for web”, como no nome já diz salva a imagem no formato para web, logo após selecione a opção “jpeg” depois em qualidade pode ficar entre 60 a 80, marque a opção progressivo.

3 – Com estas ações você perceberá que o peso da imagem diminuirá consideravelmente, porém ainda não é o suficiente, as imagens armazenam meta datas e também consomem espaço em disco, para resolver isso, recomendamos o uso do https://tinypng.com/ para ganhar alguns kbts no peso da imagem.

Fazendo estes ajustes em todas as imagens perceberá que a Landing Page ficará mais leve e a pontuação no PageSpeed irá subir consideravelmente.

Abaixo, veja imagens ilustrativas do uso da Extensão Imagine do peso e qualidade da imagem.

Imagem 1 Original – resolução 300 dpi; peso: 134 kb; tamanho 880px X 720px

Imagem 2 Otimizada – resolução 70 dpi; peso: 14 kb; tamanho 205px X 168px