Come usare e ottimizzare le
immagini per il web
SITEGROUND WEBINAR
#SGwebinar | @siteground.it | it.siteground.com

#SGwebinar | @siteground.it | it.siteground.com
Marco Tesselli
@marcotesselli
Senior UX/UI designer @Antreem
Ospite speciale
@marcotesselli
marcotesselli.com

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?

Pixel e risoluzione

Pixel
La più piccola unità di un'immagine rappresentabile su uno schermo.

Risoluzione
Numero di pixel presenti in un'immagine.

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)

Risoluzione
https://commons.wikimedia.org/wiki/File:Girl_with_a_Pearl_Earring_%28pixelated%29.jpg
26px in larghezza
26px in altezza

Risoluzione
https://commons.wikimedia.org/wiki/File:Johannes_Vermeer_-_Girl_with_pearl_earring.jpg
512px in larghezza
512px in altezza

Maggior numero di pixel = migliore definizione dell'immagine

Quindi:
La dimensione delle immagini va definita in base
al contesto di impiego.

Contestualizziamo
Analisi di alcune immagini all’interno
di una pagina web

Ambiente desktop

Contestualizziamo: analisi immagini in una pagina del sito SiteGround
Desktop @1920x1080px
https://it.siteground.com/azienda

Contestualizziamo: analisi immagini in una pagina del sito SiteGround
Desktop @1920x1080px

Contestualizziamo: analisi immagini in una pagina del sito SiteGround
Desktop @1920x1080px

…e su mobile?

Ambiente mobile

La densità di pixel
Approfondimento

Pixel e risoluzione sono misure ASSOLUTE,
ma la loro resa è RELATIVA.

È relativa nel senso che la stessa immagine ha una
resa che dipende dalle caratteristiche del supporto
che la sta rappresentando.

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)

Concentriamoci sugli schermi:
Sono tutti uguali?

Schermi obsoleti
1 pixel fisico
=
1 pixel renderizzato
1 pixel fisico
=
n pixel renderizzati
Schermi moderni
> 72 ppi
72 ppi

Samsung Galaxy A12
Risol. fisica
720x1560px
IPS TFT display
264 ppi
Apple iPhone 14 pro
Google Pixel 7
Risol. renderizzata
720x1560px
HDR10+ display
416 ppi
Risol. fisica
1080x2400px
Risol. renderizzata
1080x2400px
Risol. fisica
393x852px
Risol. renderizzata
1179x2556px
Super Retina HDR
416 ppi
@3x

Contestualizziamo: analisi immagini in una pagina del sito SiteGround
iPhone 14 pro 1179x2556px (393x852@3x)

Contestualizziamo: analisi immagini in una pagina del sito SiteGround
Dimensione fisica:
333x285px
Dimensione renderizzata:
999x855px
iPhone 14 pro 1179x2556px (393x852@3x)

Quindi:
Nel design delle pagine web, considerare la
risoluzione renderizzata delle immagini.

Grafica raster e vettoriale

Siamo sempre dipendenti dalla risoluzione di
un’immagine per il suo impiego?

Non sempre.

Non sempre.
Dipende dal modo in cui l’immagine viene
costruita e rappresentata.

Immagine
VETTORIALE
Immagine
RASTER
(o BITMAP)

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.

Ne consegue che un’immagine VETTORIALE è sempre
nitidamente perfetta indipendentemente dalla
dimensione di utilizzo.

Immagini RASTER (o bitmap)
Un’immagine raster (o bitmap) è
costituita da una griglia di pixel, dove
ogni pixel ha un colore specifico.

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.

Quindi è sempre meglio usare le immagini in
formato vettoriale?

La risposta è “dipende”.
La grafica vettoriale è spendibile correttamente
solo per un numero limitato di componenti
dell’interfaccia.

Un componente figurativo come ad esempio una
foto non è adatto per essere rappresentato
tramite una formula matematica.

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/

La grafica vettoriale è adatta per componenti
costituiti da un numero relativamente contenuto
di forme geometriche e con colori limitati.

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).

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.

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

Formati di file
raster e vettoriali

Formati file VETTORIALI
● Lo standard per gli elementi vettoriali
rappresentabili su una pagina web
● Formato basato su .xml
.svg (Scalable Vector Graphic)

Formati file VETTORIALI
● Formato proprietario Adobe
● Generato ed editabile da Adobe Illustrator
● Incorpora setting del file di progetto
Illustrator
.ai (Adobe Illustrator)

Formati file VETTORIALI
● Formato proprietario Adobe
● Generato ed editabile da diversi software di
grafica vettoriale
.eps (Encapsulated PostScript)

Formati file VETTORIALI
● Formato proprietario Adobe
● Universalmente utilizzato per generare file
che contengano immagini, testo e vettori
mantenendoli tali
.pdf (Portable Document Format)

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)

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

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)

Formati di file immagine recenti

● 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)

● 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)

Software per la creazione ed editing delle
immagini (i più diffusi)

Software per la creazione
ed editing delle immagini
VETTORIALE RASTER
Open source Open source

Ottimizzazione delle immagini per il web:
Best practices e integrazione
con WordPress

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.

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 ;)

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.

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

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

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.

L’importanza dell’attributo
“alt” e impiego in WordPress

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.

L’attributo “alt”
<img src=”/images/foto.jpg” alt=”Foto delle tre cime di Lavaredo in bianco e nero”>

Gestire l’attributo “alt” in WordPress

Google Web Vitals
Attenzione al
Largest Contentful Paint (LCP)

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.

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".

Google PageSpeed Insights

Risorse
Dove trovare le immagini
per i nostri siti web?

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.

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

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 -

Come trovare le foto?
Contenuti con licenza
Creative Commons

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

Immagini royalty-free a pagamento

Immagini royalty-free a pagamento

● Shutterstock
https://www.shutterstock.com/it/
● Adobe Stock
https://stock.adobe.com/it
● iStock
https://www.istockphoto.com/it
Immagini royalty-free a pagamento
● Getty Images
https://www.gettyimages.it/
● Depositphotos
https://it.depositphotos.com/
● Alamy
https://www.alamy.it

● Pexels
https://www.pexels.com/it-it/
● Unsplash
https://unsplash.com/it
● Pixabay
https://pixabay.com/it/
Immagini royalty-free gratuite
● Gratisography
https://gratisography.com/
● StockSnap
https://stocksnap.io/
● Pngimg
https://pngimg.com/

Come trovare foto con licenza
Creative Commons

1. Creative Commons Search
https://oldsearch.creativecommons.org/

2. Openverse (ex CCsearch)
https://oldsearch.creativecommons.org/

3. Flickr
https://www.flickr.com/

4. Wikimedia Commons
https://commons.wikimedia.org/wiki/Category:Images

Come trovare foto con licenza
Creative Commons
con Google

Trovare foto con licenza CC tramite Google
1
2
3

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/

Grazie!
Marco Tesselli
Senior UX/UI designer @Antreem
#SGwebinar | @siteground.it | it.siteground.com
@marcotesselli
@marcotesselli
marcotesselli.com

#SGwebinar | @siteground_it | it.siteground.com