Guarda il webinar: https://it.siteground.com/blog/ottimizzare-le-immagini-per-il-web/
Quanto sono importanti le immagini nel tuo sito web? L’immagine giusta posizionata nel modo giusto può essere l’elemento differenziante che ti permette di convertire i tuoi utenti. Ma serve cura nella scelta dei formati, nell’ottimizzazione e negli strumenti di gestione.
Marco Tesselli, Graphic Designer con oltre 15 anni di esperienza, risponderà ci mostra:
- Quali formati immagine usare e quando
- Le differenze e gli ambiti di utilizzo di raster e vettoriali
- Come ottimizzare le immagini per WordPress
- I criteri di accessibilità e l’ottimizzazione SEO
- I migliori software per la gestione delle immagini
3. Gli argomenti del webinar
● Pixel e risoluzione
● Approfondimento: la densità di pixel
● Formati raster e vettoriali: differenze e ambiti di utilizzo
● Formati raster e vettoriali: formati di file
● Software per la creazione ed editing delle immagini (i più diffusi)
● Ottimizzazione delle immagini per il web: best practices e integrazione con
WordPress
● Criteri di accessibilità e perfezionamento SEO: l'importanza dell'attributo alt
● Google Web Vitals: attenzione al Largest Contentful Paint (LCP)
● Risorse: dove trovare le immagini per i nostri siti web?
7. Risoluzione
Numero di pixel presenti in un'immagine.
Può essere espressa sia in forma [larghezza x altezza]:
che come [totale dei pixel che compongono l’immagine]:
1920x1080px
2.073.600px (ossia ~ 2 megapixel)
21. È relativa nel senso che la stessa immagine ha una
resa che dipende dalle caratteristiche del supporto
che la sta rappresentando.
22. DPI(Dots Per Inch)
Su un supporto di stampa, il numero
di punti o pixel che è possibile
stampare in un’area corrispondente
ad un pollice (2,54cm).
Su uno schermo, il numero di pixel
contenuti in un’area di schermo
corrispondente ad un pollice
(2,54cm).
PPI(Pixels Per Inch)
28. Contestualizziamo: analisi immagini in una pagina del sito SiteGround
Dimensione fisica:
333x285px
Dimensione renderizzata:
999x855px
iPhone 14 pro 1179x2556px (393x852@3x)
35. Immagini VETTORIALI
Nella grafica vettoriale le informazioni
vengono rappresentate attraverso un
insieme di primitive matematiche che
sono punti, linee, curve e poligoni.
La linea che compone la sagoma viene
memorizzata come un’equazione che parte da
un punto identificato con delle coordinate iniziali
e termina in un altro punto definito con delle
coordinate finali.
36. Ne consegue che un’immagine VETTORIALE è sempre
nitidamente perfetta indipendentemente dalla
dimensione di utilizzo.
37. Immagini RASTER (o bitmap)
Un’immagine raster (o bitmap) è
costituita da una griglia di pixel, dove
ogni pixel ha un colore specifico.
38. Ne consegue che la nitidezza di un’immagine RASTER
(o bitmap) dipende dalla dimensione di utilizzo.
Al variare della dimensione di impiego dell’immagine,
il numero di pixel resta lo stesso.
39. Quindi è sempre meglio usare le immagini in
formato vettoriale?
40. La risposta è “dipende”.
La grafica vettoriale è spendibile correttamente
solo per un numero limitato di componenti
dell’interfaccia.
41. Un componente figurativo come ad esempio una
foto non è adatto per essere rappresentato
tramite una formula matematica.
42. La ricostruzione di questa foto provocherebbe la
creazione di un numero altissimo di forme singole
(vettori) e l’impiego di questo formato
perderebbe senso.
https://www.pexels.com/photo/time-lapse-photography-of-waterfalls-during-sunset-210186/
43. La grafica vettoriale è adatta per componenti
costituiti da un numero relativamente contenuto
di forme geometriche e con colori limitati.
44. Immagini VETTORIALI: pro e contro
● Qualità sempre perfetta indipendentemente
dalle dimensioni di utilizzo.
● Peso del file inferiore rispetto alla stessa
immagine raster.
● Possibilità di variare parametri all’interno del
codice css.
● Possibilità di animare le immagini (svg)
attraverso codice css e js.
● Formato inadatto a
contenuti figurativi
complessi (es. foto).
● Variabilità di
comportamento in fase di
rendering su diversi
dispositivi (in via di
fixing).
45. Immagini RASTER (o bitmap): pro e contro
● Unica soluzione percorribile per
disporre di immagini fotografiche o
comunque figurative.
● Formato nativo della maggior parte
dei device di creazione immagini
(es. fotocamere)
● All’aumento della dimensione di
utilizzo, l’immagine perde
progressivamente qualità.
● Peso dei file tendenzialmente
maggiore rispetto al formato
vettoriale.
46. UI design: quando usare un
formato vettoriale o raster:
● Icone
● Loghi
● Pulsanti
● Illustrazioni
● Pattern di background semplici
● Foto
● Elementi figurativi complessi
● Pattern di background complessi
VETTORIALE RASTER
48. Formati file VETTORIALI
● Lo standard per gli elementi vettoriali
rappresentabili su una pagina web
● Formato basato su .xml
.svg (Scalable Vector Graphic)
49. Formati file VETTORIALI
● Formato proprietario Adobe
● Generato ed editabile da Adobe Illustrator
● Incorpora setting del file di progetto
Illustrator
.ai (Adobe Illustrator)
50. Formati file VETTORIALI
● Formato proprietario Adobe
● Generato ed editabile da diversi software di
grafica vettoriale
.eps (Encapsulated PostScript)
51. Formati file VETTORIALI
● Formato proprietario Adobe
● Universalmente utilizzato per generare file
che contengano immagini, testo e vettori
mantenendoli tali
.pdf (Portable Document Format)
52. Formati file RASTER (o bitmap)
● Formato lossy
● Comprime il file eliminando i dati in
maniera selettiva, pur mantenendo una
buona qualità dell’immagine
● Non supporta la trasparenza
.jpg (Joint Photographic Experts Group)
53. Formati file RASTER (o bitmap)
.png (Portable Network Graphics)
● Formato lossless
● Supporta la trasparenza
● .png 8 bit o .png 24 bit a seconda del
numero di colori
.png 8 bit: 256 colori
formato adatto per elementi grafici non complessi che richiedano
la trasparenza
.png 24 bit: 16,7 milioni di colori
formato adatto per elementi grafici complessi e ricchi di colori,
es. foto, che richiedano la trasparenza
54. Formati file RASTER (o bitmap)
● Formato lossless
● Dimensioni file minime
● Supporta la trasparenza
● Qualità non ottimale
● Max 256 colori
● Possibilità di integrare nel file semplici
animazioni
.gif (Graphics Interchange Format)
56. ● Formato lossless + lossy
● Dimensioni file minime: con qualità
percepita simile, 50% in meno di peso
rispetto alla stessa immagine in .jpg
● Supporta la trasparenza
● Possibilità di integrare nel file semplici
animazioni
● Non ancora pienamente supportato dai
browser (MS Edge)
● Supportato ancora relativamente poco dai
software di editing immagine
.avif (AV1 Image File Format)
57. ● Formato lossless + lossy
● Dimensioni file minime
● Supporta la trasparenza
● Possibilità di integrare nel file semplici
animazioni
● Max 8 bit. Formato non adatto a contenuti
fotografici di qualità molto elevata
● Supportato ancora relativamente poco dai
software s.a.a.s proprietari per l’importazione
.webp (WEB Picture)
58. Software per la creazione ed editing delle
immagini (i più diffusi)
59. Software per la creazione
ed editing delle immagini
VETTORIALE RASTER
Open source Open source
61. 1.
Utilizza le immagini nella risoluzione
che ti serve.
È sbagliato utilizzare immagini troppo piccole e sgranate allo stesso modo
in cui è sbagliato fare caricare al browser immagini più grandi di quanto ci
serva.
Hint: considerare la massima risoluzione renderizzata desiderata.
62. 2.
Scegli il formato file corretto.
Utilizza il formato JPG per le fotografie e il formato PNG per le immagini con
sfondo trasparente.
Hint: JPG e PNG sono attualmente lo standard, ma entro breve
WebP sarà maggiormente supportato dai software commerciali e
li sostituirà progressivamente. Tieniti informato ;)
63. 3.
Regola la compressione delle immagini.
Il formato JPG permette una compressione variabile in scala percentuale.
Hint: trova il compromesso leggerezza file/buona resa di visualizzazione.
64. 4.
Nomina semanticamente le immagini.
Questo accorgimento permetterà ai motori di ricerca di indicizzare
correttamente le immagini e le pagine web che le contengono
Hint: img-64874.jpg ristorante_rossi_piatti_del_giorno.jpg
65. 5.
Definisci un tuo metodo per nominare le
immagini.
Considera che molti server (Linux) sono case-sensitive e definire un
metodo per strutturare il nome dei file agevolerà il tuo flusso di lavoro.
È preferibile non utilizzare gli spazi tra le parole.
Hint: Foto Marco per sito.jpg nome_sito-foto_marco.jpg
66. 6.
Sui siti WordPress, utilizza un plugin di
caching.
Questi plugin creano una copia statica delle pagine del sito web e la
salvano nella cache del server web, in modo che i visitatori possano
accedere ai contenuti più velocemente.
Hint: utilizza il plugin SiteGround optimizer, integrato nel servizio.
68. L’attributo “alt”
All’interno di una pagina web, l’attributo "alt"
assegnato alle immagini attraverso il
codice HTML viene utilizzato per fornire
una descrizione testuale di un'immagine e
viene visualizzato al posto dell'immagine
quando questa non può essere visualizzata
o non è disponibile.
L'attributo "alt" è importante per
l'ottimizzazione per i motori di ricerca (SEO)
perché consente ai motori di ricerca di
comprendere il contenuto dell'immagine e
di inserirlo nei risultati di ricerca.
72. Google Web Vitals
I Web Vitals di Google sono un insieme di metriche chiave di esperienza
utente che vengono utilizzate per valutare le prestazioni e la qualità del
sito web.
Google ha introdotto i Web Vitals nel 2020 per aiutare i proprietari di siti
web a valutare e migliorare l'esperienza utente sui loro siti web.
73. Largest Contentful Paint (LCP)
Una delle 3 categorie dei Web Vitals è costituita dal Largest Contentful
Paint (LCP).
Si tratta del tempo che impiega il contenuto principale della pagina
(solitamente l'immagine o il video) a caricarsi completamente.
Google considera un LCP inferiore a 2,5 secondi come "buono".
76. Proprietà intellettuale
Le foto sono “opere originali”, sono quindi soggette al diritto che riguarda
la proprietà intellettuale.
Chi le realizza ha il diritto di riprodurre, distribuire e pubblicare le
fotografie, nonché il diritto di autorizzarne l'utilizzo da parte di terzi.
Non è quindi una soluzione raccomandabile quella di “saccheggiare” le
pagine web e salvarne le foto per poi inserirle nel nostro sito.
77. Come trovare le foto?
Autoproduzione Fotografo
https://iconscout.com/illustration/photographer-2671540 https://commons.wikimedia.org/wiki/File:Canon_EOS_5D_Mark_II_with_50mm_1.4_edit1.png
78. Come trovare le foto?
Foto royalty-free
- Portali a pagamento -
https://www.flickr.com/photos/pockethifi/51989572383/ https://www.pexels.com/photo/photo-of-a-gray-dell-laptop-displaying-pexels-webpage-811587/
Foto royalty-free
- Portali gratuiti -
79. Come trovare le foto?
Contenuti con licenza
Creative Commons
80. Gratuito Risultato altamente
customizzato
Qualità professionale
Competenze
Attrezzatura
Soluzione non
economica
Spesa sostenibile
Range di ricerca
puntuale
Qualità professionale
A pagamento
Difficile acquistare la
singola immagine
Gratuito
Grande disponibilità di
immagini
Livello qualitativo non
sempre alto
A volte licenza di
utilizzo o qualità
limitate
Gratuito
Livello qualitativo non
sempre alto
Ricerca guidelines
licenze
92. References
● Densità di pixel su dispositivi Apple:
https://iosref.com/res
● Densità di pixel su dispositivi Android:
https://developer.android.com/guide/practices/screens_support
● Licenze Creative Commons
https://creativecommons.org/about/cclicenses/