Sirva imagens em escala adequada 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 tantos monitores diferentes quanto possível com uma única imagem, você deve usar uma tela grande. Por sua vez, isso se traduz em arquivos grandes que precisam ser baixados integralmente, mesmo em dispositivos pequenos. Existe uma solução: veicular imagens dimensionadas de acordo com o 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 muita. Se você estiver servindo imagens que acabará sendo redimensionadas de qualquer maneira, só faz sentido ser econômico e servir aos usuários do WordPress ou Joomla imagens que já foram reduzidas para acelerar o tempo de carregamento do seu site.

CSS está lá 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 modernos — permitem especificar quais versões de imagem serão veiculadas, dependendo do tamanho da janela de visualização.

O srcset complementa a src . Como o nome do atributo indica, em vez de especificar uma única imagem, você o utiliza para especificar uma lista de imagens dimensionadas e a largura quando cada uma deve ser usada. Usado em conjunto com ele está o 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 fornece os tamanhos apropriados aos seus leitores. O resultado é surpreendente: uma imagem retrato com 511Kb é reduzida para 42Kb em dispositivos móveis.

Redimensionamento e otimização automáticos 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ê usando srcset , há mais que você pode fazer para minimizar o tamanho das imagens, principalmente redimensionando e compactando imagens.

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

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

Complementando o reescalonamento está a compactaçã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 uma perda de tempo preciosa 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 do ImageRecycle, você pode ter imagens de alta qualidade que se adaptam aos dispositivos dos seus leitores.