Una guida per ottimizzare le immagini per dispositivi mobili

( Questo è un articolo sponsorizzato. ) Sai quanto sia fondamentale creare siti Web che si caricano rapidamente. Tutto ciò che serve è che una pagina si carichi un secondo di troppo prima che inizi a perdere visitatori e vendite. Inoltre, ora che Google ha reso l'indicizzazione mobile-first l'impostazione predefinita, non puoi davvero permetterti di lasciare che le ottimizzazioni delle prestazioni cadano nel dimenticatoio a causa di quanto possa essere difficile rendere il tuo sito mobile veloce come il tuo desktop.

Google tiene conto di molti fattori quando classifica un sito Web e i visitatori prendono in considerazione forse una manciata di fattori quando decidono di esplorare un sito. All'intersezione dei due c'è la velocità del sito web .

Non dovrebbe sorprendere che le immagini causino molti dei problemi che i siti web hanno con la velocità. E mentre potresti sempre tagliare il grasso e costruire siti dal design più minimale e incentrati sui contenuti, perché scendere a compromessi?

Le immagini sono una forza potente sul web.

Le immagini ben scelte non solo possono migliorare l'estetica di un sito, ma rendono anche più facile per i tuoi visitatori consumare i contenuti. Naturalmente, ci sono anche i vantaggi SEO delle immagini.

Quindi, oggi, concentriamoci su come puoi ancora progettare con tutte le immagini che desideri senza rallentare il tuo sito web. Ciò richiederà l'aggiornamento della strategia di ottimizzazione delle immagini e l'adozione di uno strumento chiamato ImageKit, ma non dovrebbe essere necessario molto lavoro per mettere in atto questo nuovo sistema.

La necessità di una strategia di ottimizzazione delle immagini per dispositivi mobili

Secondo l'archivio HTTP:

• La dimensione media di un sito Web desktop nel 2019 è 1939,5 KB .
• La dimensione media di un sito web mobile nel 2019 è 1745,0 KB .

Se non riusciamo a gestire questa crescita, sarà impossibile soddisfare le richieste dei consumatori e di Google quando si tratta di fornire siti Web veloci. O dovremo diventare davvero bravi a ottimizzare la velocità.

A proposito di velocità, vediamo cosa ha da dire HTTP Archive sul peso dell'immagine.

Così com'è oggi:

• La dimensione media delle immagini sul desktop è 980,3 KB su un totale di 1939,5 KB.
• La dimensione media delle immagini sui dispositivi mobili è 891,7 KB su un totale di 1745,0 KB.

In conclusione: le immagini aggiungono molto peso ai siti Web e consumano molta larghezza di banda. E sebbene questi dati mostrino che la dimensione media delle immagini sui dispositivi mobili è inferiore rispetto alle loro controparti desktop, la proporzione delle immagini sul sito Web è leggermente maggiore.

Detto questo, se si dispone della giusta strategia di ottimizzazione delle immagini, è possibile rimediare facilmente.

Ecco cosa dovrebbe comportare questa strategia:

1. Ridimensiona le tue immagini correttamente

Ci sono molte attività noiose che dovresti gestire senza le giuste automazioni in atto. Come ridimensionare le tue immagini.

Ma devi farlo, vero?

Diciamo che usi Unsplash per ottenere una serie di immagini per un sito Web su cui stai lavorando.

A differenza dei repository di azioni premium in cui potresti scegliere la dimensione o il formato del file in cui scarichi il file, qui non hai scelta.

Quindi, scarichi l'immagine e tutte le altre di cui hai bisogno. È quindi possibile scegliere di utilizzare l'immagine così com'è o ridimensionarla manualmente. Dopo aver esaminato le dimensioni del file e le dimensioni dell'immagine, ti rendi conto che sarebbe una buona idea ridimensionarlo.

Questa particolare immagine è stata esportata come un file da 3,6 MB e un'immagine da 5591 × 3145 px. È troppo grande per qualsiasi sito web.

Non c'è motivo di caricare immagini più grandi di 1 MB, e questo lo sta persino spingendo. Per quanto riguarda le dimensioni? Bene, questo dipende dalla larghezza del tuo sito, ma penso che da qualche parte tra 1200 e 2000 px dovrebbe essere il tuo massimo.

Dovrai seguire questo stesso processo indipendentemente dal fatto che le immagini provengano da un sito di stock o dalla DSLR di qualcuno. Il punto è che nessuna immagine sorgente uscirà mai della dimensione "giusta" per il tuo sito web, il che significa che il ridimensionamento deve avvenire ad un certo punto.

Inoltre, i siti Web reattivi visualizzano immagini di dimensioni diverse a seconda del dispositivo o del browser su cui vengono visualizzati. E poi ci sono i diversi casi d'uso, come l'immagine a dimensione intera rispetto alla miniatura o la foto del prodotto a dimensione intera rispetto all'immagine in primo piano.

Quindi, c'è più ridimensionamento che deve essere fatto anche dopo aver affrontato il problema di ridimensionarli manualmente.

Ecco cosa non dovresti fare:

• Ridimensiona le immagini una per una da solo. È dispendioso in termini di tempo e inefficiente.
• Affidati al ridimensionamento del browser per visualizzare le tue immagini in modo reattivo in quanto può causare problemi.

Invece, puoi integrare il tuo server di immagini esistente (sul tuo host web) o un servizio di archiviazione esterno (come S3) con ImageKit. Oppure puoi utilizzare la libreria multimediale di ImageKit per archiviare i tuoi file.

Come puoi vedere, ImageKit ha accettato il caricamento di questa foto Unsplash nelle sue dimensioni e dimensioni originali. Lo stesso vale per la provenienza dei tuoi file.

Tuttavia, una volta integrate le immagini o l'archiviazione delle immagini con ImageKit, lo strumento assumerà il controllo delle dimensioni delle immagini. Puoi vedere come è fatto qui:

Lascia che ti spieghi brevemente cosa stai guardando sopra:

• La preferenza dell'origine dell'immagine indica a ImageKit da dove devono essere ottimizzate le immagini. In questo caso, è la libreria multimediale ImageKit e verranno serviti sul mio sito Web.
• L' URL della vecchia immagine è un promemoria di dove vivevano le nostre immagini sul server.
• I nuovi URL delle immagini spiegano dove le tue immagini verranno ottimizzate tramite ImageKit.

La formula è abbastanza semplice. Prendi l'URL originale per la tua immagine e lo trasformi con il nuovo URL ImageKit.

L'URL di ImageKit da solo ridurrà istantaneamente le dimensioni dei tuoi file di immagine. Tuttavia, se vuoi ridimensionare le dimensioni della tua immagine mentre ci sei, puoi utilizzare i parametri di trasformazione per farlo.

Ad esempio, questa è la foto di Unsplash vista dalla libreria multimediale del mio sito web. Vive sui miei server, motivo per cui l'indirizzo mostra il mio URL:

Per vedere come appare una volta che ImageKit lo ha trasformato, cambio il mio nome di dominio con l'endpoint fornito da ImageKit. Quindi aggiungo i parametri di ridimensionamento dell'immagine (ti consentono di fare molto di più del semplice ridimensionamento) e ricollego il resto dell'URL che punta alla memoria della mia immagine.

Questo è ciò che accade quando utilizzo ImageKit per ridimensionare automaticamente la mia immagine a 1000 × 560 pixel:

Per creare questa immagine ridimensionata, ho trasformato l'URL di ImageKit nel seguente:

https://imagekit.io/vq1l4ywcv/ tr:w-1000,h-560/…

Sono i parametri di larghezza (w-) e altezza (h-) che hanno ridotto le dimensioni del file.

Ora, come puoi vedere, questo non è perfetto per i pixel come l'immagine originale, ma è perché ho applicato un po' di compressione al file (80%). Tratterò come funziona di seguito.

Nel frattempo, concentriamoci su quanto sia bella l'immagine e sui guadagni che stiamo per ottenere in termini di velocità.

In precedenza, questo era un file da 3,6 MB per l'immagine da 5591 × 3145 px. Ora, è un file da 128 KB per l'immagine 1000 × 560 px.

Per addolcire ulteriormente l'accordo, ImageKit semplifica il ridimensionamento delle immagini in questo modo utilizzando la trasformazione delle immagini basata su URL. In sostanza, funziona così:

• Si salva un'immagine master nella libreria multimediale di ImageKit o nel server preferito.
• ImageKit utilizza automaticamente più tecniche per ridurre significativamente le dimensioni dell'immagine.
• È quindi possibile utilizzare i parametri di ridimensionamento e ritaglio di ImageKit per modificare ciascuna immagine in modo che soddisfi le diverse risoluzioni e dimensioni del dispositivo.

Quando 91mobiles ha sfruttato questa forma di ottimizzazione delle immagini, ha risparmiato sul proprio sito Web 3,5 TB ogni mese di larghezza di banda. E non hanno dovuto fare altro che integrarsi con la piattaforma. Non era necessario spostare le immagini su ImageKit o su un altro servizio di archiviazione di terze parti. Tutto si è svolto all'interno della loro infrastruttura legacy.

2. Usa formati immagine a caricamento più rapido

Non sono solo le dimensioni delle tue immagini a consumare spazio di archiviazione e larghezza di banda. Anche i tipi di file che usi hanno un impatto.

I PNG , in generale, sono usati per cose come loghi, immagini contenenti testo e altre immagini super fini che hanno uno sfondo trasparente. Sebbene tu possa usarli per salvare le tue foto, tendono a produrre le dimensioni più grandi. Anche quando viene applicata la compressione senza perdita di dati, i PNG rimangono comunque di dimensioni maggiori rispetto ad altri tipi di file.

Le GIF sono la controparte animata dei PNG e utilizzano anche la compressione senza perdita di dati.

I JPG , d'altra parte, sono più adatti per immagini e foto colorate. Sono di dimensioni inferiori e si restringono con una compressione con perdita. È possibile comprimere i JPG a sufficienza per portarli a una dimensione gestibile, ma devi fare attenzione poiché la compressione con perdita degrada la qualità complessiva di un file e non è possibile tornare indietro una volta terminato.

I WebP stanno guadagnando popolarità da quando Google li ha introdotti all'inizio degli anni 2010. Secondo uno studio di Google, i WebP possono essere tra il 25% e il 34% più piccoli dei JPG. Inoltre, puoi utilizzare la compressione sia con perdita che senza perdita di dati sui WebP per ridurli a dimensioni ancora più piccole.

Qualcosa da tenere a mente con i WebP è che non sono universalmente accettati. Al momento della stesura di questo, i WebP non sono accettati dai dispositivi iOS. Tuttavia, le ultime versioni di tutti gli altri browser, Google o altro, le mostreranno volentieri.

Per quanto riguarda il modo in cui ImageKit aiuta con questo, è davvero semplice:

Quando questa impostazione è configurata, ImageKit determina automaticamente il miglior formato di file in cui consegnare ciascuno dei tuoi file. Tiene conto del formato e del contenuto dell'immagine originale insieme al fatto che il dispositivo del visitatore lo supporti o meno.

JPG, PNG e GIF verranno tutti convertiti in WebP quando possibile, ad esempio se il visitatore visita da Chrome (che li accetta). Se non è possibile, ad esempio se il visitatore visita da Safari (che non li accetta), ImageKit verrà convertito nel formato migliore (cioè il più piccolo) con le trasformazioni definite. Questo potrebbe essere un PNG o JPG.

Nykaa è stata in grado di sfruttare questa strategia di ottimizzazione delle immagini di ImageKit. Anche se il loro sito Web era già stato progettato utilizzando un mix di JPG e PNG e sono stati archiviati in diversi punti del Web, ImageKit si è occupato di automatizzare i formati delle immagini direttamente dagli URL originali.

3. Comprimi le immagini

Successivamente, dobbiamo parlare della compressione dell'immagine. L'ho già fatto riferimento un paio di volte, ma si divide in due tipi:

Senza perdita

Questa forma di compressione viene utilizzata su PNG e GIF. Per comprimere il file, i metadati vengono eliminati. In questo modo, l'integrità dell'immagine rimane intatta, ma il restringimento del file non è così sostanziale come si otterrebbe con la compressione con perdita di dati.

Perdita

Questa forma di compressione viene applicata a JPG e WebP. Per comprimere il file, alcune parti dell'immagine vengono "perse", il che può conferire a determinati punti un aspetto più granuloso rispetto all'immagine originale. Nella maggior parte dei casi, è appena percettibile a meno che non guardi da vicino le due immagini affiancate. Ma per i tuoi visitatori è facile non notare il degrado poiché non c'è un originale con cui confrontare.

Con la compressione con perdita, puoi controllare la percentuale di degradazione del file. Un intervallo sicuro sarebbe compreso tra il 70% e l'80%. ImageKit, per impostazione predefinita, imposta la sua ottimizzazione all'80% e stima che puoi risparmiare almeno dal 20% al 25% delle dimensioni del tuo file solo da quello. In realtà, però, è probabilmente di più (stiamo guardando verso l'alto del 40% come nell'esempio dell'immagine Unsplash sopra):

Puoi cambiarlo in qualsiasi impostazione predefinita che ritieni manterrà la qualità fornendo allo stesso tempo le dimensioni dell'immagine che aiutano il tuo sito a caricarsi rapidamente.

Indipendentemente dal fatto che utilizzi l'impostazione di ottimizzazione predefinita o personale, ricorda di attivare le impostazioni di compressione aggiuntive disponibili nella scheda Avanzate.

Queste tre impostazioni, in particolare, ti consentiranno di eseguire la maggior compressione e la massima sicurezza possibile.

La prima impostazione "Salva una copia", ad esempio, conserva le immagini originali sul server ImageKit. In questo modo, hai una copia della precompressione dell'immagine senza doverne gestire il carico sul tuo server.

La seconda impostazione "Preserva metadati immagine" ti consente di applicare una compressione senza perdita di dati quando possibile.

E l'ultima impostazione "Modalità compressione immagine PNG" ti consente di decidere quale livello di ottimizzazione senza perdita di dati desideri utilizzare sui tuoi PNG: massimo, minimo o nessuno.

Al termine, otterrai risultati come questo confronto affiancato:

Questo è un JPG di Unsplash. Puoi dire qual è l'originale e qual è la versione compressa e ridimensionata di ImageKit?

Quello a sinistra con il bordo nero è:

• 1500×1005 px
• 266 KB
• Compresso al 95%

Quello a destra con il bordo bianco è:

• 5444×3649 px
• 2,5 MB
• Originale

Sta a te decidere quale delle impostazioni di compressione e ottimizzazione di ImageKit ti senti più a tuo agio nell'usare e quindi configurare di conseguenza.

4. Salva e estrai immagini da un server esterno

Esistono due modi per eseguire le immagini tramite ImageKit.

Il primo è caricare le tue immagini direttamente nella sua Libreria multimediale:

Il secondo è l'integrazione con il tuo sito Web o con un servizio di archiviazione esterno. In realtà abbiamo già visto questa parte di ImageKit. È da dove ottieni gli endpoint URL in modo da poter definire i parametri dell'immagine:

Anche con tutte le ottimizzazioni di cui sopra, potresti comunque avere difficoltà con l'archiviazione e la manutenzione delle immagini, a causa del modo in cui influiscono sulla tua velocità o della quantità di spazio di archiviazione che devi contenerle.

Ad esempio, se memorizzi le tue immagini sul tuo server, alla fine sarai limitato per lo spazio (a meno che tu non abbia un account di hosting di dimensioni mostruose).

Quando crei enormi negozi di e-commerce o siti Web aziendali con migliaia o addirittura milioni di immagini e dimensioni di immagine corrispondenti, non puoi permetterti di ospitare quelle immagini da solo. Certo, c'è un modo per servirli più rapidamente ai visitatori (che spiegherò nel prossimo punto), ma perché assumersi l'onere e il costo dello spazio di archiviazione aggiuntivo se non è necessario?

5. Aggiungi una CDN

Un CDN è un altro strumento di ottimizzazione essenziale per archivi di immagini di grandi dimensioni. Pensalo come un secondo server, solo questo memorizza nella cache (copia) il tuo sito Web e lo serve attraverso data center situati molto più vicino ai tuoi visitatori in tutto il mondo.

Di conseguenza, il tempo necessario per inviare il tuo sito Web e le sue migliaia di immagini di prodotti da New York, New York al Bangladesh, in India, è incredibilmente veloce.

Con ImageKit, puoi godere del privilegio di servire le tue immagini non solo attraverso i suoi server di elaborazione principali, ma tramite AWS CloudFront CDN (incluso in tutti i piani) che ha oltre 150 sedi in tutto il mondo.

Sintra, un cliente di ImageKit, ha visto un grande balzo in avanti nelle prestazioni dopo essere passato a ImageKit. Con ImageKit image CDN (che ha nodi di consegna in tutto il mondo), ha registrato un calo del 18% dei tempi di caricamento delle pagine.

Avvolgendo

La cosa particolarmente interessante di ImageKit è che non è solo una misura preventiva contro i rallentamenti causati dalle immagini. Puoi usarlo per correggere e migliorare retroattivamente siti Web mobili e PWA, anche se contengono già milioni di immagini. Inoltre, il Performance Center rende facile tenere d'occhio le immagini del tuo sito web e identificare le opportunità per migliorare la velocità.

Inoltre, come puoi vedere dai suggerimenti sopra, ImageKit ha semplificato molto del lavoro che altrimenti dovresti fare, sia che lo gestissi manualmente o lo configurerai tramite un plug-in.

Con i consumatori e Google che diventano ogni giorno più esigenti sulla velocità di caricamento dei siti Web sui dispositivi mobili, questo è il tipo di strategia di ottimizzazione delle immagini di cui hai bisogno. Alleggerirà il tuo carico assicurando che tutte le immagini aggiunte prima o dopo ImageKit siano ottimizzate al massimo. Ancora meglio, i tuoi clienti trarranno vantaggio da più lead e maggiori conversioni.