Como otimizar suas imagens para web

Você já tem um site ou um blog pessoal, seguro de que seu site tem uma grande quantidade de imagens para manter a atenção de seus usuários. E se, além disso, acompanha as tendências atuais, cada vez que suas imagens serão maiores. Mas, se vivemos na era da banda larga, por que tem que se preocupar, então o tamanho de suas imagens? por três simples razões:

  • A navegação por dispositivo móvel. A navegação móvel representa um 55,6% da navegação total, e este número não para de aumentar.
  • Não perder usuários. Um site lenta e pesada é sinônimo de uma taxa de rejeição muito alta, e, claro, você não quer isso. Não faça esperar para os seus usuários, otimiza o peso da sua página web.
  • SEO. O Google tem um tempo limitado para rastrear o seu site, por isso que quanto menos pesar, mais páginas você poderá rastrear e você terá mais chances de posicionar melhor, já que agora sabemos que o Google dá muita importância a velocidade de carregamento entre seus fatores de posicionamento.

Por onde começar? Analisa quais imagens você tem que otimizar

Antes de começar a otimizar suas imagens, o melhor é que você faça um teste de velocidade e verifique qual o impacto das imagens no seu site. Talvez pense que você deve otimizar e pode ser que você tenha outras prioridades antes.

As melhores apps para analisá-lo, são:

Essas ferramentas te recomendar diferentes etapas a seguir para não só otimizar as imagens, mas para otimizar a velocidade de carga em geral do seu site.

www.seopapese.club www.seopapese.club jpg png

Você já Convencido da importância de otimizar suas imagens para web? Vamos ver como fazer:

O primeiro é saber escolher o formato de imagem adequado às suas necessidades. Certeza que alguma vez você já se perguntou qual é a diferença entre um jpg, um png ou gif. Não se aburriremos com termos técnicos, apenas diremos quando é melhor usar um formato ou outro:

Um formato obsoleto, praticamente só é usado para imagens animadas.

O substituto de Gif, porque também permite transparência. É ideal para imagens planas ou com grandes espaços brancos, como capturas de tela, logotipos, etc., o PNG é um formato de imagem sem perdas, por isso, mesmo que não reduz tanto o tamanho como o JPG, a qualidade sempre será maior.

Ideal para fotografias com detalhes e muitas cores. É um formato de compressão com perdas, ou seja, que perde qualidade para reduzir o tamanho, e com isso perde nitidez, que podem aparecer aberrações cromáticas em determinadas áreas.

Além destes, é cada vez mais comum utilizar formatos vetoriais (.EPS ou .SVG) para logotipos e ícones, já que são totalmente escaláveis em todas as resoluções. Em NoJpeg nos dão muitos motivos para decantarnos por esta opção.

Como otimizar imagens

Se você está em Photoshop, lembra-te que deves guardar suas imagens através da opção “arquivo > Salvar para web…“, mas, o que fazer depois?

photoshop

Em primeiro lugar selecione cima e para a direita para o formato que você quiser exportar (gif, png ou jpg). Se você utilize as abas superiores poderá ver até quatro cópias para comparar diferentes formatos ou compressões e ver a sua relação qualidade/peso.

Se picture em JPG, tenha em conta:

  • A barra de qualidade, de 0 a 100, sendo 0 a compressão máxima e 100 compressão nula, ou seja de alta qualidade.
  • A opção “progressivo”. Se a pressiona, o jpg guardará diferentes camadas de diferentes densidades de forma que a hora de ser carregado no servidor a imagem se vera em baixa qualidade, e irá melhorar a sua definição, à medida que você vá carregando. Se não, a imagem aparecerá diretamente em alta, a trompicones.

Se picture em PNG, tenha em conta:

  • O PNG-8 ou PNG-24? A principal diferença é que o PNG-8 comprime um máximo de 256 cores, como um GIF, enquanto que o PNG-24 atinge 16 milhões de cores. Normalmente você vai usar este último.
  • Transparência. Bastante óbvio, mas se você ativá-o fundo da imagem será transparente (sempre que não exista uma camada sólida no fundo do Photoshop).
  • A opção “entrelaçamento” é muito semelhante ao “progressivo” em JPG, há referência ao tipo de carga. Depende de nossas preferências e as capacidades do navegador onde irá carregar a imagem.

carga-normalprogressivo

Há muitas mais opções no painel de “Salvar para web” em Photoshop, mas não queremos ser muito técnicos, bem que só mostramos as opções mais comuns. Em 90% dos casos não precisa de mais.

Além do Photoshop, existem outros programas que te ajudarão a reduzir o peso de suas imagens, compressão e eliminando metadados e outras opções. Eu recomendo dois: Image Optim (MAC) e o RIOT (PC).

Compressão e otimização automática em WordPress

Se você usa o WordPress e quiser compactar e otimizar automaticamente suas imagens, sem ter que passar pelo Photoshop ou outros programas, recomendamos Smush, um plugin que fará todo o trabalho sujo por você.

Conclusão

Já conhece os detalhes de cada formato e as diferentes opções, então você não tem desculpa para continuar exportando as imagens de qualquer forma. Pense em seus usuários, pensa no seu posicionamento nos buscadores e coloque a dieta às suas imagens.

Artigos relacionados:

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Share on facebook
Share on twitter
Share on whatsapp
Share on telegram
Share on linkedin
Share on pinterest
Share on tumblr
Share on facebook
Share on twitter
Share on pinterest
Share on whatsapp
Share on telegram
Share on tumblr