Immagini adattabili

Un'immagine vale più di mille parole e le immagini sono parte integrante di ogni pagina. Tuttavia, spesso rappresentano anche la maggior parte dei byte scaricati. Con il responsive web design, non solo i nostri layout possono cambiare in base alle caratteristiche del dispositivo, ma anche le immagini.

Pete LePage

Il responsive web design consente di modificare non solo i layout in base alle caratteristiche del dispositivo, ma anche i contenuti. Ad esempio, sui display ad alta risoluzione (2x), la grafica ad alta risoluzione garantisce la nitidezza. Un'immagine con una larghezza del 50% potrebbe funzionare correttamente quando il browser è largo 800 px, ma occupa troppo spazio su uno smartphone stretto e richiede lo stesso overhead di larghezza di banda quando viene ridotta per adattarsi a uno schermo più piccolo.

Direzione artistica

Altre volte potrebbe essere necessario modificare l'immagine in modo più drastico: modificando le proporzioni, ritagliando e persino sostituendo l'intera immagine. In questo caso, la modifica dell'immagine viene solitamente definita direzione artistica. Per altri esempi, visita la pagina responsiveimages.org/demos/.

Immagini adattabili

Sapevi che le immagini rappresentano in media oltre il 60% dei byte necessari per caricare una pagina web?

In questo corso imparerai a lavorare con le immagini sul web moderno, in modo che abbiano un aspetto fantastico e si carichino rapidamente su qualsiasi dispositivo.

Nel corso del percorso, acquisirai una serie di competenze e tecniche per integrare facilmente le immagini adattabili nel tuo flusso di lavoro di sviluppo. Al termine del corso, svilupperai con immagini che si adattano e rispondono a diverse dimensioni dell'area visibile e scenari di utilizzo.

Questo è un corso senza costi offerto tramite Udacity

Partecipa al corso

Immagini nel markup

L'elemento img è potente: scarica, decodifica ed esegue il rendering dei contenuti e i browser moderni supportano una gamma di formati immagine. L'inclusione di immagini che funzionano su tutti i dispositivi non è diversa da quella per computer e richiede solo alcune piccole modifiche per creare un'esperienza positiva.

Riepilogo

• Utilizza dimensioni relative per le immagini per evitare che si estendano accidentalmente oltre il contenitore.
• Utilizza l'elemento picture quando vuoi specificare immagini diverse a seconda delle caratteristiche del dispositivo (ovvero la direzione artistica).
• Utilizza srcset e il descrittore x nell'elemento img per fornire suggerimenti al browser sull'immagine migliore da utilizzare quando scegli tra diverse densità.
• Se la tua pagina contiene solo una o due immagini e queste non vengono utilizzate altrove sul tuo sito, valuta la possibilità di utilizzare immagini incorporate per ridurre le richieste di file.

Utilizza dimensioni relative per le immagini

Ricorda di utilizzare unità relative quando specifichi le larghezze delle immagini per evitare che superino accidentalmente l'area visibile. Ad esempio, width: 50%; fa sì che la larghezza dell'immagine sia pari al 50% dell'elemento contenitore (non al 50% dell'area visibile o al 50% delle dimensioni effettive dei pixel).

Poiché il CSS consente ai contenuti di fuoriuscire dal contenitore, potrebbe essere necessario utilizzare max-width: 100% per impedire che le immagini e altri contenuti fuoriescano. Ad esempio:

img, embed, object, video {
    max-width: 100%;
}

Assicurati di fornire descrizioni significative tramite l'attributo alt sugli elementi img; in questo modo, il tuo sito sarà più accessibile, fornendo un contesto agli screen reader e ad altre tecnologie per la disabilità.

Migliora i img con srcset per i dispositivi con DPI elevato

L'attributo srcset migliora il comportamento dell'elemento img, semplificando la fornitura di più file immagine per diverse caratteristiche del dispositivo. Analogamente alla funzione CSS image-set nativa di CSS, srcset consente al browser di scegliere l'immagine migliore in base alle caratteristiche del dispositivo, ad esempio utilizzando un'immagine 2x su un display 2x e, potenzialmente in futuro, un'immagine 1x su un dispositivo 2x quando si utilizza una rete con larghezza di banda limitata.

<img src="photo.png" srcset="[e-mail] 2x" ...>

Sui browser che non supportano srcset, il browser utilizza semplicemente il file immagine predefinito specificato dall'attributo src. Per questo motivo è importante includere sempre un'immagine 1x che possa essere visualizzata su qualsiasi dispositivo, indipendentemente dalle funzionalità. Quando srcset è supportato, l'elenco separato da virgole di immagini/condizioni viene analizzato prima di effettuare qualsiasi richiesta e viene scaricata e visualizzata solo l'immagine più appropriata.

Sebbene le condizioni possano includere qualsiasi elemento, dalla densità di pixel alla larghezza e all'altezza, oggi solo la densità di pixel è ben supportata. Per bilanciare il comportamento attuale con le funzionalità future, limitati a fornire l'immagine 2x nell'attributo.

Direzione artistica nelle immagini adattabili con picture

Per modificare le immagini in base alle caratteristiche del dispositivo, un'operazione nota anche come art direction, utilizza l'elemento picture. L'elemento picture definisce una soluzione dichiarativa per fornire più versioni di un'immagine in base a diverse caratteristiche, come dimensioni del dispositivo, risoluzione del dispositivo, orientamento e altro ancora.

Nota: l'elemento picture sta iniziando a essere supportato nei browser. Sebbene non sia ancora disponibile in tutti i browser, ne consigliamo l'utilizzo per la forte compatibilità con le versioni precedenti e il potenziale utilizzo del polyfill Picturefill. Per ulteriori dettagli, visita il sito ResponsiveImages.org.

Utilizza l'elemento picture quando un'origine immagine esiste in più densità o quando un responsive design richiede un'immagine leggermente diversa su alcuni tipi di schermi. Analogamente all'elemento video, è possibile includere più elementi source, il che consente di specificare file immagine diversi a seconda delle query supporti o del formato dell'immagine.

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

Prova

Nell'esempio precedente, se la larghezza del browser è di almeno 800 px, viene utilizzato head.jpg o head-2x.jpg, a seconda della risoluzione del dispositivo. Se il browser è compreso tra 450 px e 800 px, viene utilizzato head-small.jpg o head-small- 2x.jpg, sempre a seconda della risoluzione del dispositivo. Per larghezze dello schermo inferiori a 450 px e per la compatibilità con le versioni precedenti in cui l'elemento picture non è supportato, il browser esegue il rendering dell'elemento img, che deve essere sempre incluso.

Immagini con dimensioni relative

Quando le dimensioni finali dell'immagine non sono note, può essere difficile specificare un descrittore di densità per le origini dell'immagine. Questo vale in particolare per le immagini che occupano una larghezza proporzionale del browser e sono fluide, a seconda delle dimensioni del browser.

Anziché fornire dimensioni e densità delle immagini fisse, puoi specificare le dimensioni di ogni immagine fornita aggiungendo un descrittore di larghezza insieme alle dimensioni dell'elemento immagine, consentendo al browser di calcolare automaticamente la densità di pixel effettiva e scegliere l'immagine migliore da scaricare.

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

Prova

L'esempio precedente mostra un'immagine che corrisponde alla metà della larghezza dell'area visibile (sizes="50vw") e, a seconda della larghezza del browser e del rapporto dei pixel del dispositivo, consente al browser di scegliere l'immagine corretta indipendentemente dalle dimensioni della finestra del browser. Ad esempio, la tabella seguente mostra l'immagine che il browser sceglierebbe:

Larghezza del browser	Rapporto pixel del dispositivo	Immagine utilizzata	Risoluzione effettiva
400px	1	200.jpg	1x
400px	2	400.jpg	2x
320px	2	400.jpg	2,5x
600px	2	800.jpg	2,67x
640px	3	1000.jpg	3,125x
1100px	1	800.png	1,45x

Considera i punti di interruzione nelle immagini adattabili

In molti casi, le dimensioni dell'immagine possono cambiare a seconda dei breakpoint del layout del sito. Ad esempio, su uno schermo di piccole dimensioni, potresti voler estendere l'immagine per l'intera larghezza dell'area visibile, mentre su schermi più grandi dovrebbe occupare solo una piccola parte.

<img src="400.png"
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

Prova

Nell'esempio precedente, l'attributo sizes utilizza diverse query supporti per specificare le dimensioni dell'immagine. Quando la larghezza del browser è superiore a 600 px, l'immagine occupa il 25% della larghezza dell'area visibile; quando è compresa tra 500 px e 600 px, l'immagine occupa il 50% della larghezza dell'area visibile; al di sotto di 500 px, l'immagine occupa l'intera larghezza.

Rendi espandibili le immagini prodotto

J. Sito web di Crew con immagine prodotto espandibile.

I clienti vogliono vedere cosa stanno acquistando. Sui siti di vendita al dettaglio, gli utenti si aspettano di poter visualizzare primi piani ad alta risoluzione dei prodotti per osservare meglio i dettagli e i partecipanti allo studio si sono sentiti frustrati quando non hanno potuto farlo.

Un buon esempio di immagini espandibili e toccabili è fornito da J. Sito della crew. Un overlay che scompare indica che un'immagine è toccabile e fornisce un'immagine ingrandita con dettagli visibili.

Altre tecniche per le immagini

Immagini compressive

La tecnica di compressione delle immagini fornisce un'immagine 2x altamente compressa a tutti i dispositivi, indipendentemente dalle loro effettive funzionalità. A seconda del tipo di immagine e del livello di compressione, la qualità dell'immagine potrebbe non sembrare diversa, ma le dimensioni del file diminuiscono in modo significativo.

Prova

Attenzione: utilizza la tecnica di compressione con cautela a causa dei maggiori costi di memoria e decodifica che richiede. Il ridimensionamento di immagini di grandi dimensioni per adattarle a schermi più piccoli è costoso e può essere particolarmente difficile sui dispositivi di fascia bassa, dove la memoria e l'elaborazione sono limitate.

Sostituzione di immagini JavaScript

La sostituzione delle immagini JavaScript controlla le funzionalità del dispositivo e "fa la cosa giusta". Puoi determinare il rapporto pixel del dispositivo tramite window.devicePixelRatio, ottenere la larghezza e l'altezza dello schermo e persino eseguire lo sniffing della connessione di rete tramite navigator.connection o l'invio di una richiesta fittizia. Una volta raccolte tutte queste informazioni, puoi decidere quale immagine caricare.

Un grande svantaggio di questo approccio è che l'utilizzo di JavaScript comporta il ritardo del caricamento delle immagini almeno fino al termine dell'analisi del parser look-ahead. Ciò significa che il download delle immagini non inizierà nemmeno prima dell'attivazione dell'evento pageload. Inoltre, è molto probabile che il browser scarichi sia le immagini 1x che quelle 2x, con un conseguente aumento del peso della pagina.

Immagini incorporate: raster e vettoriali

Esistono due modi fondamentalmente diversi per creare e archiviare le immagini, che influiscono sul modo in cui le immagini vengono implementate in modo adattabile.

Immagini raster: ad esempio fotografie e altre immagini, sono rappresentate come una griglia di singoli punti di colore. Le immagini raster possono provenire da una fotocamera o da uno scanner oppure essere create con l'elemento canvas HTML. Formati come PNG, JPEG e WebP vengono utilizzati per archiviare immagini raster.

Le immagini vettoriali, come i loghi e i disegni al tratto, sono definite come un insieme di curve, linee, forme, colori di riempimento e gradienti. Le immagini vettoriali possono essere create con programmi come Adobe Illustrator o Inkscape oppure scritte a mano nel codice utilizzando un formato vettoriale come SVG.

SVG

Il formato SVG consente di includere grafica vettoriale adattabile in una pagina web. Il vantaggio dei formati file vettoriali rispetto ai formati file raster è che il browser può eseguire il rendering di un'immagine vettoriale in qualsiasi dimensione. I formati vettoriali descrivono la geometria dell'immagine, ovvero come è costruita a partire da linee, curve, colori e così via. I formati raster, invece, contengono solo informazioni sui singoli punti di colore, quindi il browser deve indovinare come riempire gli spazi vuoti durante la scalabilità.

Di seguito sono riportate due versioni della stessa immagine: un'immagine PNG a sinistra e un'immagine SVG a destra. L'SVG ha un bell'aspetto in qualsiasi dimensione, mentre il PNG accanto inizia a sembrare sfocato con dimensioni di visualizzazione più grandi.

Se vuoi ridurre il numero di richieste di file effettuate dalla tua pagina, puoi codificare le immagini in linea utilizzando il formato SVG o URI dati. Se visualizzi l'origine di questa pagina, vedrai che entrambi i loghi di seguito sono dichiarati in linea: un URI dati e un SVG.

SVG ha un ottimo supporto su dispositivi mobili e computer e gli strumenti di ottimizzazione possono ridurre notevolmente le dimensioni degli SVG. I seguenti due loghi SVG incorporati sembrano identici, ma uno è di circa 3 kB e l'altro di soli 2 kB:

URI dei dati

Gli URI di dati consentono di incorporare un file, ad esempio un'immagine, nella pagina impostando l'attributo src di un elemento img come stringa codificata Base64 secondo il seguente formato:

<img src="data:image/svg+xml;base64,[data]">

L'inizio del codice per il logo HTML5 riportato sopra è il seguente:

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">

(La versione completa supera i 5000 caratteri).

Sono disponibili strumenti di trascinamento come jpillora.com/base64-encoder per convertire file binari come le immagini in URI di dati. Come gli SVG, gli URI dati sono ben supportati sui browser mobile e desktop.

Inlining in CSS

Anche gli URI di dati e gli SVG possono essere incorporati nel CSS, il che è supportato sia su dispositivi mobili che su computer. Ecco due immagini dall'aspetto identico implementate come immagini di sfondo in CSS: un URI di dati e un SVG:

Pro e contro dell'inlining

Il codice incorporato per le immagini può essere dettagliato, in particolare gli URI di dati, quindi perché dovresti utilizzarlo? Per ridurre le richieste HTTP. Gli SVG e gli URI di dati possono consentire il recupero di un'intera pagina web, incluse immagini, CSS e JavaScript, con una singola richiesta.

Aspetti negativi:

• Su dispositivi mobili, la visualizzazione degli URI di dati può essere notevolmente più lenta rispetto alle immagini provenienti da un src esterno.
• Gli URI di dati possono aumentare notevolmente le dimensioni di una richiesta HTML.
• Aggiungono complessità al markup e al flusso di lavoro.
• Il formato URI dei dati è notevolmente più grande del formato binario (fino al 30%) e pertanto non riduce le dimensioni totali del download.
• Gli URI dei dati non possono essere memorizzati nella cache, quindi devono essere scaricati per ogni pagina in cui vengono utilizzati.
• Non sono supportati in IE 6 e 7, mentre il supporto è incompleto in IE8.
• Con HTTP/2, la riduzione del numero di richieste di asset diventerà meno prioritaria.

Come per tutti gli elementi adattabili, devi testare ciò che funziona meglio. Utilizza gli strumenti per sviluppatori per misurare le dimensioni del file di download, il numero di richieste e la latenza totale. Gli URI dei dati a volte possono essere utili per le immagini raster, ad esempio su una home page che contiene solo una o due foto che non vengono utilizzate altrove. Se devi incorporare immagini vettoriali, SVG è un'opzione molto migliore.

Immagini in CSS

La proprietà CSS background è uno strumento potente per aggiungere immagini complesse agli elementi, semplificando l'aggiunta di più immagini, la loro ripetizione e altro ancora. Se combinata con le query supporti, la proprietà background diventa ancora più potente, consentendo il caricamento condizionale delle immagini in base alla risoluzione dello schermo, alle dimensioni dell'area visibile e altro ancora.

Riepilogo

• Utilizza l'immagine migliore per le caratteristiche del display, tenendo conto delle dimensioni dello schermo, della risoluzione del dispositivo e del layout della pagina.
• Modifica la proprietà background-image in CSS per i display ad alta densità di pixel utilizzando le query supporti con min-resolution e -webkit-min-device-pixel-ratio.
• Utilizza srcset per fornire immagini ad alta risoluzione oltre all'immagine 1x nel markup.
• Considera i costi in termini di prestazioni quando utilizzi tecniche di sostituzione delle immagini JavaScript o quando pubblichi immagini ad alta risoluzione molto compresse su dispositivi a risoluzione inferiore.

Utilizza le query supporti per il caricamento condizionale delle immagini o l'art direction

Le query supporti non influiscono solo sul layout della pagina; puoi utilizzarle anche per caricare le immagini in modo condizionale o per fornire una direzione artistica in base alla larghezza dell'area visibile.

Ad esempio, nell'esempio riportato di seguito, sugli schermi più piccoli viene scaricato e applicato ai contenuti div solo small.png, mentre sugli schermi più grandi background-image: url(body.png) viene applicato al corpo e background-image: url(large.png) ai contenuti div.

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

Prova

Utilizza image-set per fornire immagini ad alta risoluzione

La funzione image-set() in CSS migliora la proprietà background del comportamento, semplificando la fornitura di più file immagine per diverse caratteristiche del dispositivo. In questo modo, il browser può scegliere l'immagine migliore in base alle caratteristiche del dispositivo, ad esempio utilizzando un'immagine 2x su un display 2x o un'immagine 1x su un dispositivo 2x quando si utilizza una rete con larghezza di banda limitata.

background-image: image-set(
    url(icon1x.jpg) 1x,
    url(icon2x.jpg) 2x
);

Oltre a caricare l'immagine corretta, il browser la ridimensiona di conseguenza. In altre parole, il browser presuppone che le immagini 2x siano grandi il doppio delle immagini 1x, quindi riduce l'immagine 2x di un fattore 2, in modo che l'immagine appaia della stessa dimensione sulla pagina.

Il supporto per image-set() è ancora nuovo ed è supportato solo in Chrome e Safari con il prefisso del fornitore -webkit. Assicurati di includere un'immagine di riserva per i casi in cui image-set() non è supportato, ad esempio:

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
  background-image: image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
}

Prova

Il codice riportato sopra carica l'asset appropriato nei browser che supportano image-set; in caso contrario, viene utilizzato l'asset 1x. L'ovvio avvertimento è che, sebbene il supporto del browser image-set() sia basso, la maggior parte dei browser riceve l'asset 1x.

Utilizza le query supporti per fornire immagini ad alta risoluzione o direzione artistica

Le query supporti possono creare regole basate sul rapporto pixel del dispositivo, consentendo di specificare immagini diverse per i display 2x rispetto a quelli 1x.

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
    /* High dpi styles & resources here */
}

Chrome, Firefox e Opera supportano tutti lo standard (min-resolution: 2dppx), mentre i browser Safari e Android richiedono entrambi la sintassi precedente con prefisso del fornitore senza l'unità dppx. Ricorda che questi stili vengono caricati solo se il dispositivo corrisponde alla query supporti e devi specificare gli stili per il caso di base. In questo modo, inoltre, si ha la certezza che venga eseguito il rendering di un elemento se il browser non supporta le query supporti specifiche per la risoluzione.

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
}

@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */
{
  .sample {
    background-size: contain;
    background-image: url(icon2x.png);
  }
}

Prova

Puoi anche utilizzare la sintassi min-width per visualizzare immagini alternative in base alle dimensioni dell'area visibile. Questa tecnica ha il vantaggio che l'immagine non viene scaricata se la query supporti non corrisponde. Ad esempio, bg.png viene scaricato e applicato a body solo se la larghezza del browser è pari o superiore a 500 px:

@media (min-width: 500px) {
    body {
    background-image: url(bg.png);
    }
}

Utilizza SVG per le icone

Quando aggiungi icone alla pagina, utilizza icone SVG, se possibile, o in alcuni casi caratteri Unicode.

Riepilogo

• Utilizza SVG o Unicode per le icone anziché immagini raster.

Sostituisci le icone semplici con Unicode

Molti caratteri includono il supporto per la miriade di glifi Unicode, che possono essere utilizzati al posto delle immagini. A differenza delle immagini, i caratteri Unicode si ridimensionano bene e hanno un bell'aspetto, indipendentemente dalle dimensioni con cui vengono visualizzati sullo schermo.

Oltre al normale set di caratteri, Unicode può includere simboli per frecce (←), operatori matematici (√), forme geometriche (★), immagini di controllo (▶), notazione musicale (♬), lettere greche (Ω) e persino pezzi degli scacchi (♞).

L'inserimento di un carattere Unicode avviene nello stesso modo delle entità denominate: &#XXXX, dove XXXX rappresenta il numero del carattere Unicode. Ad esempio:

You're a super ★

Sei una super ★

Sostituisci le icone complesse con SVG

Per requisiti di icone più complessi, le icone SVG sono generalmente leggere, facili da usare e possono essere personalizzate con CSS. I file SVG presentano una serie di vantaggi rispetto alle immagini raster:

• Si tratta di grafiche vettoriali che possono essere ridimensionate all'infinito.
• Gli effetti CSS come colore, ombreggiatura, trasparenza e animazioni sono semplici.
• Le immagini SVG possono essere incorporate direttamente nel documento.
• Sono semantici.
• Forniscono una migliore accessibilità con gli attributi appropriati.

With SVG icons, you can either add icons using inline SVG, like
this checkmark:
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="32" height="32" viewBox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
  </svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.

Prova

Utilizza i caratteri icona con cautela

Esempio di una pagina che utilizza FontAwesome per le icone dei caratteri.

I caratteri icona sono popolari e possono essere facili da usare, ma presentano alcuni svantaggi rispetto alle icone SVG:

• Sono grafiche vettoriali che possono essere ridimensionate all'infinito, ma potrebbero essere sottoposte ad anti-aliasing, con il risultato di icone non nitide come previsto.
• Stile limitato con CSS.
• Il posizionamento perfetto dei pixel può essere difficile, a seconda dell'altezza della riga, della spaziatura tra le lettere e così via.
• Non sono semantici e possono essere difficili da utilizzare con gli screen reader o altre tecnologie per la disabilità.
• Se non vengono definiti correttamente, possono comportare un file di grandi dimensioni per l'utilizzo di un piccolo sottoinsieme delle icone disponibili.

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

Prova

Sono disponibili centinaia di font di icone senza costi e a pagamento, tra cui Font Awesome, Pictos e Glyphicons.

Assicurati di bilanciare il peso della richiesta HTTP aggiuntiva e delle dimensioni del file con la necessità delle icone. Ad esempio, se hai bisogno solo di poche icone, potrebbe essere meglio utilizzare un'immagine o uno sprite di immagini.

Ottimizza le immagini per le prestazioni

Le immagini spesso rappresentano la maggior parte dei byte scaricati e spesso occupano una quantità significativa dello spazio visivo della pagina. Di conseguenza, l'ottimizzazione delle immagini può spesso generare alcuni dei maggiori risparmi di byte e miglioramenti delle prestazioni per il tuo sito web: meno byte deve scaricare il browser, minore è la concorrenza per la larghezza di banda del client e più velocemente il browser può scaricare e visualizzare tutti gli asset.

Riepilogo

• Non scegliere un formato dell'immagine a caso, ma scopri i diversi formati disponibili e utilizza quello più adatto.
• Includi strumenti di ottimizzazione e compressione delle immagini nel tuo flusso di lavoro per ridurre le dimensioni dei file.
• Riduci il numero di richieste HTTP inserendo le immagini utilizzate di frequente negli sprite di immagini.
• Per migliorare il tempo di caricamento iniziale della pagina e ridurre il peso iniziale della pagina, valuta la possibilità di caricare le immagini solo dopo che sono state visualizzate.

Scegli il formato giusto

Esistono due tipi di immagini da considerare: immagini vettoriali e immagini raster. Per le immagini raster, devi anche scegliere il formato di compressione giusto, ad esempio: GIF, PNG, JPG.

Le immagini raster, come le fotografie e altre immagini, sono rappresentate come una griglia di singoli punti o pixel. Le immagini raster in genere provengono da una fotocamera o da uno scanner oppure possono essere create nel browser con l'elemento canvas. Se le dimensioni dell'immagine aumentano, aumentano anche quelle del file. Se ridimensionate in modo da essere più grandi delle dimensioni originali, le immagini raster diventano sfocate perché il browser deve indovinare come riempire i pixel mancanti.

Le immagini vettoriali, come i loghi e i disegni al tratto, sono definite da un insieme di curve, linee, forme e colori di riempimento. Le immagini vettoriali vengono create con programmi come Adobe Illustrator o Inkscape e salvate in un formato vettoriale come SVG. Poiché le immagini vettoriali sono basate su primitive semplici, possono essere ridimensionate senza alcuna perdita di qualità o modifica delle dimensioni del file.

Quando scegli il formato appropriato, è importante considerare sia l'origine dell'immagine (raster o vettoriale) sia i contenuti (colori, animazione, testo e così via). Non esiste un formato adatto a tutti i tipi di immagini e ognuno ha i suoi punti di forza e di debolezza.

Per scegliere il formato appropriato, inizia con queste linee guida:

• Utilizza JPG per le immagini fotografiche.
• Utilizza SVG per l'arte vettoriale e la grafica a tinta unita, come loghi e disegni al tratto. Se l'arte vettoriale non è disponibile, prova con WebP o PNG.
• Utilizza PNG anziché GIF, in quanto consente di utilizzare più colori e offre rapporti di compressione migliori.
• Per animazioni più lunghe, valuta l'utilizzo di <video>, che offre una migliore qualità dell'immagine e consente all'utente di controllare la riproduzione.

Riduci le dimensioni del file

Puoi ridurre notevolmente le dimensioni del file immagine eseguendo la "post-elaborazione" delle immagini dopo il salvataggio. Esistono diversi strumenti per la compressione delle immagini: con perdita di dati e senza perdita di dati, online, GUI, riga di comando. Se possibile, è meglio provare ad automatizzare l'ottimizzazione delle immagini in modo che sia integrata nel tuo flusso di lavoro.

Sono disponibili diversi strumenti che eseguono un'ulteriore compressione lossless sui file JPG e PNG senza influire sulla qualità dell'immagine. Per JPG, prova jpegtran o jpegoptim (disponibile solo su Linux; esegui con l'opzione --strip-all). Per PNG, prova OptiPNG o PNGOUT.

Utilizza gli sprite di immagini

Lo spriting CSS è una tecnica che consente di combinare un numero di immagini in un'unica immagine "sprite sheet". Puoi quindi utilizzare singole immagini specificando l'immagine di sfondo per un elemento (lo Sprite Sheet) più un offset per visualizzare la parte corretta.

.sprite-sheet {
  background-image: url(sprite-sheet.png);
  width: 40px;
  height: 25px;
}

.google-logo {
  width: 125px;
  height: 45px;
  background-position: -190px -170px;
}

.gmail {
  background-position: -150px -210px;
}

.maps {
  height: 40px;
  background-position: -120px -165px;
}

Prova

Lo spriting ha il vantaggio di ridurre il numero di download necessari per ottenere più immagini, consentendo al contempo la memorizzazione nella cache.

Valuta il caricamento lento

Il caricamento lento può velocizzare notevolmente il caricamento di pagine lunghe che includono molte immagini below the fold, caricandole in base alle necessità o quando il caricamento e il rendering dei contenuti principali sono stati completati. Oltre ai miglioramenti delle prestazioni, l'utilizzo del caricamento lento può creare esperienze di scorrimento continuo.

Fai attenzione quando crei pagine con scorrimento continuo: poiché i contenuti vengono caricati man mano che diventano visibili, i motori di ricerca potrebbero non vederli mai. Inoltre, gli utenti che cercano informazioni che si aspettano di trovare nel piè di pagina non lo vedono mai perché vengono sempre caricati nuovi contenuti.

Evita del tutto le immagini

A volte l'immagine migliore non è affatto un'immagine. Se possibile, utilizza le funzionalità native del browser per fornire funzionalità uguali o simili. I browser generano elementi visivi che in precedenza avrebbero richiesto immagini. Ciò significa che i browser non devono più scaricare file immagine separati, evitando così immagini ridimensionate in modo impreciso. Puoi utilizzare caratteri Unicode o caratteri icona speciali per visualizzare le icone.

Inserisci il testo nel markup anziché incorporarlo nelle immagini

Ove possibile, il testo deve essere testo e non incorporato nelle immagini. Ad esempio, l'utilizzo di immagini per i titoli o l'inserimento di dati di contatto, come numeri di telefono o indirizzi, direttamente nelle immagini impedisce agli utenti di copiare e incollare le informazioni, le rende inaccessibili agli screen reader e non è adattabile. Inserisci invece il testo nel markup e, se necessario, utilizza i caratteri web per ottenere lo stile di cui hai bisogno.

Utilizza CSS per sostituire le immagini

I browser moderni possono utilizzare le funzionalità CSS per creare stili che in precedenza avrebbero richiesto immagini. Ad esempio, è possibile creare gradienti complessi utilizzando la proprietà background, ombre utilizzando box-shadow e angoli arrotondati con la proprietà border-radius.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.

<style>
    div#noImage {
    color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
    }
</style>

Tieni presente che l'utilizzo di queste tecniche richiede cicli di rendering, che possono essere significativi sui dispositivi mobili. Se ne abusi, perderai tutti i vantaggi che potresti aver ottenuto e il rendimento potrebbe risentirne.