Immagine reattiva di Joomla usando 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! il blog utilizza immagini di alta qualità e non è possibile, o non si desidera, eliminarle. Questo non è motivo di preoccupazione. Con il plugin Droppics di Joomla! Puoi applicare non solo 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 di set di sorgenti non è solo tempi di caricamento più rapidi, ma anche punteggi SEO migliorati. Tutto questo al piccolo prezzo di avere copie della stessa immagine con risoluzioni diverse, prontamente disponibili per quando gli utenti ne hanno bisogno. Puoi leggere di più sull'attributo srcset e su tutto il resto relativo ai 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! estensione del gestore galleria, ma ci sono molte cose che succedono sotto il cofano di cui potresti non essere a conoscenza. Caso in questione: Droppics ora utilizza il set di sorgenti per caricare le immagini giuste per i tuoi utenti. Se non si è a conoscenza di questa funzione, è possibile che non la si 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 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 dispositivi di dimensioni diverse.

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 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 file multimediali durante il salvataggio . In alternativa, puoi scegliere manualmente quali immagini ottimizzare tramite ImageRecycle .

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