Lezione 8Ottimizzazione delle immagini e caricamento lento
- Nozione 47 - La differenza tra immagini raster e vettoriali.
- Nozione 48 - Selezionare il tipo di file corretto.
- Nozione 49 - Regola la qualità dell'immagine.
- Nozione 50 - Conoscere la compressione delle immagini.
- Nozione 51 - Utilizzare gli sprite CSS.
- Nozione 52 - Cos'è il nuovo formato WebP?
- Nozione 53 - Strumenti per l'ottimizzazione delle immagini.
- Nozione 54 - Revisione/valutazione
Nozione 51
Utilizzare gli sprite CSS.
competenza target
In questo modulo parleremo degli script CSS e del loro impatto sulla velocità e sulla durata del vostro sito web.
Da informazioni raccolte su Internet (Conception Web durable: Sprites CSS - Mightybytes), lo Sprite CSS è definito come un insieme di immagini che vengono inserite in un'unica immagine di grandi dimensioni. In altre parole, questa tecnica consiste nell'assemblare diverse immagini in un unico file, riducendo così il numero di richieste HTTP (Hypertext Transfer Protocol). A titolo informativo, questa richiesta rappresenta un insieme di righe trasmesse al server dal browser.
Ad esempio, invece di utilizzare 3 singole immagini nella vostra pagina web, le combinate in una sola. Con i CSS possiamo mostrare solo la parte dell'immagine che ci serve.
L'uso di questa tecnica contribuisce notevolmente a ridurre l'impatto ecologico della progettazione del sito web. Infatti, riducendo il numero di richieste inviate al server, si ottimizzano anche le prestazioni del sito web.
CSS Sprite Generator è uno strumento online che può aiutarvi a creare gli sprite.
https://www.css.spritegen.com