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 vem a calhar; 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 HTML srcset

Se você já se interessou pelo HTML, saberá que as imagens são definidas por um atributo source— src . A fonte da imagem é o local de onde os navegadores carregam as imagens para exibir no seu Joomla! Comercial. 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 de herói 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 oculta que você talvez não saiba. Caso em questão: o Droppics agora está usando o conjunto de fontes para carregar as imagens corretas para seus usuários. Se você não conhece esse recurso, talvez seja possível que você 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á para a parâmetros principais nas opções do Droppics e ative as imagens responsivas entre as primeiras opções. Salve as alterações para confirmar as novas configurações.

Como a imagens responsivas lhe diz, ao ativar a configuração Droppics cria duas novas miniaturas para cada Joomla! 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 do 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.

Comprima imagens 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 tenha medo de que as novas imagens sejam empilhadas. Só porque você está usando o conjunto de fontes, isso não significa que você não pode 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 automaticamente as imagens acessando a configuração da extensão no Joomla! A partir daí, vá para a guia avançada a otimização de mídia ao salvar . Como alternativa, 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 do Droppics mágico e compactação do ImageRecycle , não só isso é possível, mas pode ser um processo fácil e automatizado.