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 47
La differenza tra immagini raster e vettoriali.
competenza target
In un approccio sostenibile al vostro web design, è importante considerare l'ottimizzazione delle immagini.
In questo post parleremo dei principali tipi di immagini.
Proprio come il testo, le immagini sono parte integrante di un sito web. Esistono due tipi di immagini:
-Immagine raster, detta anche immagine raster o bitmap. "È un'immagine costituita da una matrice di punti colorati. È una giustapposizione di punti che formano, nel loro insieme, un'immagine". Le sue dimensioni sono caratterizzate solo dal formato di stampa e dipendono principalmente dalle possibilità tecniche e materiali di visualizzazione (qualità dei pixel).
Nel caso in cui un'immagine raster sia destinata alla stampa, la nozione di misura è importante.
Si noti che sono memorizzate in un formato grafico e i principali formati sono BMP, GIF, PNG, JPEG, ecc.
-Un'immagine vettoriale "è un'immagine digitale composta da singoli oggetti geometrici, ciascuno definito da diversi attributi (forma, posizione, colore, ecc.) e a cui possono essere applicate diverse trasformazioni".
In altre parole, vengono memorizzate come espressioni matematiche prima di essere tradotte in immagini sui nostri schermi. La dimensione è relativa: finché l'immagine si trova in un ambiente adatto al suo tipo, si adatta senza perdere qualità.
Se invece l'ambiente non è adatto (stampa, sfondo, ecc.), dovrà essere trasformata in un'immagine raster. In questo caso, è essenziale stabilire una dimensione e regolare la risoluzione.
Si noti che i principali formati in cui vengono salvate le immagini vettoriali sono Postscript, PDF, Illustrator, SVG, ecc.
La differenza principale tra questi due tipi di immagini è che il formato vettoriale può essere ridimensionato senza perdere la qualità dell'immagine, a differenza del formato raster.
Ecco un esempio di come appaiono le due immagini: [canva]https://www.canva.com/design/DAFPe2PVjaI/view[canva]