Mantys CoreImmagini
srcset e sizes, l’immagine LCP, hero di sfondo e SVG: servire l’immagine giusta, alla dimensione giusta, al momento giusto.
Il mio hero è un'immagine di sfondo: perché rallenta l'LCP e come risolvere (Divi, Elementor)
Un'immagine di sfondo CSS è invisibile al browser finché il foglio di stile non è scaricato e applicato, non ha srcset e i builder spesso la mettono in lazy load via JavaScript, quindi l'hero parte tardi; la soluzione migliore è una vera immagine, e la seconda migliore è un preload per dispositivo e niente lazy load su quella sezione.
L'immagine LCP non è la stessa su mobile e desktop: come precaricare quella giusta
Quando l'immagine più grande cambia tra telefono e desktop, un solo preload fa scaricare a uno dei due un'immagine che non mostrerà, oppure fa scaricare l'hero due volte, e la soluzione è un preload per dispositivo, con gli stessi srcset e sizes dell'immagine, posto subito dopo il tag viewport.
SVG inline: perfetto per un'icona, veleno per un'illustrazione
Un SVG non è un unico tipo di immagine. Una piccola icona inline è ideale, un'illustrazione pesante inline appesantisce la pagina, e una foto raster nascosta dentro un SVG è la peggiore delle tre. Ecco come distinguerle e scegliere ogni volta il formato giusto.
Perché PageSpeed Insights continua a dire “Dimensiona le immagini correttamente” anche se ho un srcset?
Srcset offre al browser un elenco di dimensioni, ma è l'attributo sizes a dirgli quale scegliere. Se sizes manca, è sbagliato o viene ignorato, il browser scarica l'immagine più grande dell'elenco, e PageSpeed lo segnala, srcset o meno.