Rendo il web più veloce e più usabile
Un singolo file d'immagine contenente ogni risoluzione potrebbe finalmente rendere il tag `<img>` di nuovo semplice. Un appello alla web community per creare un formato d'immagine contenitore.
Per evitare lo spostamento del layout (layout shifting) e ottimizzare la metrica Web Vital Cumulative Layout Shift (CLS) nelle tue pagine web, è necessario riservare spazio per qualsiasi contenuto che potrebbe essere renderizzato in un secondo momento. Questo è il caso di immagini, video e qualsiasi contenuto caricato in modo asincrono (ad esempio con chiamate AJAX). Ecco un nuovo modo per farlo.
Il 24 giugno 2022 ho parlato di come automatizzare l'ottimizzazione delle immagini responsive alla LazyLoad Conference 2022. Ecco il video del mio talk.
Il 1° aprile 2022 ho parlato di ottimizzazione delle immagini responsive 4.0 alla conferenza CSS Day 2022 a Faenza, in Italia. Questo talk spiega come essere più produttivi automatizzando le immagini responsive.
Immagina di avere più caroselli in una pagina, ognuno contenente più immagini, e di voler scaricare solo le immagini che si trovano all'interno della porzione visibile della pagina, magari risparmiando tempo di CPU creando le istanze del carosello in modalità lazy. Credo di aver trovato una tecnica valida ed elegante per farlo.
Prima che Safari iniziasse a supportare le immagini WebP, eravamo costretti a usare il tag picture per servire le immagini WebP ai browser che le supportavano. Oggi tutti i browser moderni supportano il formato WebP, quindi c'è probabilmente un modo intelligente per farlo usando un singolo tag: img.
Con la diffusione di schermi ad altissima densità “super retina” nei dispositivi di fascia alta più recenti, limitare la fedeltà delle immagini a 2x porta a un notevole miglioramento nei tempi di rendering, senza alcuna perdita di qualità percepibile per gli utenti. Ecco una nuova best practice su come fare.
Vuoi migliorare le prestazioni del tuo sito web? Puoi farlo utilizzando le immagini responsive e il lazy loading! In questo articolo troverai il codice HTML, JavaScript e CSS per caricare le immagini responsive in modalità lazy, per fare in modo che i browser utilizzino formati di immagine moderni come WebP e Jpeg2000, e per abilitare il lazy loading nativo dove supportato.
Il 6 aprile 2019, Addy Osmani ha scritto del lazy loading nativo delle immagini. Due giorni dopo Yvain, uno sviluppatore front-end di Parigi, mi ha chiesto se il mio vanilla-lazyload potesse essere usato come polyfill per l'attributo loading, ispirandomi a sviluppare e rilasciare la versione 12 del mio script, che introduce la nuova opzione use_native per abilitare il lazy loading nativo dove supportato. Puoi già provarlo oggi stesso.
Negli ultimi anni, sia per lavoro che come manutentore di uno script LazyLoad, mi sono specializzato nel caricamento lazy delle immagini responsive. Oggi ti mostrerò quale codice HTML, CSS e JavaScript devi scrivere nel 2019 per servire immagini responsive e caricarle in modalità lazy.
È ufficiale. Le immagini responsive sono una raccomandazione W3C da novembre 2016, con il nuovissimo tag picture e nuovi attributi per il tag img: srcset e sizes
Supponiamo di avere un layout di sito web responsive in cui le immagini sono dimensionate al 100% del loro contenitore, ma il contenitore non è sempre largo quanto la viewport. Dobbiamo usare il tag picture o il tag img è sufficiente?
Ora è possibile avere il caricamento lazy (lazy loading) sulle immagini responsive per fare in modo che si adattino agli schermi degli utenti e mantenere veloce il nostro sito web. In questo articolo vedremo quale markup dobbiamo scrivere e quali librerie Javascript ci serviranno.
Vedi tutti i tag.