Como otimizar suas imagens para se tornarem SEO (Guia Completo)

O desempenho do seu site depende de vários fatores, desde o host específico que você escolhe, seguindo as diretrizes de acessibilidade do site, até os tamanhos de arquivo de imagem usados.


Formatá-los para o tamanho adequado, no entanto, pode reduzir a qualidade devido às modificações que você faz. A boa notícia é que você pode manter a qualidade de imagem ideal e obter o tamanho certo com algumas técnicas e truques.

O que é otimização de imagem?

dimensões de otimização de imagemAs páginas da Web podem sofrer uma desaceleração significativa quando imagens grandes estão presentes. Isso pode reduzir o tempo de carregamento e tornar a experiência geral inferior aos visitantes do site.

Diminuir o tamanho do arquivo é otimizar a imagem. Você pode usar um script ou plugin para este.

Isso resulta em tempos de carregamento mais rápidos para suas páginas. Compactação sem perdas e com perdas são os dois métodos de otimização mais comuns.

Benefícios da formatação de imagem

tamanhos médios de imagem na webEstima-se que aproximadamente 54% do peso total de uma página da Web seja devido a imagens.

Quando você está trabalhando na otimização de sites, suas imagens devem ser sua primeira tarefa por causa disso. Os benefícios da formatação de imagem incluem:

  • Velocidade de carregamento de página aprimorada
  • É mais rápido criar backups
  • É necessário menos espaço de armazenamento do servidor
  • SEO aprimorado com o plugin SEO certo
  • Menos largura de banda é usada

Como melhorar o desempenho com otimização de imagem

O objetivo é equilibrar uniformemente a qualidade aceitável e o menor tamanho de arquivo possível. Há mais de uma maneira de fazer isso. Antes de fazer o upload, compactar suas imagens é uma opção comum. Você pode usar uma ferramenta ou um plugin para esse fim (aqui estão alguns).

É importante considerar o tipo de compactação e formato de arquivo que você usa. A combinação certa permite diminuir o tamanho da sua imagem em até cinco vezes.

Experimente diferentes formatos de arquivo e tipos de compactação para determinar a melhor combinação para suas necessidades.

Escolha o melhor formato de arquivo

Para escolher o melhor tipo de arquivo, é importante saber quais estão disponíveis. Estes são os mais comuns:

  • JPEG: Esse tipo utiliza otimização sem perdas e com perdas. Você pode encontrar um equilíbrio sólido entre tamanho e qualidade do arquivo ajustando o nível de qualidade.
  • PNG: Esse tipo tende a ter um tamanho de arquivo maior, mas as imagens são de qualidade superior. Você pode usar a compactação com ou sem perdas.
  • GIF: Isso é ideal para imagens animadas. Você só pode usar compactação sem perdas. Ele usa apenas 256 cores.

formatos de arquivo de imagem

Existem outras opções, mas essas estão entre as mais comuns e fáceis de trabalhar. Outras opções incluem JPEG XR e WebP. Nem todos os navegadores suportam esses dois, portanto, esteja ciente disso.

Eles podem ser uma escolha viável, no entanto. Por exemplo, comparado a uma imagem JPEG comparável, há uma redução de 30% no tamanho de arquivo com o WebP, em média.

Devido à falta de suporte universal para essas duas opções, seu aplicativo precisará de lógica adicional em seus servidores ou aplicativos para fornecer o recurso apropriado:

  • A otimização de imagem é um serviço fornecido por algumas CDNs, incluindo entrega WebP e JPEG XR.
  • Para detectar o cliente, forneça o melhor formato de imagem disponível e verifique os formatos suportados, é possível adicionar lógica de aplicativo adicional.
  • Certas ferramentas de código aberto automatizam a conversa, a otimização e a veiculação de ativos apropriados.

Tamanho vs. Qualidade de Compressão

A baixa compactação tende a oferecer uma qualidade mais alta, mas os tamanhos dos arquivos geralmente são maiores. O oposto é verdadeiro com alta compressão. Os arquivos são menores, mas a qualidade tende a diminuir.

qualidade de imagem versus compactação

Idealmente, você deseja um total de um a dois MB para o peso geral da sua página da web. Portanto, considere quantas imagens você precisa usar e divida esse número por cerca de 1,5. Isso fornece o tamanho por imagem que permite a melhor velocidade de carregamento.

Otimização sem perdas x com perdas

Estes são os dois tipos de compactação que você usará. É importante entender o que eles fazem:

  • Compressão sem perdas vs perdasSem perdas: Isso comprime os dados e é um filtro. Antes de renderizar a imagem, ela deve ser descompactada. No entanto, a qualidade não é reduzida. Existem várias ferramentas que executam compactação sem perdas.
  • Com perdas: Isso elimina alguns dados e é um filtro. Lembre-se de quanta redução você faz, pois isso degradará a imagem. Você pode usar diferentes editores e ferramentas de imagem para ajustar as configurações de qualidade da imagem.

A configuração ideal da configuração sem perdas ou com perdas depende de seus próprios critérios, como a troca entre os artefatos introduzidos e o tamanho do arquivo, e o conteúdo da imagem.

Não existe uma única configuração universal que se aplique a todas as imagens. Por fim, você deseja brincar com imagens diferentes para ver qual funciona melhor.

Redimensionando imagens para redimensionar

Graças a páginas responsivas em sites como o WordPress, você obterá vários tamanhos de arquivo na sua biblioteca de mídia. Seu navegador pode escolher o tamanho melhor e fazer o download. O tamanho que o navegador escolhe é baseado na resolução do dispositivo.

redimensionando imagem no wordpress

O arquivo original permanece intocado e retido. Você pode usar plug-ins para evitar salvar o original e economizar espaço em disco, se preferir.

Substituindo e eliminando imagens

Você precisa de todas as imagens em uma página da web? Caso contrário, remova os desnecessários. No entanto, se todos forem pertinentes ao conteúdo, considere substituir as imagens de qualidade maior ou menor por melhores opções.

Em alguns casos, as fontes da web e os efeitos CSS podem substituir as imagens e, ao mesmo tempo, fornecer uma boa estética visual na página. Com fontes da Web, tipos de letra agradáveis ​​podem ajudar a melhorar a usabilidade e fornecer uma aparência mais personalizada às suas páginas.

Também pode melhorar sua legibilidade e marca. Apenas garanta que você ainda possa pesquisar, selecionar e redimensionar o texto com facilidade, sem problemas de legibilidade.

Os efeitos CSS incluem elementos, como sombras e gradientes. Estes também podem promover ainda mais a marca. As animações podem fornecer apelo visual em sua página da web em todos os níveis e resoluções de zoom. Comparado aos arquivos de imagem, estes são uma fração dos bytes.

Raster vs. Imagens vetoriais

rastor vs vetor

Raster e vetor são dois dos principais tipos de arquivos de imagem. Programas baseados em pixel, scanner ou câmera são usados ​​para criar imagens rasterizadas.

Estes são amplamente utilizados na internet e mais comumente usados. O software vetorial é usado para criar imagens vetoriais. Isso é comum para imagens que entram em produtos físicos e em engenharia, gráficos CAD e 3D.

As imagens vetoriais são independentes da resolução e do zoom. Quando formas geométricas estão envolvidas, o vetor é ideal. Quando as imagens são complexas e têm muitos detalhes e formas irregulares, as imagens raster são preferidas.

Os gráficos de varredura codificam os valores individuais de cada pixel em uma grade retangular para representar uma imagem. Os gráficos vetoriais representam uma imagem usando pontos, linhas e polígonos.

Implicações de tela de alta resolução

É importante distinguir entre os dois tipos diferentes de pixels, que incluem pixels de dispositivo e pixels de CSS. Vários pixels de dispositivo podem estar presentes em um único pixel CSS. Os detalhes na tela ficam mais refinados com mais pixels do dispositivo.

pixel css vs pixel do dispositivoPara aproveitar ao máximo as contagens de pixels do dispositivo, os recursos da imagem devem ter mais detalhes.

Esta tarefa é ideal para imagens vetoriais, pois elas podem produzir resultados nítidos quando processado em qualquer resolução.

Como as imagens rasterizadas usam uma base por pixel para codificar os dados da imagem, elas são mais desafiadoras. Isso ocorre enquanto os tamanhos dos arquivos raster aumentam à medida que os pixels.

Portanto, as telas de alta resolução precisam de imagens de alta resolução para colher os benefícios. Imagens vetoriais são melhor para telas de alta resolução pois eles sempre fornecem resultados nítidos por serem independentes da resolução.

Lembre-se de que, independentemente da resolução, as técnicas de otimização de imagem são as mesmas.

Otimizando imagens vetoriais

Scalable Vector Graphics (SVG) são suportados por todos os navegadores modernos.

Isso é ideal para gráficos bidimensionais e o formato é baseado em imagem XML. Os arquivos SVG podem ser criados manualmente usando o editor de texto de sua preferência ou com a maioria dos tipos de software baseados em vetores.

Para reduzir o tamanho dos arquivos SVG, eles devem ser minificados. O GZIP deve ser usado ao compactar arquivos SVG.

Otimizando imagens raster

Uma grade de pixels compõe uma imagem rasterizada. Os pixels individuais estão em uma grade bidimensional. Por exemplo, uma sequência de 10.000 pixels compõe uma imagem de 100 por 100 pixels. Cada pixel codifica informações de transparência e cores.

quadriculação pesadaOs valores RGBA são armazenados por cada pixel. Esses incluem:

  • Canal vermelho
  • Canal azul
  • Canal verde
  • Canal alfa (transparência)

256 tons (valores) são alocados internamente pelo navegador. Por canal, isso se traduz em oito bits. Por pixel, são quatro bytes. Isso torna possível calcular o tamanho do arquivo usando as dimensões da grade. Não é preciso muito para o tamanho do arquivo se tornar muito grande.

Portanto, para reduzir o tamanho do arquivo de imagem, existem algumas estratégias:

  • Reduza a profundidade de bits da imagem. Você pode fazer isso usando uma paleta de cores menor.
  • Otimize os dados que os pixels individuais estão armazenando.

Ferramentas e ajuste de parâmetros

Não existe uma ferramenta de imagem perfeita, conjunto de parâmetros ou formato de otimização que funcione para todas as imagens. O conteúdo da imagem e seus requisitos técnicos e visuais determinarão qual você deve usar.

Depois de encontrar um bom conjunto de configurações, você poderá usá-lo para imagens semelhantes no futuro para economizar tempo. No entanto, nunca assuma que as mesmas configurações sejam usadas para compactar todas as imagens.

Aprender sobre algumas ferramentas comuns pode ajudá-lo a fazer a escolha certa. Estes quatro estão entre os mais utilizados:

  • Gifsicle: Permite otimizar e criar várias imagens GIF.
  • Optipng: É usado para permitir a otimização PNG sem perdas.
  • Jpegtran: Este permite otimizar imagens JPEG.
  • Pngquant: É usado para permitir a otimização PNG com perdas.

Entrega de ativos de imagem em escala

Existem dois critérios principais a serem considerados ao executar a otimização de imagem:

  • Otimizando o número total de pixels de uma imagem.
  • Otimizando quantos bytes são necessários para codificar cada pixel em uma imagem.

árvore de formato de imagemO tamanho do seu arquivo de imagem é dividido em total de pixels multiplicado pelo total de bytes necessários para a codificação de pixels individual. É isso. Lembre-se disso quando estiver trabalhando para determinar o tamanho ideal para os arquivos de imagem em seu site.

Por esse motivo, a maneira mais eficaz e fácil de otimizar imagens é garantir que você não esteja enviando mais pixels, absolutamente necessário para mostrar o ativo no navegador no tamanho pretendido.

assim, não confie apenas no seu navegador para redimensionar imagens. Isso pode fazer com que sejam exibidos em uma resolução mais baixa. Ele também usa muitos recursos extras da CPU.

Geralmente, não é possível garantir o tamanho exato da exibição para cada ativo entregue. No entanto, é importante garantir que todos os pixels desnecessários sejam mantidos no mínimo.

Também é essencial que você entregue seus grandes ativos o mais próximo possível do tamanho de exibição.

Lista de verificação de otimização de imagem

Todas as informações aqui permitem otimizar suas imagens para que suas páginas sejam mais rápidas. Você ainda poderá usar imagens bonitas, mas elas não causarão uma desaceleração significativa com o tempo de carregamento da sua página.

Isso fará seus visitantes felizes e melhorará a função geral do seu site. Considere os seguintes pontos da lista de verificação ao otimizar suas imagens:

  • Considere os formatos vetoriais, pois eles trabalham para dispositivos de alta resolução e múltiplos, porque são independentes de escala e resolução.
  • Todos os ativos SVG devem ser compactados e minificados. Isso remove os metadados desnecessários.
  • Para formatos raster, brinque com as configurações de qualidade ideais. Isso pode economizar um número significativo de bytes.
  • Para cada ativo, descubra seus requisitos funcionais e escolha o melhor formato para imagens rasterizadas.
  • Automatize sempre que puder para garantir uma otimização consistente da imagem.
  • Servir imagens em escala para que o tamanho natural da imagem e o tamanho da tela sejam os mais semelhantes possíveis.

Para resumir, existe uma ciência e uma arte na otimização de imagens. Os algoritmos e técnicas altamente desenvolvidos servem como ciência.

A falta de respostas definitivas em relação à compressão de imagens individuais é a arte. Por fim, você deve brincar e experimentar. Isso permite que você faça a melhor escolha para seus arquivos de imagem e como eles contribuem para a velocidade da sua página da web.

Com a crescente popularidade e sofisticação de criadores de sites de terceiros como o Wix, é fácil para os designers ficarem desleixados, mas manter o foco no desenvolvimento e manutenção de bons processos de otimização de imagem, seja criando um modelo ou construindo um site a partir do zero..

Referências e créditos de imagem:

  • PicupMedia.com
  • Computing.HomeDNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map