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” nella struttura del sito web. PPI, ovvero pixel per pollice e DPI, ovvero punti per pollice, non hanno alcuna rilevanza quando modifichi o ridimensioni la tua immagine per scopi come l'invio di e-mail, il blog o la condivisione sui social media. Ad eccezione della stampa, visualizzata sullo schermo, non sarai in grado di fare alcuna differenziazione in termini di caratteristiche 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 utilizzando Photoshop al livello di qualità: 60% |
80% | 90% | 100% Quindi ho ottimizzato le immagini utilizzando ImageRecycle , ecco il risultato delle dimensioni. Per quanto riguarda la qualità il 90/100% è leggermente migliore degli altri 2. La lezione qui è: esporta le tue immagini jpg meno compresse 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 è tipicamente 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 e FINALI. Non fidarti delle librerie online e del generatore di cache altrimenti potresti avere problemi di qualità e dimensioni. Se la tua immagine originale è già ottimizzata dalla tua parte (effettuando una regolazione fine 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 all'immagine visualizzata sul browser del client finale. Puoi farlo manualmente su ciascuna immagine e per ciascuna dimensione oppure utilizzare la nostra estensione API o CMS di ImageRecycle per selezionare la cartella in cui sono archiviate le 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 progettazione reattiva che includono query multimediali consentono ai web designer di adattare il layout di un sito a un'ampia gamma di dispositivi, dai desktop agli smartphone, e di farlo apparire costantemente nitido. Il problema qui non è il display ma le prestazioni, si tratta dell'immagine del desktop che viene visualizzata e caricata su smartphone e tablet.

IL L'elemento HTML5 sta cercando di risolvere questo problema. Il vantaggio derivante dalla risorsa immagine ottimizzata in modo nativo è il tempo di caricamento, particolarmente importante per gli utenti con connessioni Internet mobili più lente. IL element rende possibile un vero e proprio ridimensionamento dinamico semplicemente dando un'istruzione HTML al browser.

Estratto di codice:

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