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, creare gallerie o semplicemente inserire un'immagine in una singola pagina o blog. Qualunque opzione tu scelga, ci sarà una singola difficoltà che hai incontrato con un editor di contenuti non specializzato: il ridimensionamento dell'immagine.

Di seguito, alcuni consigli per il ridimensionamento delle immagini che ti saranno utili.

Adatta le dimensioni per adattarle ai tuoi contenuti

Ridimensiona sempre le tue immagini in base alle dimensioni del contenuto o alla larghezza del contenuto. 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 proprietà della dimensione dell'immagine è più piccola o più grande del contenitore, la qualità di visualizzazione sarà deteriorata.

Adatta la risoluzione dell'immagine per il web

Non ci sarà alcuna impressione di "per pollice" in nessuna struttura del sito web. PPI, ovvero pixel per pollice e DPI, ovvero punti per pollice, non ha alcuna rilevanza quando modifichi o ridimensioni la tua immagine per qualsiasi scopo come inviare e-mail, blog o per la condivisione sui social media. Fatta eccezione per la stampa, la visualizzazione su schermo non sarà in grado di fare alcuna differenziazione in termini di funzionalità o qualità dell'immagine.

Questo è particolarmente vero per il PDF , evitare di rendere disponibile PDF per la lettura web che contiene immagini con risoluzione superiore a 72 dpi. In questo caso l' ottimizzatore PDF di ImageRecycle può aiutare, ottimizzare un PDF con immagini da 300 dpi all'interno e puoi risparmiare il 98% della dimensione del pdf con una qualità perfetta per essere letto sul web.

La migliore qualità di esportazione JPG con ImageRecycle

Utilizzando Photoshop, la raccomandazione per il Web è di salvare le immagini JPEG con max. 20% di compressione. Puoi anche fare alcuni test con diverse virtù JPEG che funzionano meglio per te. L'applicazione di una compressione globale è una questione di equilibrio tra dimensioni e qualità.

Ora con l'algoritmo di ottimizzazione dell'immagine ImageRecycle , il processo è abbastanza diverso. ImageRecycle sta rilevando il rapporto di compressione dell'immagine corrente e, a questo proposito, ottimizza l'immagine. Poiché la compressione non viene applicata all'intera immagine, rimarrai davvero stupito dal muggito di prova.

Ricorda: meno l'immagine originale viene compressa, ottimizzazione e dimensioni migliori.

Nell'esempio qui sotto ho esportato 4 immagini jpg usando Photoshop a livello di qualità: 60% |
80% | 90% | 100% Poi ho ottimizzato le immagini usando ImageRecycle , ecco il risultato delle dimensioni. Riguardo alla qualità il 90/100% è leggermente migliore degli altri 2. La lezione qui è: esporta le tue immagini jpg il meno compresso possibile, ImageRecycle farà il resto!

Ottimizza le immagini finali

A seconda del sito Web che stai utilizzando, 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 di prodotti, dettagli del 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 ORIGINAL e FINAL. 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 dalla tua parte (effettuando una messa a punto tra qualità, colori, compressione) per risparmiare larghezza di banda e caricamento della pagina, con alcune librerie di ridimensionamento delle estensioni web, puoi perdere tutto questo!

La soluzione:

• Applica l'ottimizzazione sull'immagine che viene visualizzata sul tuo browser client finale. Puoi farlo manualmente su ogni immagine e per ogni dimensione o utilizzare la nostra API o l'estensione CMS di ImageRecycle per selezionare la cartella in cui sono archiviate le tue immagini finali. Quindi esegui l'ottimizzazione automatica su di esso.
• Usa il nostro resizer per immagini originali. Puoi salvare l'archiviazione del server, manipolare più velocemente le tue immagini e di solito non hai bisogno di un'immagine con una larghezza superiore a 1600px sul display finale

Quali sono le prospettive: HTML5 e i elemento

Le tecniche di responsive design che includono le media query consentono ai webdesigner di adattare il layout di un sito a un'ampia gamma di dispositivi, dai desktop agli smartphone, e renderlo sempre nitido. Il problema qui non è il display ma le prestazioni, questa è l'immagine desktop che viene visualizzata e caricata su smartphone e tablet.

Il 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 più lente. Il L'elemento rende possibile un ridimensionamento dinamico reale semplicemente fornendo un'istruzione HTML al browser.

Estratto di codice:

Il limite al momento è che questo richiede una versione di chrome molto recente (39) e alcuni JS per funzionare correttamente. In un prossimo futuro, con questa tecnologia associata a un ottimizzatore di immagini, possiamo aspettarci il meglio per il tempo di caricamento del sito web.