L'ottimizzazione dell'immagine è, secondo Lighthouse, uno dei problemi più comuni di scarsa velocità e prestazioni del sito Web.

È possibile che le immagini non ottimizzate rallentino la velocità di caricamento della pagina di oltre 9 secondi, in alcuni casi anche di più.

Le pagine lente stanno portando a una maggiore frequenza di rimbalzo e a un posizionamento SERP inferiore, il che in cambio significa meno traffico e meno clienti paganti.

Cosa include l'ottimizzazione delle immagini?

L'ottimizzazione di tutte le immagini sul tuo sito web è un lavoro molto complesso, che richiede esperienza e parecchie ore per farlo bene.

I plugin possono aiutarti a risparmiare un po' di tempo, ma possono anche rompere l'intera struttura del tuo sito web ed eliminare permanentemente alcuni dei tuoi file multimediali se non gestiti correttamente.

Per capire perché consideriamo questo un lavoro complesso, ecco un elenco di controllo di 20 punti di ciò che Cloudimage considera essenziale per una corretta ottimizzazione dell'immagine:

1. Incorpora la consegna CDN
2. Ottimizza il TTFB
3. Utilizza la visualizzazione del prodotto a 360 gradi
4. Assicurati che le tue immagini siano reattive
5. Ridimensiona correttamente le immagini
6. Usa il formato immagine corretto
7. Comprimi le immagini
8. Ottimizza gli attributi alt
9. Didascalia le immagini in modo chiaro
10. Prenditi cura degli angoli del tuo prodotto
11. Saper mescolare i colori
12. Crea immagini fuse con le emozioni
13. Usa gli sfondi corrispondenti al prodotto
14. Ottimizza le tue miniature
15. Usa la mappa del sito con immagini
16. Applicare il sottocampionamento della crominanza
17. Caricamento lento di immagini non critiche
18. Distribuisci lo spriting delle immagini
19. Inizia a memorizzare nella cache le risorse immagine
20. Precarica risorse immagine critiche

Da un aspetto tecnico, i punti più importanti, dall'elenco sopra, sono il ridimensionamento, l'ottimizzazione del formato, il Lazy load, la compressione delle immagini, la reattività e la distribuzione CDN.

Se hai diciamo 11.000 immagini sul tuo sito web.

Quanto tempo ci vorrà per finire di ottimizzarli?

Ora immagina di poterlo fare automaticamente!

Questo è ciò che fa Cloudimage.

Puoi caricare in blocco tutte le immagini tramite il nostro software e verranno automaticamente incassate e caricate sul cloud.

Dopo di che arriva l'ottimizzazione.

Ridimensionamento dell'immagine

I server di ridimensionamento di Cloudimage, situati in tre data center in tutto il mondo (Canada, Francia e Singapore) scaricheranno la tua immagine originale da origin_image_url, la trasformeranno in base ai parametri operativi e di filtro e, infine, la visualizzeranno sul tuo sito Web o app mobile tramite un razzo -CDN veloce.

Un esempio con un'immagine originale ospitata sul tuo server web, sul bucket Amazon S3 o su qualsiasi altro storage accessibile tramite HTTP.

Quando si specificano sia la larghezza che l'altezza, le proporzioni dell'immagine originale possono essere ignorate o mantenute. Inoltre, puoi scegliere di aggiungere il riempimento all'immagine. Cloudimage fornisce le seguenti modalità di ridimensionamento:

Raccolto

Mantiene le proporzioni dell'immagine tagliando l'immagine per adattarla alla larghezza e all'altezza definite.

Adatto

Ridimensiona l'immagine mantenendo le proporzioni aggiungendo il riempimento per soddisfare le dimensioni desiderate.

Limite

Tenta di ridimensionare l'immagine mantenendo le proporzioni. Simile alla vestibilità ma senza imbottitura.

Copertina

Ridimensiona l'immagine alla larghezza e all'altezza specificate ignorando le proporzioni dell'immagine originale.

Ruotare

Ruota l'immagine di un angolo specificato, in senso antiorario

Ordinare

Rimuove una cornice a un colore attorno all'immagine.

Compressione dell'immagine

È possibile modificare la compressione (formato di output e qualità) dell'immagine utilizzando i filtri di compressione.

È possibile utilizzare i filtri di compressione insieme alle operazioni di ridimensionamento e ai filtri immagine.

Per impostazione predefinita, Cloudimage fornisce le immagini come WebP. Se il formato non è supportato dal browser client, ritorna a JPEG o PNG.

Optipress – Compressione delle immagini basata sull'apprendimento automatico

La sfida principale con la compressione JPEG è trovare il fattore di compressione più ottimale per ogni immagine diversa.

Immagini diverse compresse con gli stessi parametri di compressione possono comportare una qualità percepita diversa.

Inoltre, la stessa immagine in dimensioni diverse può richiedere strategie di compressione diverse per ottenere il massimo guadagno di dimensioni senza perdita di qualità visibile.

Per ovviare a questo, abbiamo sviluppato l'algoritmo di compressione JPEG Optipress.

Optipress trova il miglior approccio alla compressione JPG analizzando le caratteristiche specifiche dell'immagine e gli attuali parametri di compressione.

Un modello di Machine Learning determina la migliore strategia di compressione per questa immagine.

La qualità viene quindi valutata sulla base di un modello di simulazione del sistema visivo umano per ottenere una compressione ottimale senza deterioramento della qualità percettiva.

Preset di trasformazione

Se desideri applicare le stesse trasformazioni su più immagini, puoi definire i preset e applicare le trasformazioni solo utilizzando il nome del preset (X).

p=X

Qualsiasi trasformazione di ridimensionamento o filtro dell'immagine può essere incluso in un predefinito, così come filigrane e parametri di compressione dell'immagine.

Ciò consente il processo di ottimizzazione in blocco che consente di risparmiare oltre il 50% del tempo di ottimizzazione dell'immagine e può essere eseguito facilmente da chiunque sia coinvolto.

Immagini reattive rese facili

Le immagini reattive adattano le dimensioni dell'immagine in base alle dimensioni dello schermo dell'utente finale, consentendo così al tuo sito Web o all'app mobile di caricarsi più velocemente su varie dimensioni dello schermo.

Il team di Cloudimage ha sviluppato un plugin JS per automatizzare tutto per te.

La libreria Cloudimage JS adatterà automaticamente tutti i tuoi URL e offre Responsive Design integrato, Lazyloading e molte altre funzionalità per rendere il tuo sito Web reattivo, veloce e aggiungere piacevoli effetti di caricamento alle tue immagini.

Con il caricamento lento e abilitato alla cache, puoi essere certo che il tempo di caricamento del tuo sito Web migliorerà di almeno il 40%. Aggiungi CDN a quello e la percentuale sale anche al 60%.

Rete di distribuzione dei contenuti

Cloudimage sfrutta le reti di distribuzione dei contenuti per accelerare la consegna delle tue immagini in tutto il mondo. Lavoriamo con più fornitori di CDN per ottimizzare la consegna delle tue immagini e fornire un'affidabilità eccezionale.

Oltre ad accelerare le tue immagini, la CDN fornisce protezione DDoS (Distributed Denial of Service), che fungerà da scudo per i tuoi server ed eviterà tempi di inattività.

Le CDN di solito memorizzano nella cache le immagini per tutto il tempo in cui le immagini sono richieste dagli utenti finali.

Implementato in pochi minuti

Ciò che rende Cloudimage davvero unico è che i suoi servizi possono essere implementati molto velocemente.

Se il tuo sito web sta riscontrando picchi di traffico pazzeschi, puoi sempre contattare cloudimage, ottimizzare le tue immagini e assicurarti che quei picchi vengano assorbiti all'istante.

Questo ti lascia con prestazioni impeccabili e velocità di caricamento della pagina veloce su vari dispositivi.

Inoltre, l'implementazione è molto semplice e rende il processo di collaborazione tra i team (team responsabili del sito Web dalla produzione dei contenuti alla pubblicazione e al monitoraggio) semplice ed efficiente.

Ciò è particolarmente importante quando la maggior parte di noi è costretta a utilizzare i nostri uffici domestici nel prossimo periodo di tempo.
Per ulteriori informazioni su come funzionano i servizi Cloudimage, visita il nostro sito cloudimage.io