Immagini adattabili

Un'immagine vale più di 1000 parole e le immagini sono parte integrante di ogni pagina. Ma spesso rappresentano anche la maggior parte dei byte scaricati. Con il web design reattivo i nostri layout possono cambiare in base alle caratteristiche dei dispositivi, ma anche alle immagini.

Con il Adaptive web design, i nostri layout possono cambiare non solo in base alle caratteristiche del dispositivo, ma anche i contenuti. Ad esempio, sui display ad alta risoluzione (2x), la grafica ad alta risoluzione garantisce nitidezza. Un'immagine con una larghezza del 50% può andare bene quando il browser è largo 800 px, ma utilizza troppo spazio su uno smartphone stretto e richiede lo stesso overhead della larghezza di banda se ridimensionato per adattarsi a uno schermo più piccolo.

Direzione artistica

Altre volte potrebbe essere necessario modificare le proporzioni in modo più drastico, modificando le proporzioni, ritagliando e persino sostituendo l'intera immagine. In questo caso, la modifica dell'immagine è solitamente indicata come art director. Consulta responsiveimages.org/demos/ per altri esempi.

Immagini adattabili

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

In questo corso imparerai a utilizzare le immagini sul web moderno, per renderle ottimali e caricarsi rapidamente su qualsiasi dispositivo.

Durante il percorso, acquisirai una serie di competenze e tecniche per integrare senza problemi le immagini adattabili nel tuo flusso di lavoro di sviluppo. Alla fine del corso, svilupperai con immagini che si adattano e rispondono a diverse dimensioni dell'area visibile e scenari di utilizzo.

Si tratta di un corso senza costi offerto da Udacity

Partecipa al corso

Immagini nel markup

L'elemento img è potente: scarica, decodifica e visualizza i contenuti e i browser moderni supportano una vasta gamma di formati delle immagini. L'inserimento di immagini che funzionano su tutti i dispositivi non è diverso da quello dei computer desktop e richiede solo qualche piccola modifica per creare una buona esperienza.

Riepilogo

• Utilizza dimensioni relative per le immagini per evitare che superino accidentalmente il container.
• Utilizza l'elemento picture quando vuoi specificare immagini diverse a seconda delle caratteristiche del dispositivo (ovvero, art director).
• Utilizza srcset e il descrittore x nell'elemento img per fornire suggerimenti al browser sull'immagine migliore da utilizzare per scegliere tra diverse densità.
• Se la pagina ha solo una o due immagini che non vengono utilizzate altrove sul sito, potresti usare immagini in linea per ridurre il numero di richieste di file.

Utilizzare 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 in pixel).

Poiché CSS consente ai contenuti di eccedere nel contenitore, potrebbe essere necessario utilizzare max-width: 100% per evitare l'overflow delle immagini e di altri contenuti. Ad esempio:

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

Assicurati di fornire descrizioni significative tramite l'attributo alt negli elementi img, che contribuiscono a rendere il tuo sito più accessibile fornendo contesto a screen reader e altre tecnologie per la disabilità.

Migliora 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 su una rete con larghezza di banda limitata.

<img src="photo.png" srcset="photo@2x.png 2x" ...>

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

Sebbene le condizioni possano includere qualsiasi cosa, dalla densità dei pixel alla larghezza e all'altezza, solo la densità dei pixel è attualmente supportata. Per bilanciare il comportamento attuale con le funzionalità future, continua a fornire semplicemente l'immagine 2x nell'attributo.

Art Director nelle immagini adattabili con picture

Per modificare le immagini in base alle caratteristiche del dispositivo, noto 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 caratteristiche diverse, come le dimensioni e la risoluzione del dispositivo, l'orientamento e altro ancora.

Utilizza l'elemento picture quando l'origine di un'immagine esiste con più densità o quando un adattabile design impone un'immagine un po' diversa su alcuni tipi di schermi. Analogamente all'elemento video, possono essere inclusi più elementi source per poter specificare diversi file immagine 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 e 800 px, viene utilizzato nuovamente head-small.jpg o head-small- 2x.jpg, a seconda della risoluzione del dispositivo. Per schermi di larghezza inferiore a 450 px e compatibilità con le versioni precedenti in cui l'elemento picture non è supportato, il browser esegue il rendering dell'elemento img e deve essere sempre incluso.

Immagini di dimensioni relative

Quando non si conosce la dimensione finale dell'immagine, può essere difficile specificare un descrittore di densità per le origini delle immagini. Ciò è particolarmente vero per le immagini che si estendono su una larghezza proporzionale del browser e sono fluide, a seconda delle dimensioni del browser.

Invece di fornire dimensioni e densità delle immagini fisse, puoi specificare la dimensione di ogni immagine fornita aggiungendo un descrittore di larghezza insieme alle dimensioni dell'elemento immagine. In questo modo il browser può 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 riportato sopra mostra un'immagine la cui larghezza è pari a metà dell'area visibile (sizes="50vw") e, a seconda della larghezza del browser e delle proporzioni 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	Proporzioni pixel del dispositivo	Immagine utilizzata	Risoluzione effettiva
400px	1	200.jpg	1x
400px	2	400.jpg	2
320px	2	400.jpg	2,5x
600px	2	800.jpg	2,67x
640px	3	1000.jpg	3,125x
1100px	1	800.png	1,45x

Tieni conto dei punti di interruzione nelle immagini adattabili

In molti casi, le dimensioni delle immagini possono variare in base ai punti di interruzione del layout del sito. Ad esempio, su uno schermo piccolo, l'immagine dovrebbe occupare l'intera larghezza dell'area visibile, mentre su schermi più grandi dovrebbe assumere 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

L'attributo sizes, nell'esempio precedente, utilizza diverse query supporti per specificare la dimensione dell'immagine. Se la larghezza del browser è superiore a 600 px, l'immagine occupa il 25% di quella dell'area visibile; se è compresa tra 500 e 600 px, l'immagine occupa il 50% della larghezza dell'area visibile e, se è inferiore a 500 px, è a larghezza intera.

Rendere espandibili le immagini dei prodotti

I clienti vogliono vedere ciò che acquistano. Sui siti di vendita al dettaglio, gli utenti si aspettano di poter vedere primi piani dei prodotti ad alta risoluzione per esaminare meglio i dettagli, mentre i partecipanti allo studio si sentono frustrati se non sono stati in grado di farlo.

Un buon esempio di immagini espandibili toccabili è fornito dal file J. Sito dell'equipaggio. Un overlay che scompare indica che è possibile toccare un'immagine, fornendo un'immagine ingrandita con dettagli visibili.

Altre tecniche per le immagini

Immagini compresse

La tecnica delle immagini compresse consente di pubblicare un'immagine 2x altamente compressa su tutti i dispositivi, indipendentemente dalle funzionalità effettive del dispositivo. A seconda del tipo di immagine e del livello di compressione, la qualità dell'immagine potrebbe non cambiare, ma le dimensioni del file diminuiscono notevolmente.

Prova

Sostituzione dell'immagine JavaScript

La sostituzione dell'immagine JavaScript controlla le funzionalità del dispositivo e "fa la cosa giusta". Puoi determinare le proporzioni pixel del dispositivo tramite window.devicePixelRatio, ottenere larghezza e altezza dello schermo e persino eseguire uno sniffing della connessione di rete tramite navigator.connection o inviare una richiesta fasulla. Dopo aver raccolto tutte queste informazioni, puoi decidere quale immagine caricare.

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

Immagini incorporate: raster e vettoriale

Esistono due modi fondamentalmente diversi per creare e archiviare le immagini e questo influisce sul modo in cui le immagini vengono implementate in modo reattivo.

Immagini raster, come 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. Per archiviare le immagini raster vengono utilizzati formati come PNG, JPEG e WebP.

Le immagini vettoriali, come loghi e line art, 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 in 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 di file vettoriali rispetto ai formati di file raster è che il browser può eseguire il rendering di un'immagine vettoriale con qualsiasi dimensione. I formati vettoriali descrivono la geometria dell'immagine, 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. Il file SVG viene visualizzato correttamente con qualsiasi dimensione, mentre il file PNG appare sfocato su schermi di dimensioni maggiori.

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

Il formato SVG ha un supporto eccezionale su dispositivi mobili e desktop e gli strumenti di ottimizzazione possono ridurre notevolmente le dimensioni dei file SVG. I seguenti due loghi SVG in linea sembrano identici, ma uno di circa 3 kB e l'altro di soli 2 kB:

URI dati

Gli URI dati forniscono un modo per includere un file, ad esempio un'immagine, in linea impostando l'attributo src di un elemento img come stringa codificata in Base64 utilizzando il seguente formato:

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

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

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

La versione completa supera i 5000 caratteri.

Per convertire i file binari come le immagini in URI dei dati sono disponibili strumenti di trascinamento come jpillora.com/base64-encoder. Proprio come le immagini SVG, gli URI dati sono ben supportati nei browser per dispositivi mobili e desktop.

Incorporamento in CSS

Gli URI dati e i file SVG possono essere incorporati anche in CSS e questo è supportato sia su dispositivi mobili che su computer. Ecco due immagini dall'aspetto identico implementate come immagini di sfondo in CSS: un URI dati e un SVG:

Pro e contro dell'incorporamento

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

Svantaggio:

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

Come per tutti gli altri dispositivi, devi testare cosa funziona meglio. Utilizza gli strumenti per sviluppatori per misurare le dimensioni del file di download, il numero di richieste e la latenza totale. A volte gli URI dati possono essere utili per le immagini raster, ad esempio su una home page che ha solo una o due foto che non vengono utilizzate altrove. Se devi incorporare immagini vettoriali, il formato SVG è un'opzione di gran lunga migliore.

Immagini in CSS

La proprietà CSS background è uno strumento efficace per aggiungere immagini complesse agli elementi, semplificando l'aggiunta di più immagini che ne causano la ripetizione e altro ancora. Se combinata con le query supporti, la proprietà di sfondo 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 le visualizzazioni con DPI elevato utilizzando 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 delle prestazioni quando utilizzi tecniche di sostituzione delle immagini JavaScript o quando pubblichi immagini ad alta risoluzione altamente compresse su dispositivi a risoluzione inferiore.

Utilizzare query supporti per il caricamento condizionale delle immagini o l'art director

Le query supporti non influiscono solo sul layout della pagina, ma puoi anche utilizzarle per caricare le immagini in modo condizionale o per fornire un'art director per la pagina in base alla larghezza dell'area visibile.

Ad esempio, nell'esempio seguente, su schermi più piccoli viene scaricato e applicato solo small.png al contenuto div, mentre su schermi più grandi background-image: url(body.png) viene applicato al corpo e background-image: url(large.png) al contenuto 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

Usa set di immagini per fornire immagini ad alta risoluzione

La funzione image-set() nel CSS migliora il comportamento della proprietà background, semplificando la fornitura di più file immagine per caratteristiche diverse del dispositivo. Ciò consente al browser di 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 su 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 scala di conseguenza. In altre parole, il browser presuppone che le immagini 2x siano due volte più grandi delle immagini 1x, quindi riduce quest'ultima di un fattore 2, in modo che l'immagine sembri delle stesse dimensioni nella 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

Quanto riportato sopra carica l'asset appropriato nei browser che supportano il set di immagini; in caso contrario, si utilizza l'asset 1x. L'ovvio avvertimento è che, sebbene il supporto dei browser image-set() sia basso, la maggior parte dei browser riceve l'asset 1x.

Utilizza query supporti per fornire immagini ad alta risoluzione o art director

Le query supporti possono creare regole in base alle proporzioni pixel del dispositivo, permettendo di specificare immagini diverse per visualizzazioni 2x e 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 con prefisso del fornitore precedente 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 base. Inoltre, offre il vantaggio di garantire il rendering degli elementi se il browser non supporta 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 della larghezza minima per visualizzare immagini alternative a seconda delle dimensioni dell'area visibile. Questa tecnica presenta 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);
    }
}

Utilizzare il formato SVG per le icone

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

Riepilogo

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

Sostituisci 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 correttamente e hanno un aspetto buono indipendentemente da quanto siano piccoli o grandi siano visualizzati sullo schermo.

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

L'inclusione di un carattere Unicode viene eseguita nello stesso modo in cui le entità con nome sono: &#XXXX, dove XXXX rappresenta il numero di caratteri Unicode. Ad esempio:

You're a super ★

Sei un super ★

Sostituisci le icone complesse con il formato SVG

Per requisiti più complessi, le icone SVG sono generalmente leggere, facili da usare e possono essere definite con CSS. I file SVG hanno diversi vantaggi rispetto alle immagini raster:

• Sono elementi grafici vettoriali che possono essere scalati all'infinito.
• Gli effetti CSS come colore, shadowing, trasparenza e animazioni sono semplici.
• Le immagini SVG possono essere incorporate direttamente nel documento.
• Sono semantici.
• Offrono una migliore accessibilità con 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

Usa con cautela i caratteri delle icone

I caratteri delle icone sono molto diffusi e possono essere facili da usare, ma presentano alcuni svantaggi rispetto alle icone SVG:

• Sono grafiche vettoriali che possono essere scalate all'infinito, ma potrebbero avere anti-alias e generare icone meno nitide come previsto.
• Stili limitati 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 hanno un ambito corretto, possono generare file di grandi dimensioni se viene utilizzato solo un sottoinsieme ridotto 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 caratteri senza costi e a pagamento per le icone, tra cui Font Awesome, Pictos e Glyphicon.

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

Ottimizza il rendimento delle immagini

Le immagini spesso rappresentano la maggior parte dei byte scaricati e occupano una quantità significativa dello spazio visivo nella pagina. Di conseguenza, l'ottimizzazione delle immagini può spesso produrre alcuni dei maggiori risparmi in termini di byte e miglioramenti delle prestazioni per il tuo sito web: minore è il numero di byte che il browser deve scaricare, 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 semplicemente un formato di immagine a caso: scopri i diversi formati disponibili e utilizza il formato più adatto.
• Includi strumenti di ottimizzazione e compressione delle immagini nel 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 ridurne il peso, valuta la possibilità di caricare le immagini solo dopo aver fatto scorrere le immagini per renderle visibili.

Scegli il formato giusto

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

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

Le immagini vettoriali, come loghi e line art, 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 variazione delle dimensioni dei 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 immagine e ognuno ha i propri punti forti e punti deboli.

Inizia con queste linee guida quando scegli il formato appropriato:

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

Riduci le dimensioni del file

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

Sono disponibili diversi strumenti che eseguono un'ulteriore compressione dei file JPG e PNG senza perdita di dati, senza alcun effetto sulla qualità delle immagini. Per JPG, prova jpegtran o jpegoptim (disponibile solo su Linux; esegui l'opzione --strip-all). Per PNG, prova OptiPNG o PNGOUT.

Utilizzare sprite di immagini

Lo sprite CSS è una tecnica in cui diverse immagini vengono combinate in un'unica immagine "spritesheet". Puoi quindi utilizzare singole immagini specificando l'immagine di sfondo di un elemento (il foglio sprite) 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 sprite ha il vantaggio di ridurre il numero di download necessari per ottenere più immagini, abilitando al contempo la memorizzazione nella cache.

Utilizzare 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 esigenze o quando i contenuti principali hanno terminato il caricamento e il rendering. Oltre ai miglioramenti delle prestazioni, l'utilizzo del caricamento lento può creare esperienze di scorrimento continuo.

Fai attenzione quando crei pagine a scorrimento continuo, dato che i contenuti vengono caricati non appena diventano visibili, pertanto 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 vedranno mai perché vengono sempre caricati nuovi contenuti.

Evita completamente le immagini

A volte l'immagine migliore non è affatto un'immagine. Quando possibile, utilizza le funzionalità native del browser per fornire funzionalità uguali o simili. I browser generano elementi visivi che in precedenza avrebbero avuto immagini richieste. Ciò significa che i browser non devono più scaricare file immagine separati, impedendo così un ridimensionamento delle immagini in scala. Per il rendering delle icone, puoi usare caratteri Unicode o delle icone speciali.

Inserisci il testo nel markup anziché incorporato nelle immagini

Ove possibile, il testo deve essere costituito da testo e non incorporato nelle immagini. Ad esempio, l'utilizzo di immagini per i titoli o l'inserimento di informazioni 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 risponde. Inserisci invece il testo nel markup e, se necessario, utilizza i caratteri web per ottenere lo stile desiderato.

Utilizzare CSS per sostituire le immagini

I browser moderni possono utilizzare le funzionalità CSS per creare stili che in precedenza avrebbero avuto immagini richieste. Ad esempio: è possibile creare gradienti complessi utilizzando la proprietà background, creare ombre utilizzando box-shadow e aggiungere gli 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 fai un uso eccessivo, perderai tutti i vantaggi che potresti aver ottenuto e potrebbero ostacolare il rendimento.