Immagine reattiva Joomla utilizzando srcset e compressione

Ottimizzazione? Controllo. Lazy loading ? Controlla di nuovo. Tuttavia, il tuo Joomla! il sito web sembra goffo e impiega troppo tempo per essere caricato su dispositivi mobili e connessioni lente. Non disperare: questo è quando la struttura HTML torna utile; più precisamente, i set di sorgenti dell'immagine o l' srcset .

Forse il tuo Joomla! blog utilizza immagini di alta qualità e non puoi, o non vuoi, eliminarle. Questo non è motivo di preoccupazione. Con il plugin Droppics di Joomla! puoi applicare non semplicemente un'ottimizzazione generale per le immagini, ma servire file diversi a seconda dei dispositivi degli utenti.

Immagini reattive con HTML srcset

Se ti sei mai dilettato con HTML, saprai che le immagini sono definite da un attributo sorgente src . L'origine dell'immagine è la posizione da cui i browser caricano le immagini da visualizzare sul tuo Joomla! utenti. Il problema con l'utilizzo di un'origine coerente per una particolare immagine è che lo stesso file verrà sempre caricato, indipendentemente dalle dimensioni.

Ad esempio, se hai un banner eroe nella parte superiore di un articolo, la stessa immagine verrà caricata su tutti i dispositivi. I browser scaricano l'immagine e poi la ridimensionano, a volte drasticamente, soprattutto sui dispositivi mobili. Con i browser moderni, puoi definire non solo una fonte per le immagini, ma un insieme di fonti: il set di fonti srcset .

Come suggerisce il nome, il set di sorgenti è un elenco di fonti, anziché una singola fonte. Ogni sorgente è associata a una larghezza del browser in modo che i dispositivi mobili scarichino piccole immagini e gli utenti accedano a Joomla! blog da desktop scarica l'immagine ad alta risoluzione. In altre parole, l'immagine srcset trasforma le immagini in immagini reattive.

Il risultato dell’utilizzo dei set di fonti non è solo tempi di caricamento più rapidi, ma anche punteggi SEO migliori. Tutto ciò ha il piccolo prezzo di avere copie della stessa immagine con risoluzioni diverse, prontamente disponibili quando gli utenti ne hanno bisogno. Puoi leggere di più sull'attributo srcset e su tutto ciò che riguarda i set di sorgenti qui , ma se sei impaziente di iniziare a usarli sul tuo Joomla! blog, continua a leggere.

Elaborazione di immagini in scala su Joomla! con Droppics

Potresti conoscere Droppics semplicemente come un Joomla! gallery manager, ma ci sono molte cose che accadono sotto il cofano di cui potresti non essere a conoscenza. Caso in questione: Droppics ora utilizza il set di origine per caricare le immagini giuste per i tuoi utenti. Se non sei a conoscenza di questa funzionalità, potrebbe essere possibile che neanche tu la stia sfruttando.

Per utilizzare l'attributo srcset sul tuo Joomla! blog, per prima cosa devi attivarlo tramite la tua configurazione Droppics. parametri principali Droppics e abilita le immagini reattive tra le prime opzioni. Salva le modifiche per confermare le nuove impostazioni.

Come ti dice il immagini reattive , abilitando l'impostazione Droppics crea due nuove miniature per ogni Joomla! immagine che hai. Queste miniature sono le stesse immagini reattive, che vengono visualizzate in base al dispositivo utilizzato per accedere al tuo Joomla! blog.

Quando crei un post e inserisci un'immagine Droppics, l'estensione imposta automaticamente srcset per te. Non ci credi? Esamina l'HTML nel frontend e troverai più fonti per diverse dimensioni di dispositivi.

L'ottimizzazione generale va benissimo, così come lo è il lazy loading, ma a volte possono fare solo così tanto. In alcuni casi, l'utilizzo della moderna tecnica HTML di fornire set di sorgenti di immagini, invece di sorgenti singole, potrebbe essere la chiave per superare i tempi di caricamento lenti.

Ma aspetta, non è tutto. C'è ancora un pezzo mancante nel puzzle.

Comprimi le immagini srcset su Joomla!

Potresti chiederti se vale la pena avere più copie della stessa immagine. Forse vuoi risparmiare spazio sul server o hai paura che le nuove immagini si accumulino. Solo perché stai usando il set di sorgenti, ciò non significa che non puoi combinarlo con altre tecniche di ottimizzazione, come la compressione.

ImageRecycle è disponibile anche su Joomla! e puoi integrarlo perfettamente con Droppics. In effetti, puoi persino configurarlo per comprimere automaticamente il tuo Joomla! le immagini del set sorgente immediatamente quando vengono generate. Puoi risparmiare fino all'80% con la compressione lossy o best saving e fino al 20% con la compressione lossless o originale. Puoi leggere di più sulla differenza qui .

Puoi impostare ImageRecycle per comprimere automaticamente le immagini andando alla configurazione dell'estensione in Joomla! Da lì, vai alla Avanzate e abilita l'ottimizzazione dei media al salvataggio . In alternativa, puoi scegliere manualmente quali immagini ottimizzare tramite l'interfaccia di ImageRecycle

I tempi di caricamento sono un problema dalle molteplici sfaccettature. È necessario ridurre al minimo le dimensioni dei file mantenendo allo stesso tempo la qualità e risparmiando spazio di archiviazione. Con il magico set di sorgenti di Droppics e la compressione di ImageRecycle, non solo tutto questo è possibile, ma può essere un processo semplice e automatizzato.