Servi immagini correttamente ridimensionate sul tuo sito Web WordPress o Joomla

Scatta qualsiasi immagine sul tuo blog WordPress o Joomla. Se valuti la qualità, le probabilità sono che l'immagine sia sufficientemente grande da ridimensionarla per adattarsi ai dispositivi desktop dei tuoi lettori, per non parlare dei dispositivi mobili. La qualità è buona e buona, ma casi come questo hanno un prezzo elevato.

Per ospitare il maggior numero possibile di schermi diversi con una singola immagine, devi usarne uno grande. A sua volta, ciò si traduce in file di grandi dimensioni che devono essere scaricati nella loro interezza anche su piccoli dispositivi. Esiste una soluzione: pubblicare immagini ridimensionate in base al dispositivo di visualizzazione, desktop, tablet o mobile.

Elaborazione di immagini in scala su WordPress e Joomla con CSS

Quanto spazio occupano le immagini nelle pagine Web? Non ci sono regole rigide e veloci, ma considerando la loro importanza e ubiquità, la risposta è sicuramente molto. Se stai offrendo immagini che finirai per riscalare comunque, ha senso solo essere economico e servire i tuoi utenti WordPress o Joomla con immagini che sono già ridimensionate per accelerare i tempi di caricamento del tuo sito web.

CSS è lì per aiutare con un insieme di attributi relativamente sconosciuti, ma inestimabili: srcset , dimensioni e media . Questi attributi, tutti supportati dalla maggior parte dei browser Web moderni, ti consentono di specificare quali versioni di immagini utilizzare in base alle dimensioni del viewport.

Il srcset completa la solita scheda src . Come suggerisce il nome dell'attributo, invece di specificare una singola immagine, la usi per specificare un elenco di immagini ridimensionate e la larghezza quando ciascuna dovrebbe essere utilizzata. Utilizzato insieme ad esso è l' attributo size , 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 è sbalorditivo: un'immagine verticale con 511 KB viene ridotta a 42 KB 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.