Exiba imagens com a escala correta em seu site WordPress ou Joomla

Considere qualquer imagem no seu blog WordPress ou Joomla. Se você prioriza a qualidade, é bem provável que a imagem seja grande o suficiente para precisar ser redimensionada para caber nos computadores dos seus leitores, quanto mais em dispositivos móveis. Qualidade é importante, mas casos como esse têm um preço alto.

Para que uma única imagem se adapte ao maior número possível de telas, é necessário usar uma imagem grande. Isso, por sua vez, resulta em arquivos grandes que precisam ser baixados na íntegra, mesmo em dispositivos pequenos. Existe uma solução: disponibilizar imagens redimensionadas de acordo com o dispositivo de exibição, seja ele computador, tablet ou celular.

Exibindo imagens redimensionadas no WordPress e Joomla com CSS

Quanto espaço as imagens ocupam em páginas da web? Não existem regras fixas, mas considerando sua importância e onipresença, a resposta é definitivamente muito. Se você está exibindo imagens que de qualquer forma serão redimensionadas, faz todo o sentido ser econômico e fornecer aos usuários do WordPress ou Joomla imagens já redimensionadas para acelerar o carregamento do seu site.

O CSS está aí para ajudar com um conjunto de atributos relativamente desconhecidos, mas valiosíssimos: srcset , sizes e media . Esses atributos — todos suportados pela maioria dos navegadores modernos — permitem especificar quais versões de imagem exibir, dependendo do tamanho da janela de visualização.

O `srcset` complementa a `src` . Como o nome sugere, em vez de especificar uma única imagem, você o utiliza para definir uma lista de imagens redimensionadas e a largura em que cada uma deve ser exibida. Em conjunto com ele, está o `sizes` , que permite definir quando as imagens devem ser mostradas com base na largura da viewport.

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 adequados para seus leitores. O resultado é impressionante: uma imagem em formato retrato com 511 KB é reduzida para 42 KB em dispositivos móveis.

Redimensionamento e otimização automáticos com ImageRecycle

Quando se trata de tamanho de imagem, quanto menor, melhor, desde que a qualidade não seja comprometida. Embora o WordPress ajude você com o atributo srcset , existem outras maneiras de minimizar o tamanho das imagens, principalmente redimensionando e comprimindo-as.

ImageRecycle é um plugin que pode redimensionar e comprimir imagens simultaneamente, e está disponível para WordPress e Joomla. O melhor de tudo é que você pode usar ImageRecycle para redimensionar e comprimir imagens automaticamente.

O redimensionamento é especialmente útil se você usa imagens de banco de imagens no seu blog WordPress ou Joomla. Essas imagens costumam ser desproporcionalmente grandes para todos os usos, inclusive para mídia impressa. Na web, é muito improvável que você precise usar a resolução total delas. Com ImageRecycle, você pode redimensionar automaticamente imagens grandes para uma altura ou largura máxima ao fazer o upload.

Complementando o redimensionamento, temos a compressão, que otimiza o tamanho da imagem sem sacrificar a qualidade. Com a compressão com perda, você pode reduzir o espaço ocupado pela 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ê considera alguns kilobytes extras pode significar tempo precioso perdido para seus leitores. A boa notícia é que você não precisa sacrificar a qualidade em prol da velocidade de carregamento. Com o uso inteligente de CSS e o redimensionamento e otimização do ImageRecycle, você pode ter imagens de alta qualidade que se adaptam aos dispositivos dos seus leitores.