Acelere o carregamento das páginas do seu site otimizando suas imagens com ferramentas e plugins do WordPress. A otimização de imagens para a web é um fator crítico para determinar a velocidade do seu site. Imagens de tamanho insuficiente e não compactadas são um dos principais problemas que tornam muitos sites lentos atualmente.
Felizmente, há uma garagem digital inteira à sua disposição, repleta de ferramentas gratuitas que podem ser usadas para otimizar suas imagens para que carreguem na velocidade da luz.
Vamos ver como isso funciona?
[wpsm_titlebox title="Índice de Otimização de Imaens" style="1"][contents h2 h3 h4][/wpsm_titlebox]
Índice
O que é otimização de imagem?
A otimização de imagens consiste em reduzir o tamanho do arquivo de suas imagens o máximo possível, sem sacrificar a qualidade, para que o tempo de carregamento da página permaneça baixo. É também sobre SEO de imagem. Ou seja, fazer com que suas imagens de produtos e imagens decorativas sejam classificadas no Google e em outros mecanismos de busca de imagens e obtenha um ranking mais alto.
Por que a otimização de imagem é importante?
Ter um ótimo desempenho do site é importante por vários motivos: pode melhorar seu SEO, reduzir sua taxa de rejeição e diminuir significativamente o tamanho do seu site ao longo do tempo.
A compactação sem perdas de imagens geralmente reduz seu tamanho em até 75%, para que você possa reduzir facilmente o uso de espaço e melhorar a velocidade sem afetar a qualidade da imagem.
Tipos de imagem comuns e quando usá-los
Embora existam muitos tipos e formatos de imagem usados em web design, os seguintes são os mais comuns em 2020:
- Tipos de imagem
Cada uma dessas imagens vem com certos prós e contras, que as tornam melhores para certos tipos de monitores, mas menos eficazes para outros. Vamos dar uma olhada em cada um deles.
Extensão de imagem SVG
- Ideal para: logotipos, ícones, gráficos, diagramas e animações simples.
- Não recomendado para: fotos, imagens detalhadas ou imagens tridimensionais.
Gráficos vetoriais escaláveis são arquivos de imagem responsivos que podem ser redimensionados sem perda de resolução. Eles são ideais para criar formas, gráficos e outras imagens vetoriais. Os SVGs são particularmente úteis quando você deseja exibir uma imagem com largura responsiva, o que significa que podem ter tamanhos diferentes em dispositivos diferentes.
Imagens com extensão PNG
- Ideal para: imagens com fundo transparente ou cujo fundo foi removido. Mesmo assim, se for em peso pequeno.
- Não recomendado para: imagens maiores ou que precisam ser redimensionadas dinamicamente.
Os arquivos Portable Graphics Format são imagens que podem apresentar fundos transparentes e, ou elementos semitransparentes. As fotos com extensão PNG são comumente usadas na criação de logotipos, miniaturas do YouTube e qualquer outra coisa que possa exigir um elemento transparente ou translúcido. Arquivos PNG também são ideais para ícones e outros elementos desenhados em linha.
Imagens JPG e JPEG
- Melhor para: Fotografias e outras imagens detalhadas.
- Não recomendado para: gráficos, logotipos, ícones.
Esse tipo de imagem foi criado pelo Joint Photographic Experts Group. Extensões JPG são usadas para muitos tipos de imagens, mas são mais populares para criar versões compactadas de fotos. Quando JPG é compactada ou redimensionada, ela pixeliza. No entanto, o tamanho do arquivo ainda pode ser reduzido significativamente, sem afetar negativamente a imagem.
Imagens e animações GIF
- Ideal para: imagens em movimento, desenhos animados, arte de linha.
Não recomendado para: fotos de alta resolução ou com mais de 256 cores.
As imagens do Graphics Interchange Format são um tipo de imagem sem perdas que suporta imagens estáticas e imagens em movimento. Os GIFs em movimento podem ser criados usando várias imagens estáticas ou um pequeno segmento de um vídeo. Então, se você pesquisar gerador de gif, encontrará uma série de serviços gratuitos para a criação de GIFs. Você também pode criá-los diretamente no Google Fotos e em algum software de edição, como o Photoshop.
[wpsm_promobox background="#ffffff" border_size="1px" border_color="#dddddd" highligh_color="#fb7203" highlight_position="left" button_link="https://web.dev/uses-webp-images/" button_text="Imagens no formato WebP" description="Existem vários outros, como o JPEG XR e o WebP, mas eles não são universalmente suportados por todos os navegadores. Idealmente, você deve usar JPEG ou JPG, para imagens com muita cor e PNG para imagens simples." ]
Imagens responsivas
Usar uma imagem responsiva é, na verdade, um método pelo qual várias versões de uma imagem são usadas para garantir que a imagem tenha uma boa aparência em qualquer tela. Tudo isso, independentemente de seu tamanho e resolução.
Este é um grande desafio, considerando o fato de que os navegadores da web hoje funcionam em tudo, desde smartphones com dez anos de idade até monitores 4K modernos.
A solução está em uma propriedade de codificação HTML chamada srcset . Para uma visão mais detalhada de como as imagens responsivas funcionam no back end, consulte este artigo elaborado por desenvolvedores em mozilla.org.
Resolução padrão Alta resolução
- Esquerda: imagem de resolução padrão.
- À direita: imagem de alta resolução.
Você não verá a diferença se estiver assistindo em uma tela que não seja de alto DPI.
Ao usar imagens em webdesign, é importante carregá-las em tamanho e resolução de arquivo ideais, além do formato correto. Como regra geral, pense no tamanho que você deseja que a imagem tenha em um monitor widescreen - provavelmente é o tamanho que você deve enviar.
- Se você estiver usando o WordPress, o CMS criará automaticamente cópias menores da imagem para exibir em telas menores.
- Por outro lado, se você estiver codificando seu site manualmente ou usando um CMS que não faz isso automaticamente, você precisará aprender a usar imagens responsivas com CSS.
O que é compressão de imagem?
Este é o processo de reduzir o tamanho do arquivo de uma imagem para que seja mais rápido carregar em seu site e menor para armazenar em sua conta.
Quando você consegue reduzir o tamanho da imagem sem afetar a qualidade visual, o processo é denominado compressão sem perdas. E é uma etapa importante para otimizar a velocidade do seu site e melhorar a experiência online do visitante.
Como compactar e otimizar imagens rapidamente
Embora existam muitas opções de software de processamento de imagens caras que podem ajudar com suas necessidades de otimização de imagens, também existem várias ferramentas úteis disponíveis com o seu plano de hospedagem na web ou gratuitas na web. Aqui estão algumas de nossas ferramentas favoritas para ajudá-lo a reduzir rapidamente o tamanho da imagem:
Formatos JPEG 2000, JPEG XR e WebP
Google recomenda fortemente que você use formatos mais leves como: JPEG 2000, JPEG XR e WebP. Mas eu já tenho meu site como milhares de imagens JPG e PNG. Não se preocupe, se suas imagens com estes formatos estão otimizadas por alum plugin ou outra ferramenta, isso não vai impactar no SEO.
Por outro lado, se suas imagens estão crua sem nenhuma otimização, você ainda tem ótimas opções no mercado para otimizá-las. Neste caso se estiver usando o WordPress há uma lista de plugins que pode lhe ajudar nesta tarefa.
[wpsm_button color="main" size="big" link="https://wordpress.org/plugins/search/webp/" icon="none" class="" border_radius="3" target="_blank"]Plugins para Otimizar Imagens WebP[/wpsm_button]
Cache LiteSpeed
LiteSpeed Cache é um WordPress e plugin de servidor que funciona com o servidor da Web LiteSpeed para carregar seu site de forma rápida e eficiente. Uma das muitas funções deste plugin é que ele pode ajudar a compactar imagens. Para aprender como usar este plugin com sua conta de hospedagem na web, consulte nosso guia How to Use LiteSpeed Cache .
Ferramenta de Imagens cPanel
Muitos usuários do cPanel não percebem que existem ferramentas de otimização embutidas em seu software de hospedagem. A ferramenta de imagens cPanel possui uma série de funções úteis para trabalhar com imagens. Esses incluem:
- The Thumbnailer
- The Scaler
- O conversor
A ferramenta thumbnailer pode ser usada para criar cópias menores de várias imagens. A ferramenta scaler serve para ampliar ou reduzir imagens individuais. O conversor pode ser usado para alterar imagens de um tipo de arquivo compatível para outro. Para mais informações, consulte o tutorial oficial cPanel no link acima.
Módulos Gzip e Mod_Deflate
Compressão Gzip e mod_deflate são módulos que estão disponíveis com cPanel, em todos os servidores WHC. Eles podem acelerar o desempenho do seu site e reduzir o consumo de largura de banda em até 81%, compactando seus arquivos no nível do servidor antes de enviá-los aos visitantes.
Para ativar a compactação gzip e mod_deflate, siga estas etapas em nossa Central de Ajuda .
Outros plugins do WordPress
Além do cache LiteSpeed, há vários plugins do WordPress que podem ser usados para reduzir o tamanho da imagem.
ShortPixel é um plugin freemium com o qual você pode otimizar um número limitado de imagens gratuitamente. Tudo o que você precisa fazer é instalar o plugin em seu site e solicitar uma chave API.
Se você não quer se preocupar em obter uma chave de API, Smush é outro plugin que funciona da mesma maneira, mas sem exigir uma chave. Se você tiver um site com muitas imagens que carrega lentamente, usar esses dois plugins pode ajudar a resolver o problema.
Outras ferramentas online
Existem muitas ferramentas gratuitas de otimização de imagens disponíveis na web, mas aqui estão três das mais comumente usadas e confiáveis.
Existem várias outras ferramentas gratuitas que podem compactar imagens sem perdas em alguns cliques, mas a mais popular é provavelmente o TinyPNG, além de ser o meu favorito. Esta é uma ferramenta online gratuita onde você pode fazer upload de até 20 imagens por dia e, em seguida, baixar versões compactadas que são até 70% menores, mas têm a mesma aparência.
ImageRecycle
Embora o TinyPNG seja ótimo para PNGs e JPGs, se você precisar compactar GIFs ou mesmo arquivos PDF, pode ser necessário usar o ImageRecycle.
ImageRecycle é uma ferramenta premium que permite um certo nível de acesso com um teste gratuito.
Se você tiver apenas alguns arquivos para compactar, provavelmente poderá otimizá-los gratuitamente. No entanto, se você tiver várias imagens para otimizar, os planos premium têm preços bastante razoáveis.
Optimizilla
O Optimizilla é apresentado no imagecompressor.com e funciona de forma muito semelhante ao tinyPNG. Você pode, entretanto, carregar até 20 JPGs ou PNGs de uma vez e compactá-los para uma redução significativa no tamanho do arquivo. A imagem de teste que enviei para o Optimizilla foi reduzida em 80%!
Obtendo o máximo de suas imagens otimizadas
Lembre-se de fazer upload de imagens nas menores dimensões que façam sentido para a forma como você as está usando em seu site. No entanto, se estiver usando uma imagem como plano de fundo de tela inteira, você pode querer tão grande quanto 1920 x 1080. Portanto, se for uma foto de uma pessoa para um perfil ou depoimento, você pode usar dimensões consideravelmente menores.
Além de usar as dimensões corretas e o máximo de compactação sem perdas possível, certifique-se de escolher o melhor formato. Então, você sabe a diferença entre SVGs, PNGs, JPGs e GIFs agora - certifique-se de escolher o melhor para suas necessidades!
