Immagine reattiva Joomla utilizzando srcset e compressione

Ottimizzazione? Controllata. Lazy loading ? Controlla di nuovo. Eppure, il tuo sito Joomla! sembra macchinoso e impiega troppo tempo a caricarsi su dispositivi mobili e connessioni lente. Non disperare: è qui che la struttura HTML torna utile; più precisamente, i set di origine delle immagini, o l' srcset .

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

Immagini responsive con HTML srcset

Se hai mai avuto a che fare con l'HTML, saprai che le immagini sono definite da un attributo sorgente: src . La sorgente dell'immagine è la posizione da cui i browser caricano le immagini da mostrare agli utenti Joomla!. Il problema nell'utilizzare una sorgente coerente per una particolare immagine è che verrà sempre caricato lo stesso file, indipendentemente dalle sue dimensioni.

Ad esempio, se si dispone di un banner principale in cima a 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, è possibile 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 sorgenti, anziché una singola sorgente. Ogni sorgente è associata a una larghezza del browser, in modo che i dispositivi mobili scarichino immagini di piccole dimensioni e gli utenti che accedono al tuo blog Joomla! da desktop scarichino l'immagine ad alta risoluzione. In altre parole, l'image srcset trasforma le immagini in immagini responsive.

Il risultato dell'utilizzo di set di sorgenti non è solo tempi di caricamento più rapidi, ma anche punteggi SEO migliori. Tutto questo al 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 non vedi l'ora di iniziare a usarli sul tuo blog Joomla!, continua a leggere.

Fornire immagini ridimensionate su Joomla! con Droppics

Forse conosci Droppics semplicemente come un'estensione per la gestione delle gallerie di Joomla!, ma dietro le quinte si celano molte altre funzionalità di cui potresti non essere a conoscenza. Un esempio concreto: Droppics ora utilizza il set di sorgenti per caricare le immagini giuste per i tuoi utenti. Se non conosci questa funzionalità, è possibile che tu non la stia sfruttando.

Per utilizzare l'attributo srcset sul tuo blog Joomla!, devi prima attivarlo tramite la configurazione di Droppics. Vai alla dei parametri principali nelle opzioni di Droppics e abilita le immagini responsive tra le prime opzioni. Salva le modifiche per applicare le nuove impostazioni.

Come Immagini Reattive , abilitando l'impostazione Droppics crea due nuove miniature per ogni immagine Joomla! in tuo possesso. Queste miniature sono le immagini responsive stesse, che vengono visualizzate a seconda del dispositivo utilizzato per accedere al tuo blog Joomla!.

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

L'ottimizzazione generale è una cosa buona e giusta, così come lazy loading, ma a volte non si può fare molto. In alcuni casi, utilizzare la moderna tecnica HTML di fornire set di sorgenti di immagini, invece di singole sorgenti, potrebbe essere la chiave per superare i tempi di caricamento lenti.

Ma aspetta, non è tutto. Manca ancora un tassello al puzzle.

Comprimi le immagini srcset su Joomla!

Potresti chiederti se valga la pena avere più copie della stessa immagine. Forse vuoi risparmiare spazio sul server o temi che le nuove immagini si accumulino. Il fatto che tu stia utilizzando il set sorgente 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. Puoi persino configurarlo per comprimere automaticamente le immagini del tuo set sorgente Joomla! non appena vengono generate. Puoi risparmiare fino all'80% con la compressione lossy, o "best saving", e fino al 20% con la compressione lossless, o "original". Puoi saperne di più sulle differenze qui .

Puoi impostare ImageRecycle per comprimere automaticamente le immagini accedendo alla configurazione dell'estensione in Joomla!. Da lì, vai alla Avanzate e abilita l'opzione "Ottimizza i 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 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ò anche essere un processo semplice e automatizzato.