Offri immagini ridimensionate correttamente sul tuo sito Web WordPress o Joomla

Prendi qualsiasi immagine sul tuo blog WordPress o Joomla. Se valuti la qualità, è probabile che l'immagine sia abbastanza grande da dover essere ridimensionata per adattarsi ai dispositivi desktop dei tuoi lettori, per non parlare dei dispositivi mobili. La qualità è buona, ma casi come questo hanno un prezzo elevato.

Per ospitare il maggior numero possibile di display diversi con una singola immagine, è necessario utilizzarne uno grande. Ciò si traduce a sua volta in file di grandi dimensioni che devono essere scaricati integralmente anche su dispositivi di piccole dimensioni. Una soluzione c'è: servire immagini scalate a seconda del dispositivo di visualizzazione, che sia desktop, tablet o mobile.

Elaborazione di immagini in scala su WordPress e Joomla con CSS

Quanto spazio occupano le immagini nelle pagine web? Non esistono regole ferree, ma considerando la loro importanza e ubiquità, la risposta è sicuramente molta. Se offri immagini che finirai per ridimensionare comunque, ha senso essere economico e servire i tuoi utenti WordPress o Joomla con immagini già ridimensionate per accelerare i tempi di caricamento del tuo sito web.

I CSS sono lì per aiutare con una serie di attributi relativamente sconosciuti, ma di inestimabile valore: srcset , sizes e media . Questi attributi, tutti supportati dalla maggior parte dei browser Web moderni, ti consentono di specificare quali versioni di immagine servire in base alla dimensione del viewport.

Il srcset integra la solita src . Come suggerisce il nome dell'attributo, invece di specificare una singola immagine, lo usi per specificare un elenco di immagini in scala e la larghezza in cui ciascuna deve essere utilizzata. Utilizzato insieme ad esso è l' sizes , con il quale puoi definire quando mostrare le immagini in base alla larghezza del viewport.

Puoi leggere di più su questi attributi qui , ma la buona notizia è che negli ultimi anni WordPress ridimensiona automaticamente le tue immagini e offre le dimensioni appropriate ai tuoi lettori. Il risultato è sconcertante: un'immagine ritratto da 511Kb viene ridotta a 42Kb sui dispositivi mobili.

Ridimensionamento automatico e ottimizzazione con ImageRecycle

Quando si tratta di dimensioni delle immagini, più piccole sono, meglio è, purché la qualità non sia compromessa. Sebbene WordPress ti aiuti utilizzando srcset , puoi fare di più per ridurre al minimo le dimensioni delle immagini, in particolare ridimensionando e comprimendo le immagini.

ImageRecycle è un plugin che può riscalare e comprimere simultaneamente le immagini per te ed è disponibile sia su WordPress che su Joomla. ImageRecycle , puoi usare ImageRecycle per ridimensionare e comprimere le immagini automaticamente.

Il ridimensionamento è particolarmente utile se ti ritrovi a utilizzare immagini stock nel tuo blog WordPress o Joomla. Queste immagini sono spesso sproporzionatamente grandi per tenere conto di tutti gli usi, compresi i supporti di stampa. Sul Web, è altamente improbabile che tu abbia mai bisogno di utilizzare l'intera risoluzione. Con ImageRecycle, puoi ridimensionare automaticamente le immagini di grandi dimensioni a un'altezza o larghezza massima al momento del caricamento.

Il complemento del ridimensionamento è la compressione, che ottimizza le dimensioni dell'immagine senza sacrificare la qualità. Con la compressione con perdita, puoi ridurre lo spazio dell'immagine fino all'80%. Questo vale non solo per le immagini originali, ma anche per le immagini ridimensionate da WordPress. Ancora una volta, ImageRecycle può farlo automaticamente per te.

Quello che vedi come pochi kilobyte in più può significare tempo prezioso perso per i tuoi lettori. La buona notizia è che non devi sacrificare la qualità per i tempi di caricamento. Con un utilizzo più intelligente di CSS e il ridimensionamento e l'ottimizzazione di ImageRecycle, puoi ottenere immagini di alta qualità che si adattano ai dispositivi dei tuoi lettori.