Imagem responsiva no Joomla usando srcset e compressão

Otimização? Feito. Lazy loading ? Feito novamente. Mesmo assim, seu site Joomla! parece pesado e demora muito para carregar em dispositivos móveis e conexões lentas. Não se desespere — é aí que a estrutura HTML se torna útil; mais precisamente, os conjuntos de origem de imagem, ou o srcset .

Talvez seu blog Joomla! utilize imagens de alta qualidade e você simplesmente não consiga — ou não queira — se desfazer delas. Não há motivo para preocupação. Com o plugin Droppics do Joomla!, você pode aplicar não apenas uma otimização geral para imagens, mas também exibir arquivos diferentes dependendo do dispositivo do usuário.

Imagens responsivas com srcset HTML

Se você já mexeu com HTML, sabe que as imagens são definidas por um atributo de origem — src . A origem da imagem é o local de onde os navegadores carregam as imagens para exibir aos usuários do Joomla!. O problema de usar uma origem consistente para uma imagem específica é que o mesmo arquivo será sempre carregado, independentemente do seu tamanho.

Por exemplo, se você tiver um banner principal no topo de um artigo, a mesma imagem será carregada em todos os dispositivos. Os navegadores baixam a imagem e a redimensionam, às vezes drasticamente, especialmente em dispositivos móveis. Com os navegadores modernos, você pode definir não apenas uma origem para imagens, mas um conjunto de origens — o conjunto de origens ` srcset` .

Como o nome indica, o conjunto de fontes (source set) é uma lista de fontes, em vez de uma única fonte. Cada fonte está associada à largura do navegador, de forma que dispositivos móveis baixem imagens pequenas e usuários que acessam seu blog Joomla! em computadores baixem a imagem em resolução total. Em outras palavras, o conjunto de fontes de imagem (srcset) transforma imagens em imagens responsivas.

O resultado do uso de conjuntos de fontes não se limita a tempos de carregamento mais rápidos, mas também a melhores pontuações de SEO. Tudo isso com o pequeno custo de ter cópias da mesma imagem em diferentes resoluções, prontamente disponíveis para quando os usuários precisarem. Você pode ler mais sobre o srcset e tudo relacionado a conjuntos de fontes aqui , mas se você está ansioso para começar a usá-los em seu blog Joomla!, continue lendo.

Exibindo imagens redimensionadas no Joomla! com Droppics

Você pode conhecer o Droppics simplesmente como uma extensão de gerenciamento de galerias para Joomla!, mas muita coisa acontece nos bastidores que você talvez desconheça. Por exemplo: o Droppics agora utiliza o conjunto de fontes para carregar as imagens corretas para seus usuários. Se você desconhece esse recurso, é possível que também não o esteja utilizando.

Para usar o atributo srcset no seu blog Joomla!, primeiro você precisa ativá-lo nas configurações do Droppics. Acesse a de parâmetros principais nas opções do Droppics e habilite imagens responsivas entre as primeiras opções. Salve as alterações para confirmar as novas configurações.

Como explica a dica de ferramenta da opção de imagens responsivas

Ao criar uma publicação e inserir uma imagem do Droppics, a extensão define automaticamente o atributo srcset para você. Não acredita? Inspecione o HTML no front-end e você encontrará várias fontes para diferentes tamanhos de tela.

A otimização geral é ótima e lazy loadingé sempre bem-vindo, mas, às vezes, essas práticas têm seus limites. Em alguns casos, usar a técnica moderna de HTML de fornecer conjuntos de imagens de origem, em vez de fontes individuais, pode ser a solução para superar os tempos de carregamento lentos.

Mas espere, isso não é tudo. Ainda falta uma peça neste quebra-cabeça.

Comprima imagens com srcset no Joomla!

Você pode estar se perguntando se vale a pena ter várias cópias da mesma imagem. Talvez você queira economizar espaço no servidor ou tema que as novas imagens se acumulem. Só porque você está usando o conjunto de imagens original, não significa que não possa combiná-lo com outras técnicas de otimização, como a compressão.

ImageRecycle também está disponível no Joomla! e você pode integrá-lo perfeitamente ao Droppics. Na verdade, você pode até configurá-lo para comprimir automaticamente as imagens do seu conjunto de imagens do Joomla! assim que forem geradas. Você pode economizar até 80% com compressão com perda (ou melhor economia de dados) e até 20% com compressão sem perda (ou original). Você pode ler mais sobre a diferença aqui .

Você pode configurar ImageRecycle para comprimir imagens automaticamente acessando as configurações da extensão no Joomla!. Lá, vá até a "Avançado" e habilite a opção "Otimizar mídia ao salvar" . Como alternativa, você pode escolher manualmente quais imagens otimizar através da interface do ImageRecycle

O tempo de carregamento é um problema multifacetado. É preciso minimizar o tamanho dos arquivos, mantendo a qualidade e economizando espaço de armazenamento. Com o conjunto de imagens de origem do Droppics e a compressão do ImageRecycle, isso não só é possível, como também pode ser um processo fácil e automatizado.