Ridimensionamento e ottimizzazione delle immagini online

Se hai un gruppo di immagini fantastiche, sono sicuro che ti piacerebbe condividerle con i tuoi clienti sul tuo sito web. Puoi creare una bella presentazione, gallerie o semplicemente inserire un'immagine in una singola pagina o nel tuo blog. Qualunque opzione tu scelga, ci sarà una difficoltà che incontrerai con un editor di contenuti non specializzato: il ridimensionamento delle immagini.

Di seguito alcuni consigli utili per ridimensionare le immagini.

Adatta le dimensioni al tuo contenuto

Ridimensiona sempre le immagini in base alle dimensioni del contenuto o alla sua larghezza. Ad esempio, se l'area del contenuto è limitata a 650 pixel di larghezza, non è necessario ridimensionare l'immagine oltre i 650 pixel, poiché la pagina verrà visualizzata solo fino a 650 pixel. Se la dimensione dell'immagine è inferiore o superiore a quella del contenitore, la qualità di visualizzazione sarà inferiore.

Adattare la risoluzione dell'immagine per il web

Non ci sarà alcuna indicazione di "per pollice" in nessuna struttura di un sito web. PPI, ovvero pixel per pollice, e DPI, ovvero punti per pollice, non hanno alcuna rilevanza quando si modifica o si ridimensiona un'immagine per scopi come l'invio tramite e-mail, la pubblicazione su blog o la condivisione sui social media. Ad eccezione della stampa, la visualizzazione su schermo non consentirà alcuna differenza nelle caratteristiche o nella qualità dell'immagine.

Questo vale soprattutto per i PDF : evitate di rendere disponibili per la lettura sul web PDF contenenti immagini con risoluzione superiore a 72 dpi. In questo caso, l' ImageRecycle può aiutarvi: ottimizzando un PDF con immagini a 300 dpi al suo interno, potrete risparmiare il 98% delle dimensioni del PDF, mantenendo una qualità perfetta per la lettura sul web.

La migliore qualità di esportazione JPG con ImageRecycle

Utilizzando Photoshop, la raccomandazione per il web è di salvare le immagini JPEG con una compressione massima del 20%. È anche possibile effettuare delle prove con diverse proprietà JPEG, quella che funziona meglio per voi. Applicare una compressione globale è una questione di equilibrio tra dimensioni e qualità.

Ora, con l'algoritmo di ottimizzazione delle immagini ImageRecycle , il processo è completamente diverso. ImageRecycle rileva il rapporto di compressione corrente dell'immagine e, in base a questo, la ottimizza. Poiché la compressione non viene applicata all'intera immagine, rimarrete davvero stupiti dal test riportato di seguito.

Tieni presente che quanto meno l'immagine originale è compressa, tanto migliori saranno l'ottimizzazione e le dimensioni.

Nell'esempio seguente ho esportato 4 immagini jpg usando Photoshop con i seguenti livelli di qualità: 60% | 80% | 90% | 100%.
Poi ho ottimizzato le immagini usando ImageRecycle , ecco il risultato in termini di dimensioni. Per quanto riguarda la qualità, il 90/100% è leggermente migliore degli altri 2. La lezione da imparare è: esporta le tue immagini jpg il meno compresse possibile, ImageRecycle farà il resto!

Ottimizzare le immagini finali

A seconda del sito web che gestisci, le stesse immagini possono essere visualizzate su pagine diverse con dimensioni diverse. Questo è in genere qualcosa che troverai su un e-commerce con slider, elenco prodotti, dettagli prodotto,...
Il processo di ridimensionamento viene solitamente eseguito da una libreria PHP online come GD. Assicurati della qualità e del peso delle tue immagini utente ORIGINALI rispetto a quelle FINALI. Non fidarti delle librerie online e del generatore di cache o potresti avere problemi di qualità e dimensioni. Se la tua immagine originale è già ottimizzata (regolando finemente qualità, colori, compressione) per risparmiare larghezza di banda e caricare la pagina, con alcune librerie di ridimensionamento delle estensioni web, potresti perdere tutto!

La soluzione:

• Applica l'ottimizzazione all'immagine visualizzata sul browser del tuo client finale. Puoi farlo manualmente su ogni immagine e per ogni dimensione, oppure utilizzare la nostra API o l'estensione CMS ImageRecycle per selezionare la cartella in cui sono archiviate le immagini finali. Quindi esegui l'ottimizzazione automatica.
• Utilizza il nostro ridimensionatore per le immagini originali. Puoi risparmiare spazio sul server, manipolare più velocemente le tue immagini e solitamente non hai bisogno di immagini con larghezza superiore a 1600px nella visualizzazione finale

Cosa c'è dopo: HTML5 e<picture> elemento

Le tecniche di responsive design, che includono le media query, consentono ai web designer di adattare il layout di un sito a un'ampia gamma di dispositivi, dai desktop agli smartphone, mantenendolo sempre impeccabile. Il problema qui non è la visualizzazione, ma le prestazioni: si tratta dell'immagine desktop visualizzata e caricata su smartphone e tablet.

IL<picture> L'elemento HTML5 sta cercando di risolvere questo problema. Il vantaggio di una risorsa immagine ottimizzata in modo nativo è il tempo di caricamento, particolarmente importante per gli utenti con connessioni Internet mobili lente.<picture> L'elemento rende possibile un reale ridimensionamento dinamico semplicemente fornendo un'istruzione HTML al browser.

Estratto del codice:

Il limite al momento è che per funzionare correttamente è necessaria una versione di Chrome molto recente (39) e un po' di codice JavaScript. In un prossimo futuro, con questa tecnologia associata a un ottimizzatore di immagini, potremo aspettarci tempi di caricamento ottimali per i siti web.