Pubblica immagini correttamente ridimensionate sul tuo sito web WordPress o Joomla

Prendi un'immagine qualsiasi dal tuo blog WordPress o Joomla. Se valuti la qualità, è probabile che l'immagine sia così grande da dover essere ridimensionata per adattarla ai dispositivi desktop dei tuoi lettori, figuriamoci ai dispositivi mobili. La qualità è un bene, ma casi come questo hanno un prezzo elevato.

Per adattare un'unica immagine al maggior numero possibile di display diversi, è necessario utilizzarne una di grandi dimensioni. Questo si traduce in file di grandi dimensioni che devono essere scaricati integralmente anche su dispositivi di piccole dimensioni. Esiste una soluzione: fornire immagini ridimensionate in base al dispositivo di visualizzazione, che sia desktop, tablet o mobile.

Fornire immagini ridimensionate su WordPress e Joomla con CSS

Quanto spazio occupano le immagini nelle pagine web? Non ci sono regole fisse, ma considerando la loro importanza e onnipresenza, la risposta è sicuramente molto. Se offri immagini che comunque dovrai ridimensionare, conviene risparmiare e offrire ai tuoi utenti WordPress o Joomla immagini già ridimensionate per velocizzare i tempi di caricamento del tuo sito web.

CSS è qui per aiutarti con una serie di attributi relativamente sconosciuti, ma preziosi: srcset , sizes e media . Questi attributi, tutti supportati dalla maggior parte dei browser web moderni, consentono di specificare quali versioni dell'immagine servire a seconda delle dimensioni del viewport.

L' attributo srcset integra la consueta src . Come suggerisce il nome, invece di specificare una singola immagine, viene utilizzato per specificare un elenco di immagini ridimensionate e la larghezza in cui ciascuna deve essere utilizzata. Insieme a questo, viene utilizzato l' sizes , con cui è possibile definire quando visualizzare le immagini in base alla larghezza della finestra.

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

Ridimensionamento e ottimizzazione automatici con ImageRecycle

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

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

Il ridimensionamento è particolarmente utile se utilizzi immagini stock nel tuo blog WordPress o Joomla. Queste immagini sono spesso sproporzionatamente grandi per tutti gli usi, inclusa la stampa. Sul web, è altamente improbabile che tu debba mai utilizzare la loro intera risoluzione. Con ImageRecycle, puoi ridimensionare automaticamente le immagini di grandi dimensioni fino a raggiungere l'altezza o la larghezza massima al momento del caricamento.

A complemento del ridimensionamento c'è la compressione, che ottimizza le dimensioni dell'immagine senza sacrificarne la qualità. Con la compressione con perdita di dati, è possibile ridurre lo spazio occupato dalle immagini fino all'80%. Questo vale non solo per le immagini originali, ma anche per quelle ridimensionate da WordPress. Anche in questo caso, ImageRecycle può farlo automaticamente per voi.

Ciò che per te è solo qualche kilobyte in più può significare una perdita di tempo prezioso 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 delle funzionalità di ridimensionamento e ottimizzazione di ImageRecycle, puoi ottenere immagini di alta qualità che si adattano ai dispositivi dei tuoi lettori.