Dicas para otimizar imagens para seu site: melhore o desempenho e a experiência do usuário

Você não quer que o Google despreze seu site, acredite. Felizmente, você pode otimizar suas imagens e assim melhorar a eficiência do seu site. Um problema com a formatação deles é que as alterações podem afetar sua qualidade (o que, por sua vez, pode fazer com que o visitante odeie seu site).

Isso não é uma coisa terrível se você não os fizer parecer horríveis. Existem algumas dicas e técnicas que permitirão que você diminua o tamanho do arquivo de suas imagens e ainda as mantenha atraentes o suficiente para serem exibidas com orgulho em seu site.

Então, vamos ver como formatar suas fotos sem torná-las ruins, bem como otimizá-las para a web e desempenho.

O que significa otimizar imagens?

Imagens grandes fazem com que suas páginas da Web sejam carregadas lentamente, resultando em uma experiência de usuário ruim. Ao usar a otimização de imagem, também conhecida como reduzir o tamanho do arquivo usando um plug-in ou script, você não apenas mantém a qualidade, mas também melhora o tempo de carregamento. Dois métodos de compactação comumente usados ​​são a compactação com e sem perdas.

As vantagens da formatação de imagem

Por que você precisa formatar suas fotos em primeiro lugar? Quais são as vantagens? Há várias vantagens em otimizar o desempenho de suas fotos. De acordo com o HTTP Archive, as imagens representam 21% do peso total de uma página da Web em novembro de 2018.

Isso o torna a segunda parte mais importante do seu site que você precisa otimizar, precedida apenas pelo vídeo.

Tem precedência sobre scripts e fontes. Apesar do fato de que um procedimento adequado de otimização de imagem é uma das coisas mais simples de se estabelecer, muitos proprietários de sites sentem falta dele.

Aqui estão algumas das vantagens mais importantes:

• Isso melhorará drasticamente os scripts de carregamento. Se sua página demorar muito para carregar, seus visitantes podem ficar frustrados e ir para outro site.
• Quando usado em conjunto com um bom plugin WordPress, pode ter um grande efeito no SEO. Nos resultados do mecanismo de pesquisa, seu site terá uma classificação mais alta.
• Será mais fácil criar backups.
• Arquivos menores utilizam menos largura de banda. Isso será apreciado por redes e navegadores.
• Reduz a quantidade de espaço de armazenamento necessária em seu servidor (isso depende de quantas miniaturas você otimizar)

Como melhorar a qualidade e o desempenho da imagem para a Web

O principal objetivo da formatação de imagem é encontrar um equilíbrio entre qualidade e tamanho do arquivo. Quase todas essas otimizações podem ser feitas de várias maneiras. Compactá-los antes de carregá-los no seu site WordPress é um dos métodos mais usados. Isso geralmente é feito em um programa como o Adobe Photoshop ou o Affinity Photo.

O formato do arquivo e o tipo de compactação são os dois fatores que você deve sempre considerar. Para descobrir o que funciona melhor com cada imagem ou tipo de arquivo, você terá que explorar.

Escolha o formato de arquivo correto

Certifique-se de ter escolhido o melhor tipo de arquivo para suas fotografias antes de começar a editá-las. Você pode usar uma variedade de arquivos, incluindo:

• PNG — o tamanho do arquivo é maior, mas a qualidade permanece mais ou menos a mesma. Embora tenha sido projetado para ser um formato de imagem sem perdas, também pode ser com perdas.
• A otimização com e sem perdas é usada em JPEG. Para um equilíbrio saudável de qualidade e tamanho do arquivo, você pode definir o nível de qualidade.
• Apenas 256 cores são usadas em GIFs. Para gráficos animados, é a opção ideal. Somente compressão sem perdas é usada.

Existem alguns outros, como JPEG XR e WebP, embora não sejam suportados por todos os navegadores. Para fotografias com muita cor, deve-se usar JPEG ou JPG, e para imagens simples, PNG.

Otimização com perdas vs. sem perdas

Existem dois estilos de compactação de imagem aceitáveis, e eles são chamados com perdas e sem perdas.

O termo “com perdas” refere-se a um filtro que remove alguns dos dados. Como isso prejudicará a imagem, você precisará ser cauteloso ao minimizá-la. Para realizar esse tipo de otimização, você pode usar softwares como Adobe Photoshop, Affinity Photo, etc. A compactação com perdas é utilizada no exemplo acima.

O termo "sem perdas" refere-se a um filtro de compactação de dados. Isso tem um efeito mínimo na qualidade da imagem. No seu PC, você pode usar aplicativos como Photoshop, FileOptimizer ou ImageOptim para fazer compactação sem perdas.

É melhor experimentar várias estratégias de compactação para descobrir quais têm o melhor desempenho para cada imagem ou formato.

Ferramentas e programas para otimização de imagens

Existem várias ferramentas e aplicativos disponíveis, pagos e gratuitos, para ajudá-lo a otimizar suas fotografias. Algumas empresas fornecem as ferramentas para realizar suas próprias otimizações, enquanto outras fazem isso por você.

Somos grandes apoiadores do Affinity Photo porque é barato e tem recursos quase idênticos ao Adobe Photoshop.

Aqui estão mais alguns recursos e iniciativas para analisar:

• Adobe Photoshop
• Gimp
• Paint.NET
• GIFsicle
• JPEGtran
• JPEG Mini
• OptiPNG

Redimensionando imagens para dimensionar

Costumava ser crucial enviar fotos em escala, em vez de permitir que o CSS as redimensionasse. Como o WordPress 4.4 agora suporta imagens responsivas, isso não é mais um problema. Cada imagem adicionada à biblioteca de mídia é redimensionada automaticamente pelo WordPress. Ao especificar todos os tamanhos potenciais de uma imagem, os navegadores agora podem escolher o tamanho mais adequado e ignorar os outros.

Limpe sua biblioteca de mídia

Se você deseja economizar espaço enquanto limpa simultaneamente sua biblioteca de mídia, pode usar o Media Cleaner para procurar arquivos de mídia indesejados. O plug-in verificará todos os seus arquivos de mídia e exibirá os que não estiverem em uso no painel do Media Cleaner para você visualizar e excluir.

Plugins de otimização de imagem que você pode usar

Felizmente, você não precisa lidar com toda a formatação ou compactação manualmente usando o WordPress. Você pode utilizar plugins para automatizar pelo menos parte do trabalho para você. Há vários plugins disponíveis que otimizarão seus arquivos de imagem quando você os enviar. Eles vão até melhorar a qualidade das fotos que você já postou.

• Otimizador de Imagem Imagify
• Otimizador de imagem ShortPixel
• Optimole
• Nuvem do Otimizador de Imagem EWWW
• Optimus Image Optimizer
• WP Smush
• TinyPNG
• Reciclagem de imagem

Conclusão

Seu site será mais apreciado pelos mecanismos de pesquisa, navegadores e redes, e carregará mais rápido para seus leitores, assim que você preparar suas fotos para um melhor desempenho e seguir as práticas recomendadas.

Você preparou suas fotografias para fazê-las correr mais rápido? Você faz isso manualmente, com um plugin ou usando os dois? Existe algum programa ou plugin que você sugeriria? Há mais alguma coisa que você gostaria de dizer?

Conte-nos sobre suas estratégias e práticas recomendadas na seção de comentários.