Caricamento adattativo delle immagini
Nuovo servizio su Tilda
Abbiamo implementato una tecnologia di elaborazione delle immagini che le ridimensiona in base alle dimensioni del contenitore del layout e le converte in un formato di nuova generazione, il WebP.
L'Adaptive Image Loading è attivo di default su tutti i siti web Tilda, non è necessario fare nulla per abilitarlo. Abbiamo testato questa tecnologia per diversi mesi e siamo entusiasti di parlarvene.
Diamo un'occhiata a tutte le tecnologie utilizzate per ottimizzare il caricamento delle immagini sui siti web Tilda:
Carico pigro
Lazy Load è attivo su Tilda da molto tempo. Le immagini vengono caricate gradualmente man mano che lo spettatore scorre la pagina, non tutte insieme.
L'immagine è completamente caricata perché si trova sullo schermo
Il caricamento inizia quando l'immagine si avvicina allo schermo di 700 px.
L'immagine non ha ancora iniziato il caricamento
1. L'immagine è completamente caricata perché si trova sullo schermo
2. Il caricamento inizia quando l'immagine si avvicina allo schermo di 700 px.
3. L'immagine non ha ancora iniziato a caricarsi.
CDN
La CDN, o Content Delivery Network, è una rete di server distribuiti in tutto il mondo. Sceglie il server più vicino alla posizione di un visitatore e aiuta a consegnare le immagini più velocemente. Ad esempio, se un visitatore si trova a Berlino, riceverà un'immagine direttamente dalla Germania e non dagli Stati Uniti.
NUOVO
Supporto WebP
Tilda converte automaticamente tutte le immagini dei siti web in WebP. Questo formato di nuova generazione consente una compressione che riduce le dimensioni delle immagini fino al 35% rispetto al formato JPEG, senza alcuna perdita di qualità. Non è necessario caricare le immagini sul vostro sito web in formato WebP, Tilda le convertirà per voi.
JPEG - 1680х1120px, 166 Kb
WebP - 1680х1120px, 78,6 Kb
8,9 Mb
2,8 Mb
Abbiamo confrontato la differenza di dimensione delle immagini prima e dopo l'ottimizzazione con questo modello. La dimensione totale delle immagini senza il caricamento adattivo delle immagini è di 8,9 Mb. La dimensione totale delle immagini dopo aver abilitato il caricamento adattivo delle immagini è di 2,8 Mb.
La dimensione totale delle immagini si riduce di 3 volte dopo l'ottimizzazione.
La maggior parte dei browser moderni, come Chrome, Opera, Firefox e altri, supporta il formato WebP. Durante il caricamento del sito web, lo script controlla se il browser supporta il formato e, se lo supporta, richiede le immagini WebP al server. Se non è supportato, fornirà le immagini originali così come sono state caricate, in JPEG o PNG. È in programma la conversione in AVIF, un altro nuovo formato di immagine che offre una riduzione ancora maggiore delle dimensioni dei file.
NUOVO
Ridimensionamento adattativo delle immagini
La tecnologia rileva le dimensioni del browser e del contenitore del layout, quindi richiede immagini ottimizzate dal server.
Si immagini di aver caricato una foto di 1680 px di larghezza in un blocco con più immagini. Le dimensioni di ciascun contenitore di immagini sono 450 x 300 px. Pertanto, il visitatore non riceverà la foto originale, ma una foto ridimensionata in base alle dimensioni del contenitore.
Si immagini di aver caricato una foto di 1680 px di larghezza in un blocco con più immagini. Le dimensioni di ciascun contenitore di immagini sono 450 x 300 px. Pertanto, il visitatore non riceverà la foto originale, ma una foto ridimensionata in base alle dimensioni del contenitore.
JPEG - 1680x1119px, 252 Kb
WebP- 450x300px, 23,5 Kb
Supponiamo che un visitatore acceda a un sito web da un telefono. Per caricare la copertina di un sito web su questo dispositivo, lo script richiederà un'immagine ritagliata con una risoluzione adeguata allo schermo.
JPEG -1680x1120px, 372 Kb
WebP - 560x1120px, 103 Kb
Il sistema intelligente analizza costantemente il traffico dei siti web su Tilda. Lo script prepara in anticipo le immagini ottimizzate per i dispositivi e i browser più utilizzati. Questo metodo è più flessibile del ridimensionamento al volo: a volte è più veloce scaricare un'immagine originale che ridimensionare e scaricare un'immagine ottimizzata.
NUOVO
Display Retina e connessione Internet lenta
Se un visitatore utilizza un display con una maggiore densità di pixel, lo script lo riconosce e richiede al server un'immagine ad alta risoluzione. In questo modo, le immagini appariranno nitide sui dispositivi Retina.
Tuttavia, nel caso in cui la connessione sia lenta (se un visitatore sta navigando dalla campagna, ad esempio), il sistema richiederà un'immagine più piccola. In questo modo si evita che la velocità di caricamento della pagina rallenti.
Tuttavia, nel caso in cui la connessione sia lenta (se un visitatore sta navigando dalla campagna, ad esempio), il sistema richiederà un'immagine più piccola. In questo modo si evita che la velocità di caricamento della pagina rallenti.
In alcuni casi, il caricamento adattivo delle immagini potrebbe non funzionare. I motivi sono diversi:
1
Avete disattivato il caricamento pigro nelle impostazioni del sito web.
2
Si è disabilitato il caricamento pigro per un elemento in Zero Block.
3
Non è ancora stata preparata una versione ottimizzata di un'immagine. Questo accade se avete appena caricato una nuova immagine sul vostro sito web o se state accedendo da un dispositivo o da un browser per la prima volta.
4
Il vostro browser non supporta il formato WebP. Trovate l'elenco dei browser che supportano il formato qui.
5
La differenza tra le dimensioni dell'immagine originale e la sua versione ottimizzata è insignificante; in questo caso, il sistema non comprime né ritaglia l'immagine.
Il caricamento adattivo delle immagini è una delle tecnologie di ottimizzazione più significative che abbiamo implementato in Tilda. Continuiamo a lavorare sodo per velocizzare i siti web creati sulla piattaforma. Restate sintonizzati per ulteriori aggiornamenti sul blog di Tilda, sul vostro account personale e sui social network.
Creare siti web veloci e facili da usare su Tilda
Non perdere le nostre ultime notizie, seguici sui social media!
