É óbvio que as fotos são parte integrante de nossas vidas. Consequentemente, dificilmente podemos imaginar um site sem fotos. As imagens atraem a visão dos visitantes e ajudam a organizar o conteúdo do site. As imagens tornam uma página interessante, rica em informações e melhoram a experiência do usuário.
Imagens superdimensionadas têm um efeito negativo no desempenho de um site e as imagens devem ser dimensionadas de acordo com o tema ativo. São elementos importantes em um site e merecem ser mostrados da melhor forma possível. É muito importante veicular imagens em escala em um site WordPress.
Os tamanhos das imagens dimensionadas se ajustam ao tamanho certo de acordo com os definidos em HTML e CSS. No entanto, poucos webmasters prestam atenção a esse importante detalhe de design. Veja o exemplo de uma imagem com 500 x 500 pixels para uma miniatura de 50 x 50. O navegador da web precisa baixar a imagem e reduzi-la para que possa ser exibida ao visitante. Claramente, isso é ineficiente e tornará o site mais lento.
A diferença de resolução não é visível e, portanto, o peso que as imagens grandes trazem muitas vezes passa despercebido. A maioria das pessoas nem sabe que esse exagero de resolução está causando problemas e o problema não é corrigido. Eles deixam o problema para o navegador lidar.
Por que servir imagens em escala em um site WordPress
O principal motivo para veicular imagens em escala é que as imagens completas de alta resolução tornam o site mais lento e aumentam o tempo de carregamento. Uma página lenta leva a uma experiência ruim do usuário e, em vez de ficar e retornar, eles saem e ficam longe. As estatísticas da Kissmetrics mostram que as páginas que levam mais de três segundos para carregar terão uma taxa de rejeição mais alta.
Com os tamanhos de imagem otimizados em um site, os tempos de carregamento serão menores. É mais provável que as pessoas fiquem mais tempo no site e retornem mais tarde. Isso melhora o SEO e o ranking do site vai subir.
Imagens grandes causam problemas diferentes
- Aumenta o estresse no desempenho do navegador. O navegador terá que realizar solicitações extras ao servidor. Ele não pode mostrar a imagem rapidamente, mas levará tempo e recursos para redimensionar a imagem. Sites com imagens pesadas demoram mais para carregar.
- Se imagens grandes de alta resolução forem exibidas pequenas em um site, elas desperdiçarão tempo e baixarão dados. É o caso, por exemplo, quando uma selfie de um celular é usada sem processamento para um minúsculo Gravatar.
Como dimensionar imagens em sites WordPress
Manualmente
Para começar, analise as imagens do site usando uma ferramenta como GTMetrix. GTMetrix é uma ferramenta de análise de desempenho, projetada por GT.net. Esta empresa é famosa por monitoramento e otimização de velocidade e Pingdom. Depois que a GTMetrics analisa o site, ela gera um relatório. Isso mostra quais problemas foram encontrados e quais melhorias são recomendadas.
Ao revisar o relatório, preste atenção especial à guia Estrutura. Nesta guia, clique em Imagens de tamanho adequado. Ele mostrará uma lista de imagens que não estão dimensionadas corretamente.
O WordPress não reduz automaticamente as imagens quando possível, mas as adiciona ao site sem processamento. Para resolver este problema existem duas opções.
Mesmo que o uso de plugins não seja a forma desejada, existem outras opções. A primeira maneira de dimensionar imagens é ajustar manualmente o tamanho de cada uma usando um editor de fotos, como o Photoshop. Pode parecer que este método é ineficiente, mas na realidade, não é.
No Photoshop há mais opções além de ajustar a altura e a largura da imagem. Outra coisa a verificar aqui é a resolução da imagem. Na maioria das vezes, para aplicativos da web, 72 PPI é suficiente para uma boa experiência de visualização.
A segunda é usar um plugin para dimensionar imagens. Esta opção é fácil e rápida. O WordPress tem seu próprio recurso para fazer isso, srcset. Essa ferramenta pode converter gráficos, como imagens, em arquivos responsivos. As imagens responsivas são ajustadas automaticamente para diferentes dispositivos e tamanhos de tela. Abaixo estão alguns outros plugins que fazem um ótimo trabalho ao reduzir o tamanho das imagens.
Optimole
Uma excelente ferramenta para servir imagens em escala é o Optimole. É um plugin do WordPress que é capaz de redimensionar imagens para diferentes dispositivos. Ele é redimensionado automaticamente para o tamanho ideal de uma imagem, com base nos diferentes tipos de dispositivos. Os resultados são imagens em escala de alta qualidade.
Estas são algumas das características que fazem do Optimole uma escolha interessante:
- As imagens processadas são menores, mas mantêm sua qualidade.
- É totalmente automatizado. É apenas uma questão de carregar as imagens.
- Optimole suporta todos os formatos de imagem.
- Suporta diferentes tipos de imagem, incluindo Retina e WebP
- Ele suporta bibliotecas de imagens em nuvem.
- O Optimole fornece imagens CDN globais gratuitamente.
- Não há necessidade de adivinhar ou estimar o tamanho desejado. O Optimole usa as especificações do dispositivo do visitante.
- Há suporte completo para construtores de sites, como o Elementor.
O recurso de processamento automatizado de imagens é uma grande vantagem desta opção de plugin. Não há necessidade de passar por uma longa lista de configurações; O Optimole faz tudo sozinho.
Em Media > Optimole o plugin mostra o estado dos serviços, bem como a utilização e a otimização alcançada.
A seção Opções está localizada na guia Configurações . Aqui, há duas características que merecem uma menção especial:
- Habilite a substituição de imagem. Certifique-se de que esta opção esteja habilitada para aproveitar a funcionalidade avançada de otimização de imagem.
- Imagens de escala e carga lenta. Essa é a opção que permite dimensionar as imagens com base no tamanho da tela do visitante. O carregamento lento exibe essas imagens.
Otimização de Imagem Smush
Smush Image Optimization, Compression, and Lazy Load é o nome completo nesta lista de plugins. Ao reduzir o tamanho das imagens, certifique-se de que a qualidade da imagem seja preservada.
Para usar o WP Smush é necessário instalá-lo e ativá-lo primeiro. Em seguida, o ícone do Smush aparecerá no painel do WordPress. No dashboard aparecem as estatísticas que o Smush acumula e o estado atual das diferentes funcionalidades.
Ao lado dos Dados de economia total, um ícone aparecerá, relatando todas as imagens na biblioteca de mídia que requerem processamento. Se houver imagens que precisem de processamento, o mais fácil é acessar o módulo Bulk Smush. Isso reduzirá o tamanho de todas as imagens sinalizadas.
Para processar imagens individualmente, vá para a Biblioteca de mídia e clique em Verificar novamente as imagens. Isso produz uma atualização em tempo real das imagens que devem ser processadas.
O Smush possui recursos que permitem a filtragem de imagens por status do Smush e dimensionamento seletivo de imagens.
O plugin Smush não processa vídeos e arquivos GIF. Arquivos de imagem que não são dimensionados indicam que o poder do Smush não é usado ao máximo.
Otimizador de imagem EWWW
O EWWW Image Optimizer também é um plugin do WordPress que otimiza tamanhos e formatos de imagem. Funciona com novos uploads e imagens existentes. Possui uma opção que verifica todas as imagens em um site e as otimiza.
Para começar a usá-lo, baixe e instale -o e ative -o na área de administração do site WordPress. Enquanto estiver no ambiente Dashboard, clique em Settings e depois em EWWW Image Optimizer. Em Configurações básicas, várias opções estão localizadas, como remover metadados de imagens. O nível de otimização para GIF, JPG e PNG deve ser definido como Pixel Perfect. Apenas a versão paga permite a otimização de arquivos PDF também.
A guia Redimensionar contém uma opção Detecção de redimensionamento. Em Redimensionar Imagens defina a altura e largura máximas permitidas das imagens no site. Além disso, ative as opções Redimensionar outras imagens e Redimensionar imagens existentes. Não se esqueça de salvar as alterações.
ShortPixel
A recomendação final para veicular imagens em escala é o plug-in ShortPixel. Essa é a opção certa para aqueles que precisam veicular imagens em escala, mas estão com orçamento limitado. A versão gratuita oferece 100 escalas de imagem por mês.
ShortPixel é simples e fácil de usar. Ele processa automaticamente as imagens nas dimensões que o usuário especifica durante o upload para o site. Além da opção automática, há também a opção de processar as imagens manualmente.
O plugin reduz o tamanho da imagem sem perdas ou com perda de resolução. É capaz de processar imagens GIF, JPEG e PNG e pode até otimizar arquivos PDF.
Considerações finais sobre como veicular imagens em escala
Claramente, existem muitas maneiras de servir imagens em escala em um site WordPress, e fazer isso não precisa ser difícil ou caro. O problema é quando o site está online há muito tempo e há muitas imagens para processar.
Dimensionar imagens é uma habilidade importante para quem cria ou mantém um site. Ele ajuda a tornar os sites lentos mais rápidos e oferece outros benefícios de desempenho. A especificação de imagem correta melhorará a velocidade de qualquer site.
Se você gostou de ler este artigo sobre como veicular imagens em escala no WordPress, confira este artigo sobre como tornar um número de telefone clicável no WordPress.
Também escrevemos sobre alguns assuntos relacionados, como incorporar um vídeo do Facebook no WordPress, como excluir temas do WordPress, como verificar se há malware no banco de dados do WordPress, como fazer upload de um arquivo HTML no WordPress, como fazer uma limpeza do banco de dados do WordPress, como encontrar e substituir um URL em um banco de dados WordPress e como ocultar o autor no WordPress