Servir imagens adequadamente dimensionadas em seu site WordPress ou Joomla

Tire qualquer imagem em seu blog WordPress ou Joomla. Se você avalia a qualidade, é provável que a imagem seja grande o suficiente para ser reduzida para caber nos dispositivos de mesa dos seus leitores, quanto mais nos dispositivos móveis. A qualidade é ótima e boa, mas casos como esse custam caro.

Para acomodar o maior número possível de telas com uma única imagem, é necessário usar uma grande. Por sua vez, isso se traduz em arquivos grandes que precisam ser baixados na íntegra, mesmo em dispositivos pequenos. Existe uma solução: exibir imagens dimensionadas dependendo do dispositivo de exibição, seja desktop, tablet ou celular.

Servindo imagens em escala no WordPress e Joomla com CSS

Quanto espaço as imagens ocupam nas páginas da web? Não existem regras rígidas e rápidas, mas, considerando sua importância e onipresença, a resposta é definitivamente grande. Se você estiver exibindo imagens que acabarão sendo redimensionadas de qualquer maneira, faz sentido ser econômico e servir aos usuários do WordPress ou Joomla com imagens já reduzidas para acelerar o tempo de carregamento do site.

CSS existe para ajudar com um conjunto de atributos relativamente desconhecidos, mas inestimáveis: o srcset , tamanhos e mídia . Esses atributos, todos suportados pela maioria dos navegadores da Web modernos, permitem especificar quais versões de imagem devem ser veiculadas, dependendo do tamanho da janela de visualização.

O srcset complementa a guia src usual . Como o nome do atributo indica, em vez de especificar uma única imagem, você o usa para especificar uma lista de imagens em escala e a largura quando cada uma deve ser usada. Usado em conjunto com ele é o atributo de tamanhos , com o qual você pode definir quando mostrar imagens com base na largura da janela de visualização.

Você pode ler mais sobre esses atributos aqui , mas a boa notícia é que, nos últimos anos, o WordPress redimensiona automaticamente suas imagens e exibe os tamanhos apropriados para seus leitores. O resultado é surpreendente: uma imagem de retrato com 511 KB é reduzida para 42 KB em dispositivos móveis.

Reescalonamento automático e otimização com ImageRecycle

Quando se trata de tamanhos de imagem, quanto menor melhor, desde que a qualidade não seja comprometida. Embora o WordPress ajude você a usar srcset , você pode fazer mais para minimizar os tamanhos das imagens, principalmente redimensionando e compactando as imagens.

ImageRecycle é um plug-in que pode redimensionar e compactar imagens simultaneamente para você e está disponível no WordPress e no Joomla. Melhor de tudo, você pode usar ImageRecycle para redimensionar e compactar imagens automaticamente.

O reescalonamento é especialmente útil se você estiver usando imagens de banco de imagens em seu blog WordPress ou Joomla. Essas imagens costumam ser desproporcionalmente grandes para atender a todos os usos, incluindo mídia impressa. Na web, é altamente improvável que você precise usar toda a resolução. Com ImageRecycle , você pode redimensionar automaticamente imagens grandes para uma altura ou largura máxima ao fazer o upload.

Complementando o reescalonamento está a compressão, que otimiza o tamanho da imagem sem sacrificar a qualidade. Com a compactação com perdas, você pode reduzir o espaço da imagem em até 80%. Isso se aplica não apenas às imagens originais, mas também às imagens redimensionadas pelo WordPress. Mais uma vez, ImageRecycle pode fazer isso automaticamente para você.

O que você vê como alguns kilobytes extras pode significar um precioso tempo perdido para seus leitores. A boa notícia é que você não precisa sacrificar a qualidade pelos tempos de carregamento. Com o uso mais inteligente de CSS e redimensionamento e otimização de ImageRecycle , você pode ter imagens de alta qualidade que se adaptam aos dispositivos de seus leitores.