Imagem responsiva do Joomla usando srcset e compactação

Otimização? Verificar. Lazy loading ? Verifique novamente. Ainda assim, seu Joomla! o site parece desajeitado 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 da imagem ou o srcset .

Talvez o seu Joomla! o blog usa imagens de alta qualidade e você simplesmente não pode - ou não quer - acabar com elas. Isso não é motivo de preocupação. Com o plugin Droppics do Joomla !, você pode aplicar não apenas a otimização geral das imagens, mas também servir arquivos diferentes, dependendo dos dispositivos dos usuários.

Imagens responsivas com srcset HTML

Se você já se interessou por HTML, saberá que as imagens são definidas por um atributo de origem — src . A fonte da imagem é o local de onde os navegadores carregam as imagens para exibir no seu Joomla! Usuários. O problema de usar uma fonte consistente para uma imagem específica é que o mesmo arquivo sempre será carregado, não importa o tamanho.

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

Como o nome indica, o conjunto de fontes é uma lista de fontes, em vez de uma única fonte. Cada fonte é associada a uma largura do navegador para que os dispositivos móveis baixem imagens pequenas e usuários acessando o seu Joomla! blog de desktops faça o download da imagem em alta resolução. Em outras palavras, o srcset da imagem transforma imagens em imagens responsivas.

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

Servindo Imagens em Escala no Joomla! com Droppics

Você pode conhecer o Droppics simplesmente como um Joomla! extensão do gerenciador de galeria, mas há muita coisa acontecendo nos bastidores que você pode não estar ciente. Caso em questão: Droppics agora está usando o conjunto de fontes para carregar as imagens certas para seus usuários. Se você não conhece esse recurso, é possível que também não o esteja explorando.

Para usar o atributo srcset em seu Joomla! blog, primeiro você precisa ativá-lo através da configuração do Droppics. Vá até a 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 diz a dica de ferramenta da opção de imagens responsivas imagem que você tem. Essas miniaturas são as próprias imagens responsivas, que são renderizadas dependendo do dispositivo usado para acessar seu Joomla! blog.

Quando você cria uma postagem e insere uma imagem Droppics, a extensão define automaticamente o srcset para você. Não acredite em nós? Inspecione o HTML no frontend e você encontrará várias fontes para diferentes tamanhos de dispositivos.

A otimização geral é muito boa, assim como o lazy loading, mas às vezes, não há muito o que fazer. Em alguns casos, usar a técnica HTML moderna de fornecer conjuntos de fontes de imagens, em vez de fontes singulares, pode ser a chave para superar os tempos de carregamento lentos.

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

Compactar imagens srcset no Joomla!

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

ImageRecycle também está disponível no Joomla! e você pode integrá-lo perfeitamente com Droppics. Na verdade, você pode até configurá-lo para compactar automaticamente seu Joomla! imagens definidas de origem imediatamente quando são geradas. Você pode economizar até 80% com perda, ou melhor economia, compactação e até 20% com compactação sem perdas ou original. Você pode ler mais sobre a diferença aqui .

Você pode configurar ImageRecycle para compactar imagens automaticamente acessando a configuração da extensão no Joomla! A partir daí, vá para a avançada e ative a otimização de mídia ao salvar . Alternativamente, você pode escolher manualmente quais imagens otimizar por meio da interface do ImageRecycle

O tempo de carregamento é um problema multifacetado. Você precisa minimizar simultaneamente o tamanho dos arquivos, mantendo a qualidade e economizando espaço de armazenamento. Com o conjunto de fontes mágico do Droppics e a compactação do ImageRecycle, tudo isso não só é possível, mas também pode ser um processo fácil e automatizado.