Ter imagens atraentes, claras e de carregamento rápido em seu site WordPress é uma das maneiras mais eficazes de atrair um usuário/cliente. Há uma razão pela qual as concessionárias de automóveis gastam tanto tempo certificando-se de que os novos modelos sejam impecáveis ​​e brilhantes. O impacto visual de um produto muitas vezes pode ser a decisão de fazer ou quebrar entre o sucesso e o fracasso. Os showrooms online não são diferentes, além disso, há a complicação adicional de como uma imagem pode afetar sua velocidade de carregamento. É uma métrica bem usada e famosa, que um usuário sairá de um site se demorar mais de 3 segundos para carregar. Se um site demorar mais de 3 segundos para carregar, há uma boa chance de que as imagens que você tem em seu site sejam parte desse motivo.

Então, como proprietário de um site WordPress, o que você pode fazer para garantir que as imagens que você tem em seu site sejam atraentes para os usuários e permitam que seu site carregue rapidamente. Seu instinto inicial pode ser apenas reduzir a imagem de uma imagem de tamanho 1800×1400 para uma imagem de tamanho 300×200. Este seria o curso de ação errado a ser tomado, pois embora o tamanho do arquivo de imagem agora possa ser muito menor, a qualidade da imagem e a experiência do usuário sofreram como resultado. Se você tem um site de vendas de showroom de carros, por exemplo, os clientes vão querer dar uma boa olhada no carro e poder ver todos os recursos e detalhes. Ao tornar a imagem muito menor, qualquer inspeção detalhada do carro agora é impossível – deixando o cliente em potencial frustrado e procurando em outro lugar.

Então quais são suas opções? Felizmente, existem dezenas de opções de arquivos de imagem diferentes que você pode escolher, desde o BMP de alta qualidade, mas com tamanho de arquivo grande, o JPEG testado e comprovado, até o novo e amplamente desconhecido formato WebP. Além de escolher o formato correto, é importante lembrar que, independentemente do formato escolhido, você também pode reduzir o tamanho do arquivo de imagem empregando um processo via WP-Optimize conhecido como “compressão”.

A velocidade do site é um dos 10 fatores mais importantes que os bots do Google que rastreiam seu site observam quando estão classificando seu site nos resultados de pesquisa. Ter uma velocidade de carregamento ruim pode impactar negativamente na classificação do seu site e pode facilmente levá-lo da primeira página para não ser indexado pelo Google. O Google é muito rigoroso em como eles classificam sites em seu algoritmo de pesquisa e, se acharem que o site oferece uma experiência ruim ao usuário devido a tempos de carregamento lentos, eles podem nem ter o problema de rastreá-lo e torná-lo detectável por meio da pesquisa do Google .

Qual formato de imagem você deve escolher?

Como imagens de alta qualidade são tão importantes para qualquer site WordPress moderno, você precisa saber qual formato usar, como elas afetam o desempenho do seu site e como obter o melhor da sua seleção de arquivos.

Os dois formatos de arquivo de imagem mais populares para sites são PNG e JPEG/JPG. De acordo com a w3techs , mais de 70% de todos os sites usam esses tipos de arquivos. Cerca de 30% dos sites usam SVG e 22% usam GIF.

É aqui que os tipos de arquivo de imagem entram em jogo, pois o tipo de arquivo que você usa para enviar suas imagens desempenha um papel importante. Como existem tantos tipos de arquivos diferentes, veremos os mais populares e seus prós e contras abaixo:

Antes de entrarmos no tipo de arquivo, precisamos entender alguns conceitos antes, como o que são uma imagem raster e uma imagem bitmap? O que é compressão? Qual é a diferença entre uma compressão com perdas e sem perdas?

Compressão - Com perdas vs sem perdas

Ambos os tipos de compactação visam reduzir o tamanho do arquivo, mas é o que eles removem que realmente importa. Em compressão com perdas; dados importantes que são relevantes para a qualidade da imagem são removidos. Isso pode ser refletido na imagem sendo pixelizada em alguns casos, pois seu computador pode ter problemas para reconstruir a imagem.

Na compactação sem perdas, os dados irrelevantes presentes na imagem (como metadados) são reduzidos, o que ajuda a reduzir o tamanho do arquivo. A qualidade da imagem não é afetada neste processo.

Raster vs Vetor

Os tipos de arquivo de imagem mais usados ​​geralmente são baseados em raster. Isso significa que eles têm um valor de cor RGB fixo associado a cada pixel e todos esses pixels são combinados e usados ​​para criar uma imagem inteira.

Exemplos de tais formatos de arquivo incluem jpg, png e gif.

Alternativamente, uma imagem vetorial é criada usando formas e linhas que podem ser dimensionadas infinitamente sem que elas sejam pixelizadas. Os vetores são criados usando fórmulas matemáticas que permitem ao usuário alterar os valores, sem afetar a qualidade da imagem.

Agora que analisamos o básico das imagens, agora podemos ver os detalhes dos diferentes tipos de arquivo.

JPEG:

Este é um formato de imagem digital que contém dados de imagem compactados. Com uma taxa de compactação de 10:1, as imagens JPEG são usadas por serem muito compactas. O formato JPEG contém detalhes importantes da imagem e é o formato de imagem mais popular para compartilhar fotos e outras imagens na Internet. O tamanho de arquivo pequeno das imagens JPEG também pode permitir que os usuários armazenem milhares de imagens (por exemplo, em um site de arte) sem a necessidade de espaço de armazenamento extra em seu site.

JPEG é um tipo de arquivo de compactação com perdas que funciona bem para fotos, mas é recomendável usar outro formato ao trabalhar com gráficos, como PNG.

Um exemplo de arquivo de imagem JPEG. Você pode ver que os detalhes e a qualidade foram mantidos ao fazer o upload.

PNG:

PNG é um formato de imagem bitmap popular e é a abreviação de “Portable Graphics Format”. Este formato foi criado como uma alternativa ao Graphics Interchange Format (GIF). O PNG tem alguns ótimos recursos, como conter paletas de cores RGB de 24 bits, imagens em escala de cinza e exibir fundos transparentes. Um método de compactação de dados sem perdas também é usado em imagens PNG ao trabalhar em imagens ou gráficos de alta qualidade. As imagens PNG também são frequentemente usadas na edição de imagens, pois podem dar ao usuário mais controle e opções sobre a imagem em relação ao formato JPEG tradicional.

O PNG também usa um algoritmo de compactação sem perdas, o que significa que esse formato pode reter mais dados do que o JPG. Ao usar um arquivo de imagem PNG, os usuários também podem salvar essas imagens com um fundo transparente. Ao usar este formato, os usuários têm a opção de trabalhar com imagens em camadas que podem mostrar um fundo claro (por exemplo – apenas as flores na imagem abaixo e não a parede de fundo), permitindo que os usuários adicionem a imagem a outras imagens sem a necessidade para recortar e remover o fundo existente – como você teria que fazer com uma imagem JPEG. Esta é uma das principais razões pelas quais é a escolha preferida para gráficos como diagramas e ilustrações. PNGs são conhecidos por serem mais populares para usuários que trabalham com gráficos, em vez de carregar fotos padrão.

Uma imagem PNG mantém alta qualidade, além de permitir que você tenha mais controle sobre a imagem

GIF:

Você provavelmente conhece melhor o termo “GIF” pelos inúmeros clipes curtos que são enviados em aplicativos de mensagens. GIF significa “Graphics Interchange Format” e é usado principalmente para suportar animação sem áudio

Ao contrário de JPEG e PNG, os GIFs são usados ​​em um caso mais específico e normalmente não são usados ​​para imagens estáticas (embora isso seja possível). Se você usa um GIF em seu site WordPress, é mais provável que mostre aos visitantes uma animação ou processo simples. Os GIFs têm uma gama de cores limitada e são melhor usados ​​para gráficos simples. Eles usam compactação sem perdas e tendem a ser menores que os JPGs. Geralmente, é recomendável que você use apenas GIFs com moderação em seu site, pois eles podem aumentar o tempo de carregamento (dado o tamanho do arquivo) e são limitados a 256 cores.

Um exemplo de uma imagem GIF. A qualidade da imagem original foi bastante reduzida para produzir a animação.

SVG:

Scalable Vector Graphics (SVG) é um formato de arquivo vetorial amigável para a web. Ao contrário dos arquivos de imagem raster baseados em pixels, como JPEGs, os arquivos vetoriais armazenam imagens por meio de fórmulas matemáticas baseadas em pontos e linhas em uma grade. Isso significa que arquivos vetoriais como SVG podem ser significativamente redimensionados sem perder sua qualidade, o que os torna ideais para logotipos e gráficos on-line complexos.

Os vetores são melhores apenas para gráficos, formas e ilustrações simples. Os SVGs são uma boa opção para logotipos, especialmente se você precisar que seu logotipo seja responsivo e seja compatível com a maioria dos navegadores, incluindo Chrome, Firefox, Edge e Opera.

Um exemplo de girassóis em formato SVG que você usaria para um logotipo.

BMP:

O BITMAP agora é considerado um formato de imagem desatualizado. O BMP carrega as imagens em um formato de imagem sem perdas, o que pode resultar em tamanhos de arquivo enormes devido à falta de compactação. Considerando a importância da velocidade de carregamento e como os criadores de sites querem manter os tamanhos de imagem no mínimo (sem mencionar a popularidade dos formatos SVG e JPEG), esse formato se tornou amplamente não utilizado para imagens online.

A qualidade original da imagem é mantida ao fazer o upload no formato BMP, mas o tamanho do arquivo tornará seu site muito lento e não é recomendado.

WebP:

Esse formato de imagem foi criado pelo Google em 2010 e está começando a se tornar popular entre as pessoas que carregam muitas imagens em seu site, pois tem várias vantagens sobre JPEG e PNG, como melhor desempenho de compactação com e sem perdas.

O WebP também costuma fazer upload em tamanhos de arquivo menores do que os formatos JPEG ou PNG, devido ao seu desempenho de compactação aprimorado e ocupará menos espaço em seu site - permitindo que ele carregue mais rapidamente. Embora não seja suportado por todos os navegadores, é suportado por todos os navegadores mais populares – incluindo Chrome, Firefox, Edge e Opera.

Embora não seja tão conhecido como JPEG e PNG, o WebP pode vir a ser o formato de imagem preferido no futuro.

Conclusão:

Existem muitos tipos de formatos de imagem que podem ser usados ​​em seu site WordPress, mas é importante avaliar o propósito da imagem. Se o seu site for para um fotógrafo de casamento, por exemplo, você desejará manter imagens de alta qualidade que ainda carreguem rapidamente e sejam fáceis de usar ( JPEG ). No entanto, se você estiver vendendo imagens em uma loja de pôsteres on-line, convém manter o máximo de detalhes e informações de imagem possível ( PNG ).

Como regra geral, se você está apenas fazendo upload de imagens padrão para sua loja online, blog, portfólio, mídia social ou site de mídia social - então é recomendado que você faça upload de suas imagens em um formato JPEG padrão e, em seguida, use WP-Optimize para compactar ainda mais suas imagens

No entanto, se você deseja tornar suas imagens à prova de futuro e melhorar sua velocidade de carregamento o máximo possível, o WebP pode oferecer compactação com e sem perdas superior, mantendo altos níveis de detalhes. Seja qual for a sua decisão, lembre-se de sempre compactar suas imagens usando o WP-Optimize para a compactação líder de mercado.