Share
Durante lo sviluppo o l'aggiornamento di un sito Web, alcuni dei tuoi obiettivi principali dovrebbero offrire un'esperienza utente ottimale e migliorare le conversioni del sito web, dal momento che queste due sfaccettature sono fondamentali per generare entrate e migliorare i profitti della tua azienda. Ma un problema che potresti scoprire è che mentre il tuo uso crescente delle immagini risulta in un design più accattivante, potrebbe influire negativamente sulle prestazioni del tuo sito web.
Oggi le immagini rappresentano oltre il 60% dei contenuti scaricati su una pagina Web, pertanto l'ottimizzazione delle immagini può comportare significativi miglioramenti delle prestazioni. Tuttavia, l'ottimizzazione delle immagini è sia un'arte che una scienza, che richiede un'attenta valutazione dei vari parametri e un delicato equilibrio tra contenuto, formato, qualità e dimensioni.
Sia che la tua applicazione web supporti immagini caricate dall'utente, che fornisci immagini statiche o che mostri le immagini del profilo dai social network, probabilmente devi manipolarle per adattarle alla grafica del tuo sito. In questo tutorial, esploreremo le funzionalità offerte dalla soluzione di gestione di immagini e video completa basata su cloud di Cloudinary. Vedrai come può aiutarti a ottimizzare le immagini e, in definitiva, a migliorare le prestazioni del tuo sito web.
I formati di immagine possono avere un impatto significativo sui tempi di caricamento. Tuttavia, determinare manualmente il formato ottimale e le impostazioni dell'encoder per ciascun contenuto dell'immagine può essere complesso e inefficiente.
Cloudinary determina e distribuisce dinamicamente ogni immagine nel formato più efficiente, in base al contenuto dell'immagine e al browser di visualizzazione. Le immagini possono essere caricate su Cloudinary in vari formati e convertite facilmente in altri formati. Ad esempio, può distribuire automaticamente le immagini come WebP su Chrome o JPEG-XR su Internet Explorer. In alcuni casi, è possibile selezionare PNG quando è necessario mantenere la trasparenza.
Ci sono molte ragioni per cui potresti voler cambiare il formato dell'immagine consegnato:
Per fornire immagini in un formato diverso, è sufficiente specificare il nuovo formato come estensione del file dell'URL di consegna. Quando si utilizzano gli SDK del cloud, è possibile specificare il nuovo formato come estensione del nome della risorsa o utilizzare il parametro format.
Esempio:
Guarda la demo.
Regola automaticamente la qualità della compressione
La regolazione precisa della qualità della compressione e le impostazioni di codifica possono ridurre in modo significativo le dimensioni dei file senza un notevole deterioramento della qualità visiva. Tuttavia, trovare le giuste impostazioni per ciascuna immagine è più complicato di quanto sembri.
Cloudinary automatizza le dimensioni del file rispetto a una decisione di trade-off di qualità. Gli algoritmi intelligenti di codifica e qualità di Cloudinary analizzano ogni immagine per trovare il bilanciamento ottimale e producono un'immagine percettivamente sottile riducendo al minimo le dimensioni del file. L'analisi di ogni immagine individualmente per trovare il livello di compressione ottimale e le impostazioni di codifica delle immagini consente una regolazione precisa del livello di compressione completata dalla messa a punto delle impostazioni di codifica e può ridurre significativamente le dimensioni del file senza alcun degrado visibile all'occhio umano.
Esempio:
 |  |
Guarda la demo.
Puoi vedere la trasformazione dell'immagine qui.
La consegna di immagini di dimensioni superiori alle dimensioni di visualizzazione richieste utilizza larghezza di banda non necessaria e rallenta il carico della pagina. Ma la creazione manuale di più versioni di ogni immagine per adattarsi a varie risoluzioni dello schermo può richiedere molte risorse. Cloudinary consente di ridimensionare dinamicamente la risoluzione dell'immagine per offrire la versione ottimale che corrisponde alla risoluzione del dispositivo dell'utente e alle dimensioni del viewport, senza fornire pixel non necessari.
Inoltre, le immagini richiedono spesso il ritaglio per adattarsi a layout reattivi e dimensioni diverse del dispositivo. L'algoritmo di ritaglio basato sul contenuto di Cloudinary utilizza una combinazione di metodi euristici per rilevare automaticamente la regione di interesse in ogni immagine e quindi ritagliarla al volo.
Queste funzionalità di ritaglio intelligenti assicurano che l'obiettivo di ciascuna immagine sia incluso nell'immagine derivata risultante, non solo per le foto con volti, ma per qualsiasi tipo di contenuto. Ogni immagine viene analizzata individualmente per trovare la regione ottimale su cui concentrarsi.
Immagine originale:
Esempio di diverse modalità di ritaglio:
Guarda la demo.
Per vedere l'immagine tramite il suo URL di trasformazione, visualizzalo qui.
Cloudinary ti consente di trasformare facilmente le tue immagini al volo in qualsiasi formato, stile e dimensione, e ottimizza anche le immagini per avere le dimensioni minime del file per un'esperienza utente migliorata e per risparmiare larghezza di banda.
Il fulcro della soluzione Cloudinary è la capacità di fornire immagini utilizzando URL dinamici tramite una rete di distribuzione dei contenuti (CDN) rapida e globale. L'URL contiene l'ID pubblico dell'immagine richiesta, più eventuali parametri di trasformazione facoltativi. L'ID pubblico è l'identificativo univoco dell'immagine e viene specificato quando si carica l'immagine sul tuo account Cloudinary, o automaticamente assegnato da Cloudinary.
Qualsiasi istruzione di trasformazione (manipolazione) può essere aggiunta prima dell'ID pubblico nell'URL di consegna. Quando si accede per la prima volta all'URL, l'immagine derivata viene creata al volo e consegnata all'utente. L'immagine derivata viene inoltre memorizzata nella cache del CDN ed è immediatamente disponibile per tutti gli utenti successivi che richiedono la stessa immagine.
Questi suggerimenti sono solo alcuni dei modi in cui Cloudinary può aiutarti a ottimizzare le immagini per il tuo sito web, al fine di migliorare le prestazioni e l'esperienza dell'utente finale.
Il sito Web di Cloudinary fornisce una documentazione dettagliata su come funzionano queste funzionalità. Puoi anche trovare post sul blog che spiegano i 10 errori principali che potresti fare nella gestione delle immagini del sito web e come risolverli, nonché come analizzare le immagini del sito web per migliorare la velocità e ridurre i costi della larghezza di banda.
Accentsconagua
