Come ottimizzare le immagini per il tuo sito Web e farle funzionare su tutti i dispositivi (immagini reattive per dispositivi mobili, desktop, tablet)

Perché preoccuparsi di ottimizzare le immagini? Lascia che ti chieda questo; quando è stata l’ultima volta che hai visto un sito Web senza immagini? "Mai" sarebbe la risposta giusta. ��‍♂️ Le immagini sono troppo essenziali. E non si tratta nemmeno di quella foto degna di essere abbuffata da portare con te "10 consigli di marketing online" inviare. Le immagini sono utili per molteplici scopi. Pensa a layout, elementi di design, loghi, immagini dei profili e, sì, anche immagini dei blog.


Francamente, non puoi avere un sito web nel 2020 senza usare almeno una manciata di immagini. Detto questo, le immagini non sono così semplici da capire per il proprietario di un sito web. Anche mettendo da parte le sfide di quali immagini utilizzare e dove, ci sono anche problemi di visualizzazione di tali immagini da un punto di vista puramente tecnico:

  • Come fornire immagini reattive su più dispositivi?
  • Come renderli fantastici su tutti quei dispositivi?
  • E, soprattutto, come assicurarsi che si caricino in tempo decente?

Queste sono le domande alle quali rispondiamo oggi. Ecco la tua guida definitiva su come ottimizzare le immagini per il tuo sito Web e renderle fantastiche su tutti i dispositivi:

Come ottimizzare le immagini per il tuo sito Web e farle funzionare su tutti i dispositivi

�� Perché ascoltarci?

Le immagini sono state un argomento critico per noi ultimamente, a causa di uno degli strumenti più recenti della nostra famiglia: Optimole.

Optimole è un servizio di ottimizzazione delle immagini “imposta e dimentica” & attrezzo. Riteniamo che sia la migliore soluzione del genere sul Web e possiamo dimostrarlo! Ma questo è un discorso per un’altra volta. Ad ogni modo, nel corso degli anni, abbiamo imparato molto su come ottimizzare correttamente le immagini. Vogliamo condividere alcune di queste conoscenze con te oggi.

�� Perché dovresti ottimizzare le immagini sul tuo sito

Le immagini, oltre ad avere un bell’aspetto, consumano anche una quantità significativa di spazio su disco e larghezza di banda. Più specificamente, le immagini rappresentano qualsiasi cosa tra il 30% e l’85% delle dimensioni di una pagina Web standard.

test di velocità

È enorme – e non è come rimuovere le immagini è un’opzione – quindi la cosa migliore che possiamo fare è imparare come ottimizzare le immagini in un modo che occupa semplicemente meno spazio su disco.

I guadagni possono essere enormi, e specialmente quando si tratta di immagini ripetute, immagini che devono essere caricate su ogni singola pagina web. Queste sono cose come sfondi, elementi di design, loghi, icone, ecc. A volte l’ottimizzazione di una sola immagine di sfondo può comportare una riduzione delle dimensioni della pagina del 70%+.

Vedi questo esempio:

confronto delle dimensioni della pagina prima e dopo aver ottimizzato le immagini

Ma aspetta, peggiora! Se le lotte generali sulle prestazioni delle immagini non fossero sufficienti, esiste anche il regno mobile �� e comporta una serie di sfide completamente nuove:

Prima di tutto, probabilmente non dovresti mostrare lo stesso set di immagini ai tuoi visitatori desktop e ai tuoi visitatori mobili. I contesti sono semplicemente molto diversi – questo include le dimensioni dello schermo, l’orientamento (di solito in ritratto) e persino la mentalità della persona che legge.

inoltre, i dati suggeriscono che i progetti mobili con meno immagini tendono a funzionare meglio in termini di conversioni.

Quando messi insieme, ci sono un paio di cose di cui dobbiamo occuparci quando forniamo immagini reattive su più dispositivi:

  • in primo luogo, ottimizzare le immagini per quel dispositivo specifico
  • assicurarsi che le immagini siano compresse al massimo livello accettabile per garantire i tempi di caricamento più rapidi
  • visualizzare il numero ottimale di immagini considerando il dispositivo e lo schermo

��‍♂️ Come ottimizzare le immagini e distribuirle su tutti i tipi di dispositivi

Ottenere le tue immagini elaborate in modo ottimale e quindi consegnate al visitatore il più rapidamente possibile ha diversi componenti. In questa guida, li esamineremo tutti:

�� Scegli il formato corretto

Cominciamo con la domanda secolare: PNG o JPG?

Molte persone dicono "JPG tutto il tempo!" Ma non è proprio corretto:

PNG vs JPG

Sì, il più delle volte, o almeno negli scenari più comuni per ciò di cui potremmo aver bisogno delle immagini, i file JPG occupano meno spazio su disco e quindi anche meno larghezza di banda.

Ma la parola chiave qui è "gli scenari più comuni." In effetti, se quello che hai è un’immagine complessa con molti colori e transizioni di colore (ovvero molti "informazioni sul colore"), allora i JPG saranno davvero migliori. Pensa alle foto standard. Funzionano meglio come JPG.

Tuttavia, se hai un’immagine un po ‘più semplice, PNG vincerà sempre.

Considera il seguente esempio. Ecco quattro immagini:

image-1-aimmagine 1-a: JPG

image-1-bimmagine 1-b: PNG

image-2-aimmagine 2-a: JPG

image-2-bimmagine 2-b: PNG

  • l’immagine 1-a è 312 KB
  • l’immagine 2-a è 196 KB

Prova a indovinare le dimensioni delle altre due immagini …

La tua risposta:

Sbagliato!

  • immagine 1-b è 1,3 MB (questo probabilmente hai indovinato)
  • immagine 2-b è 106 KB (aspetta, cosa ?!)

Come puoi vedere, PNG vince per immagini semplici, con informazioni a basso colore.

Pensa a cose come schermate di interfaccia, illustrazioni semplici, ecc.

�� Lezione 1:

Non andare sempre per JPG. Prevedi quanto sarà grande l’immagine in base al suo contenuto, quindi usa il tipo di immagine corretto.

Ora per una domanda un po ‘più tempestiva: SVG? WebP?

SVG e WebP

SVG e WebP sono tipi di immagini un po ‘meno comuni sul Web, ma sono entrambi fantastici fintanto che li stai usando come dovrebbero essere usati. Vorrei chiarire:

  • SVG è un formato di immagine vettoriale basato su XML. Il contenuto dell’immagine può essere definito in un semplice file XML, lo stesso file XML che utilizzeresti per altri scopi di elaborazione dei dati di base. Questo rende SVG un buon formato, purché tu abbia a che fare con una semplice immagine vettoriale.
  • WebP è un nuovo formato di Google. Si vantano che WebP abbia dimensioni inferiori del 25-34% rispetto a JPEG comparabili e 26% più piccole di PNG comparabili.

Quindi qual è il trucco? Puoi ottimizzare le immagini trasformandole tutte in SVG e WebP?

Primo, SVG. Fondamentalmente, utilizzare SVG solo se (un) l’immagine può essere salvata come SVG in modo efficiente e (B) se non ti dispiace che la gente prenda quel SVG e lo modifichi.

Come ho detto, SVG è basato su XML, il che significa che modificare la grafica SVG è davvero facile da fare. Questo non è sempre qualcosa che desideri, soprattutto quando hai a che fare con il logo del tuo marchio o altri elementi grafici cruciali.

Nella maggior parte degli scenari, gli SVG non sono un formato che utilizzerai molto spesso.

Ora, su WebP. Il formato è eccezionale e, nella maggior parte dei casi, risparmia molto spazio su disco proprio come promesso. Dai un’occhiata a queste due immagini di esempio:

esempio di immagine jpg

esempio di immagine webp

  • la versione originale JPG è di 204 KB
  • il WebP è di 58 KB

Il trucco è che non tutti i browser supportano WebP. In effetti, potresti anche non vedere l’immagine WebP che ho usato sopra. Al momento della scrittura, WebP funziona su Google Chrome, Firefox, Edge e Opera. Naturalmente, le versioni precedenti non supportano il formato.

Ciò significa in pratica che aggiungere un’immagine WebP non è così semplice come aggiungere un JPG o un PNG.

Voglio dire, tecnicamente puoi usare un pezzo di codice come questo:

… ma se il browser dell’utente non supporta il formato, vedrà invece l’icona familiare dell’immagine spezzata.

Per utilizzare efficacemente WebP, è necessario fornire immagini di fallback. Per esempio:

Questo significa molto più lavoro. Immagina di dover creare un tag del genere ogni volta che vuoi aggiungere un’immagine WebP a un post o una pagina del blog. E lascia che ti fermi lì, no, WordPress non supporta WebP in modo nativo, quindi dovrai farlo a mano.

Tuttavia, ti consiglio di seguire questo complicato percorso WebP manuale ogni volta che hai a che fare con immagini che compaiono su più pagine del tuo sito o immagini di dimensioni enormi e hai bisogno di tutti gli strumenti che hai per ridurle in qualche modo.

Puoi salvare le immagini come WebP in Photoshop o utilizzare uno strumento simile XnConvert (gratuito).

�� Lezione 2:

Non preoccuparti di usare gli SVG se vuoi ottimizzare rapidamente le immagini. Il tempo che sprecherai a crearli non ripaga (anche se sentiti libero di essere in disaccordo; qui è un bene introito alternativo). I PNG saranno molto più veloci da usare e non molto peggio in termini di consumo di spazio su disco.

Usa WebP quando hai a che fare con immagini che appaiono su più pagine o immagini sufficientemente grandi. Questo a meno che non sia possibile gestire automaticamente l’elaborazione WebP, cosa che può essere fatta con alcuni strumenti aggiuntivi. In tal caso, utilizzare WebP ovunque. Ne parleremo tra un secondo.

��️ Comprimi le immagini

La compressione delle immagini è come per magia. Lascia che ti mostri:

Questa è la stessa immagine JPG, salvata solo a un diverso livello di compressione (spesso indicato come livello di qualità):

coon-100%100% qualità

coon-95%95% di qualità

coon-85%85% di qualità

coon-50%50% di qualità

Se sei come la maggior parte delle persone, i primi tre ti sembrano uguali. Il quarto inizia a cercare "un po ‘peggio." (Fare clic con il tasto destro e "Apri immagine in una nuova scheda")

Ecco quanto spazio su disco occupa ciascuna di queste immagini:

  • Qualità al 100%: 969 KB
  • 95%: 439 KB
  • 85%: 186 KB
  • 50%: 102 KB

Enorme, vero ?! Puoi passare da ~ 1 MB a ~ 500 KB senza alcuna perdita evidente di qualità, semplicemente cambiando la compressione dal 100% al 95%.

Questa compressione JPG può essere gestita in modo abbastanza automatico da vari strumenti, il che è una grande notizia. Tuttavia, non tutte le immagini sono create allo stesso modo, quindi a volte potresti ottenere immagini di bell’aspetto accanto a immagini di cattivo aspetto anche se hanno subito lo stesso processo di compressione.

Nel complesso, puoi fare un salto qui e ridimensionare la qualità dei tuoi JPG piuttosto pesantemente. La verità è che i visitatori del tuo sito non si preoccupano di immagini nitide ovunque.

Va bene, dovrei chiarire; sì, quando vuoi mostrare loro qualcosa – come un’immagine che è la chiave di un contenuto, ad esempio immagini di prodotti, foto di camere d’albergo – allora sicuramente quelli dovrebbero essere nitidi.

Ma in altre aree, puoi essere un po ‘più rilassato. Ad esempio, gli sfondi non devono essere nitidi al 100%. In generale, tutte le immagini con cui il visitatore non è direttamente coinvolto possono essere di qualità inferiore.

Due dei miei strumenti preferiti che possono aiutarti qui sono:

ImageOptim per compressione desktop su Mac. Puoi semplicemente prendere un’immagine dal desktop, trascinarla e rilasciarla su ImageOptim, quindi lo strumento fa la sua magia e sovrascrive l’immagine di origine al termine.

Quindi, puoi ottenere quell’immagine e caricarla normalmente sul tuo sito.

ImageOptim - ottimo strumento per ottimizzare le immagini sul desktop

Il secondo strumento è Optimole. Questo strumento ridefinisce praticamente la modalità di gestione delle immagini sui siti Web. Ai fini di questa discussione, diciamo solo che è davvero efficace quando si desidera ottimizzare le immagini presenti nella propria raccolta multimediale.

optimole - ottimo strumento per ottimizzare le immagini nel cloud

Ora su PNG. Proprio come i JPG, anche i PNG possono essere compressi. Ma questa volta, non ci sono svantaggi in termini di perdita di qualità. I PNG possono essere compressi in modo efficace utilizzando algoritmi lossless.

In altre parole, comprimi sempre i tuoi PNG!

Dai un’occhiata a queste tre immagini:

KWF-1
KWF-2

KWF-3

Sembrano uguali, ma in realtà prendono:

  • 346 KB
  • 215 KB
  • 100 KB

Prova a indovinare quale è quale.

Tre strumenti per comprimere le immagini e renderle più piccole:

  • ImageOptim ancora. Ma questo richiede molto tempo con i PNG, quindi se ne hai molti da elaborare, potresti voler prepararti una tazza di caffè mentre lo strumento è in funzione.
  • ImageAlpha. Molto più veloce di ImageOptim. È la mia soluzione desktop go-to per PNG.
  • Optimole. Non sorprende che Optimole gestisca anche la compressione PNG. Tutto accade sul pilota automatico.

�� Lezione n. 3:

Comprimi i tuoi JPG per raggiungere un livello accettabile di qualità rispetto allo spazio su disco.

Comprimi sempre i tuoi PNG.

�� Servire immagini delle dimensioni corrette

Questo è forse l’aspetto più cruciale del tutto "immagini reattive" enigma. Come sappiamo, ci sono decine se non centinaia di dimensioni dello schermo diverse là fuori, e in qualche modo dobbiamo assicurarci che le nostre immagini abbiano un bell’aspetto su tutte.

La soluzione semplice? Servi un’immagine grande … può sempre essere ridotta, giusto? Bene, tecnicamente, è corretto, ma in pratica, questo sprecherà molta larghezza di banda e farà caricare il tuo sito molto lentamente sulla maggior parte dei dispositivi.

Una soluzione migliore è ridimensionare tutte le immagini nelle dimensioni corrette che sono preferibili dai dispositivi più comuni e quindi servirle di conseguenza.

Come ci si aspetterebbe, per raggiungere questo obiettivo sono necessarie diverse versioni della stessa immagine.

Uno dei modi per farlo è iniziare con la larghezza di base del disegno e la dimensione dell’immagine più grande che può essere utilizzata, quindi ridimensionare da lì per alcuni dispositivi e punti di interruzione comuni.

Ad esempio, la maggior parte dei siti Web non supera il limite di 1100 px per la larghezza del blocco di contenuti, quindi puoi supporre che l’immagine massima che può essere visualizzata in quel caso sia larga anche di 1100 px.

Quindi, puoi creare punti di interruzione per 800 px e 550 px (valori comuni) per coprire scenari di tablet e dispositivi mobili. Anche se questo non ti darà risultati perfetti al 100% su tutti i dispositivi, stai almeno ottimizzando in misura ragionevole e tenendo sotto controllo le tue immagini.

Con questo dietro di te, ora devi creare una manciata di versioni diverse di ogni immagine che desideri utilizzare sul tuo sito.

Ecco un esempio di come gestire il codice di visualizzazione effettivo:

La magia dell’attributo srcset è che il browser guarda cosa c’è dentro e quindi seleziona l’immagine migliore in base al dispositivo utilizzato.

Un’altra personalizzazione che puoi vedere sopra è l’attributo size. Questo dice al browser come dovrebbe comportarsi l’immagine su alcuni schermi. In questo scenario, l’immagine sarà di 1100 px se visualizzata su finestre più grandi di 1100 px, mentre su dispositivi più piccoli occuperà l’intera finestra.

Questo tipo di soluzione assicura che l’immagine non occupi un intero schermo 4K con una larghezza di 3840 px. Tuttavia, occuperà comunque l’intero schermo quando viene visualizzato su dispositivi mobili.

Questo uso efficace dell’attributo size è il modo in cui rendi le tue foto veramente reattive.

⭐ Trucco professionale: scegli immagini di dimensioni inferiori del 10% rispetto a quelle necessarie, quindi lascia che il browser le ridimensioni. Ciò ti farà risparmiare spazio e larghezza di banda aggiuntivi. Ad esempio, se hai bisogno di un’immagine di 500 × 500 px, puoi ridimensionare l’immagine a 450 × 450 px e quindi consentire al browser di ridimensionarla fino a 500. Ciò dipende dall’immagine, ma nella maggior parte dei casi l’utente non noterò.

�� Lezione n. 4:

Usa le dimensioni dell’immagine corrette per il tuo design.

Crea punti di interruzione.

Crea più versioni della stessa immagine per coprire i punti di interruzione.

Utilizzare gli attributi srcset e size quando si visualizzano le immagini.

�� Ottimizza le immagini per gli schermi Retina e HiDPI

L’altra estremità dello spettro delle dimensioni dell’immagine riguarda le immagini compatibili con HiDPI.

La storia è che gli schermi dei desktop diventano sempre più grandi e i loro pixel continuano a essere sempre più densi. Non è raro in questi giorni avere un 4K schermo confezionato in un laptop da 15 pollici. La risoluzione 4K è di 3840 × 2160 px, quindi ognuno di quei pixel deve essere davvero minuscolo.

Questo crea problemi per i siti Web. Fondamentalmente, se il tuo sito fosse definito come largo 1100 px, in condizioni normali occuperebbe solo il 25% circa del patrimonio immobiliare disponibile per uno schermo 4K. Questo non è ottimale. Fortunatamente, le cose non funzionano così.

Per evitare il problema, quegli schermi ad alta risoluzione si comportano come se fossero della metà delle dimensioni (sto semplificando eccessivamente, ma ascoltami). Quindi, invece del tuo sito Web di 1100 px che occupa una piccola porzione di uno schermo HiDPI, viene ridimensionato per raddoppiare quello, occupando 2200 px e riempiendo lo schermo molto meglio.

Questo processo consente agli schermi di diventare sempre più nitidi senza rendere tutto minuscolo nel processo.

Tuttavia, questa pratica non è priva di difetti. Principalmente, le tue immagini subiscono un enorme successo. Il testo è facile da ingrandire senza perdere la qualità. I caratteri sono immuni al ridimensionamento. Le immagini non lo sono. Di conseguenza, ogni immagine che non è pronta per gli schermi HiDPI apparirà sfocata, pesantemente!

Per risolvere questo problema, è necessario fornire immagini ridimensionate per ciascuno dei rapporti di zoom. Ecco un semplice codice:

(Se il browser non supporta srcset, verrà utilizzato lo src standard.)

Ora, quando dico "immagini ridimensionate," In realtà intendo che dovresti iniziare dall’altra parte. Inizia con un’immagine enorme (etichetta 3 volte), quindi ridimensionala e ridimensionala (a 2x), infine rendila 1x e usala come immagine predefinita.

�� Lezione n. 5:

Assicurati che i tuoi loghi, immagini di branding e tutte le immagini utilizzate nei tuoi post e nelle pagine siano pronte per le schermate HiDPI.

⌛ Rinvia caricamento immagine

Questo è semplice in linea di principio; tutte le immagini above the fold devono essere caricate immediatamente (al caricamento della pagina). Tutto il resto può essere rinviato per dopo e persino "pigro caricato."

Il caricamento lento è il caricamento dell’immagine su richiesta. Ad esempio, le immagini vengono caricate solo una frazione di secondo prima che l’utente ne abbia bisogno, non prima, non più tardi. E quello "non prima, non più tardi" la parte è la chiave qui.

In uno scenario ideale, l’immagine dovrebbe essere caricata appena prima che venga fatta scorrere nella finestra. Significa che l’utente non dovrebbe vedere un segnaposto prima che appaia l’immagine. In tal caso, potrebbero scorrere l’immagine senza che sia in grado di caricarsi in tempo, non è un ottimo modo per ottimizzare le immagini.

Detto questo, il caricamento lento è qualcosa di facile da fare sui siti WordPress. Puoi caricare pigro con JavaScript / jQuery e puoi anche scrivere il codice per quello se vuoi. In alternativa, puoi ottenere un plug-in simile a3 Carico pigro, oppure puoi usare Optimole, che include un modulo di caricamento lento.

�� Lezione n. 6:

Immagini a carico lento che sono al di sotto della piega.

�� Fornire immagini tramite un CDN

Una rete di distribuzione di contenuti è come un cheat code per la velocità del sito. Stai tradendo perché non stai rendendo il tuo sito più veloce, ma stai dicendo a qualcun altro di prendere il carico e consegnare i dati del sito al visitatore per te.

�� Abbiamo parlato di CDN più in profondità qui, dai un’occhiata.

Il TL; DR è che i CDN sfruttano una rete di server che detengono tutti una copia del tuo sito e poi lo consegnano al visitatore dalla posizione più vicina disponibile. Questo sarà sempre più veloce della consegna dal tuo server principale.

I CDN di immagini funzionano praticamente allo stesso modo, ma si concentrano solo su, hai indovinato, immagini.

Il più delle volte, l’operazione è perfetta dal tuo punto di vista. Tutte le immagini sul tuo sito vengono sostituite dalle loro versioni ospitate da CDN (il che significa che gli URL delle immagini cambiano).

  • jetpack ha una popolare immagine CDN incorporata. Puoi usarla gratuitamente, il che è fantastico. Il limite principale è che funziona solo con le immagini nei tuoi post, pagine e immagini in primo piano. Non funziona con le immagini che compongono il tuo design (parti del tema, layout, ecc.). Quelle sono le immagini che potrebbero davvero usare un po ‘di CDN-ing.
  • Optimole ha un CDN integrato come parte della principale funzione di ottimizzazione delle immagini. Questo non è limitato ai tuoi post e alle tue pagine.

�� Lezione 7:

Collega il tuo sito a un’immagine CDN (Jetpack o Optimole) o a una CDN generale (MaxCDN / StackPath).

�� Offri immagini più piccole agli utenti su connessioni lente

Non solo le dimensioni dello schermo sono importanti quando si decide quale tipo di immagine l’utente dovrebbe vedere. Probabilmente ancora più importante, se hanno una connessione Internet lenta, non vogliono davvero aspettare 10 secondi per caricare un’immagine.

In questi scenari, è molto meglio ridurre la qualità delle immagini in cambio del tempo di caricamento. Gli utenti con connessioni più lente apprezzeranno il fatto di poter vedere le immagini.

È possibile farlo accadere utilizzando l’API delle informazioni di rete. Ecco un fantastico tutorial su come funziona se si desidera implementarlo manualmente.

Se preferisci che venga gestito di nuovo con il pilota automatico, di nuovo, Optimole!

�� Lezione n. 8:

Offri agli utenti immagini più piccole e più compresse su connessioni Internet più lente.

�� Strumenti strumenti strumenti!

Lungo la strada, ho citato una serie di strumenti che puoi utilizzare per rendere più efficace la consegna delle immagini del tuo sito. Ecco un riassunto di quelli:

  • Optimole – ti consente di ottimizzare automaticamente le immagini, le comprime, seleziona le giuste dimensioni dell’immagine per il viewport del visitatore, pubblica le immagini tramite un CDN, carica le immagini in modo pigro, lavora con velocità di connessione più lente.
  • ImageOptim e ImageAlpha – gestire la compressione delle immagini desktop su Mac. Puoi usare TinyPNG su Win. Fallo prima di caricare immagini sul tuo sito.
  • XnConvert – ti consente di convertire le immagini in WebP.
  • a3 Carico pigro plugin – lazy carica tutte le immagini.
  • jetpack plugin – viene fornito con un CDN immagine gratuito.
  • MaxCDN / StackPath – una CDN generale che si occuperà dell’intero sito, non solo delle immagini.

strumenti per ottimizzare le immagini

�� Ulteriori letture:

  • Imagify vs WP Smush vs ShortPixel vs Optimole: qual è la soluzione migliore per ottimizzare le immagini di WordPress? Confronto diretto
  • Immagini gratuite per i blog: come ottenerle & usali in modo efficace (attenzione! consigli non ovvi, supportati da dati)
  • 11 modi per accelerare le prestazioni di WordPress
  • Ottimizzazione della velocità del sito Web: come farlo nel 2019
  • Hosting WordPress più veloce: la guida per principianti a trovarne uno

��‍♂️ TL; DR:

Ecco un riepilogo di tutte le singole lezioni condivise sopra:

Lezione 1:

Non andare sempre per JPG. Prevedi quanto sarà grande l’immagine in base al suo contenuto, quindi usa il tipo di immagine corretto.

Lezione 2:

Non preoccuparti di usare gli SVG se vuoi ottimizzare rapidamente le immagini. Il tempo che sprecherai a crearli non ripaga (anche se sentiti libero di non essere d’accordo). I PNG saranno molto più veloci da usare e non molto peggio in termini di consumo di spazio su disco.

Usa WebP quando hai a che fare con immagini che appaiono su più pagine o immagini sufficientemente grandi. Questo a meno che non sia possibile gestire automaticamente l’elaborazione WebP, cosa che può essere fatta con alcuni strumenti aggiuntivi. In tal caso, utilizzare WebP ovunque. Ne parleremo tra un secondo.

Lezione n. 3:

Comprimi i tuoi JPG per raggiungere un livello accettabile di qualità rispetto allo spazio su disco.

Comprimi sempre i tuoi PNG.

Lezione n. 4:

Usa le dimensioni dell’immagine corrette per il tuo design.

Crea punti di interruzione.

Crea più versioni della stessa immagine per coprire i punti di interruzione.

Utilizzare gli attributi srcset e size quando si visualizzano le immagini.

Lezione n. 5:

Assicurati che i tuoi loghi, immagini di branding e tutte le immagini utilizzate nei tuoi post e nelle pagine siano pronte per le schermate HiDPI.

Lezione n. 6:

Immagini a carico lento che sono al di sotto della piega.

Lezione 7:

Collega il tuo sito a un’immagine CDN (Jetpack o Optimole) o a una CDN generale (MaxCDN / StackPath).

Lezione n. 8:

Offri agli utenti immagini più piccole e più compresse su connessioni Internet più lente.

Fammi sapere cosa ne pensi dell’intera sfida per ottimizzare il più possibile le immagini per il web. Inoltre, cosa stai facendo con le tue immagini per farle caricare più velocemente? Condividi nei commenti.

Non dimenticare di partecipare al nostro corso intensivo per accelerare il tuo sito WordPress. Con alcune semplici correzioni, puoi ridurre i tempi di caricamento anche del 50-80%:

Layout, presentazione e modifica di Karol K.

* Questo post contiene link di affiliazione, il che significa che se fai clic su uno dei link del prodotto e poi acquisti il ​​prodotto, riceveremo una piccola tassa. Non preoccuparti, pagherai comunque l’importo standard in modo che non ci siano costi da parte tua.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map