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 layout possono cambiare non solo in base alle caratteristiche dei dispositivi, ma anche in base alle immagini.

Adattabile web design significa che non solo i nostri layout possono cambiare in base alle caratteristiche dei dispositivi, ma anche i contenuti possono cambiare. Ad esempio, sui display ad alta risoluzione (2x), la grafica ad alta risoluzione garantisce la nitidezza. Un'immagine con una larghezza del 50% può andar bene quando il browser ha una larghezza di 800 px, ma occupa troppo spazio su uno smartphone stretto e, quando viene ridotto, richiede lo stesso sovraccarico di larghezza di banda per adattarsi a uno schermo più piccolo.

Art director

Esempio di art director

Altre volte è possibile che l'immagine debba essere modificata più drasticamente, ad esempio cambiando le proporzioni, ritagliandola e persino sostituendo l'intera immagine. In questo caso, la modifica dell'immagine è di solito indicata come art director. Per altri esempi, consulta la pagina responsiveimages.org/demos/.

Immagini adattabili

Screenshot del corso Udacity

Sapevi che le immagini rappresentano in media più del 60% dei byte necessari per caricare una pagina web?

In questo corso imparerai a utilizzare le immagini sul web moderno, in modo che abbiano un aspetto fantastico e vengano caricate rapidamente su qualsiasi dispositivo.

Lungo il percorso, acquisirai una serie di competenze e tecniche per integrare senza problemi le immagini adattabili nel flusso di lavoro di sviluppo. Alla fine del corso, sarai in grado di sviluppare 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'inclusione di immagini che funzionano su più dispositivi non è diversa da quella utilizzata per i 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 per specificare immagini diverse a seconda delle caratteristiche del dispositivo (ovvero, art director).
  • Usa srcset e il descrittore x nell'elemento img per fornire al browser informazioni sull'immagine migliore da utilizzare per scegliere tra diverse densità.
  • Se la pagina ha solo una o due immagini che non vengono utilizzate altrove nel sito, potresti usare immagini in linea 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 in pixel).

Poiché CSS consente l'overflow dei contenuti, 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. Questi elementi contribuiscono a rendere il tuo sito più accessibile fornendo contesto a screen reader e altre tecnologie per la disabilità.

Migliora img con srcset per dispositivi con DPI elevato

L'attributo srcset migliora il comportamento dell'elemento img, semplificando l'invio di più file immagine per le diverse caratteristiche del dispositivo. Analogamente alla image-set funzione CSS 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 trova su una rete a 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 può essere visualizzata su qualsiasi dispositivo, indipendentemente dalle funzionalità. Se srcset è supportato, l'elenco di immagini/condizioni separate da virgole 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

Esempio di art director

Per modificare le immagini in base alle caratteristiche del dispositivo, anche noto 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 è presente con diverse densità o quando un design adattabile impone un' immagine leggermente diversa su alcuni tipi di schermi. Analogamente all'elemento video, possono essere inclusi più elementi source, in modo da 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 larghezze dello schermo inferiori a 450 px e compatibilità con le versioni precedenti in cui l'elemento picture non è supportato, il browser esegue invece 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. Questo vale in particolare per le immagini che si estendono su una larghezza proporzionale del browser e sono fluide, a seconda delle sue dimensioni.

Invece di fornire dimensioni e densità fisse delle immagini, puoi specificare la dimensione di ogni immagine fornita aggiungendo un descrittore di larghezza insieme a quelle dell'elemento immagine. In questo modo il browser potrà 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 del rapporto pixel del dispositivo, consente al browser di scegliere l'immagine corretta indipendentemente dalle dimensioni della finestra del browser. Ad esempio, la tabella riportata di seguito mostra quale immagine sceglierebbe il browser:

Larghezza del browser Proporzioni 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

Tieni conto dei punti di interruzione nelle immagini adattabili

In molti casi, le dimensioni dell'immagine possono variare in base ai punti di interruzione del layout del sito. Ad esempio, su uno schermo piccolo, l'immagine potrebbe occupare l'intera larghezza dell'area visibile, mentre su schermi più grandi dovrebbe assumere solo una piccola proporzione.

<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 multimediali per specificare le dimensioni 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; se è inferiore a 500 px, l'immagine è a larghezza intera.

Rendere espandibili le immagini prodotto

J. Sito web delle squadre con immagine espandibile del prodotto
J. Sito web dell'equipaggio con immagine prodotto espandibile.

I clienti vogliono vedere cosa stanno acquistando. Sui siti di vendita al dettaglio, gli utenti si aspettano di poter vedere in primo piano ad alta risoluzione dei prodotti per vederne meglio i dettagli e i partecipanti allo studio si sentono frustrati se non ci erano in grado di farlo.

Un buon esempio di immagini espandibili selezionabili è 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 compressive

La tecnica di immagini compresse pubblica 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 delle immagini JavaScript verifica 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 potenzialmente anche eseguire lo sniffing della connessione di rete tramite navigator.connection o inviare una richiesta falsa. Dopo aver raccolto tutte queste informazioni, puoi decidere quale immagine caricare.

Un grande svantaggio di questo approccio è che l'utilizzo di JavaScript rallenta 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 probabilmente il browser scaricherà sia le immagini 1x che 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 e questo influisce sul modo in cui esegui il deployment delle immagini in modo reattivo.

Immagini raster, come fotografie e altre immagini, rappresentate come una griglia di singoli punti di colore. Le immagini raster potrebbero 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, ad esempio loghi e linee artistiche, 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 o 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 di file vettoriali rispetto ai formati di file raster è che il browser può visualizzare un'immagine vettoriale in qualsiasi dimensione. I formati vettoriali descrivono la geometria dell'immagine, come è costruita da linee, curve, colori e così via. I formati raster, invece, contengono solo informazioni sui singoli punti di colore, pertanto 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 ha un aspetto perfetto con qualsiasi dimensione, mentre il file PNG accanto inizia a essere sfocato su schermi di dimensioni maggiori.

Logo HTML5, formato PNG
Logo HTML5, formato SVG

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 di dati. Se visualizzi il codice sorgente di questa pagina, noterai che entrambi i loghi di seguito sono dichiarati incorporati: un URI dati e un SVG.

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

URI dati

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

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

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

<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 gli SVG, gli URI di dati sono ben supportati sui browser mobile e desktop.

Incorporato in CSS

Gli URI dati e le SVG possono anche essere incorporati in CSS e questa operazione è supportata sia su dispositivi mobili sia su computer. Ecco due immagini dall'aspetto identico implementate come immagini di sfondo in CSS: un URI di dati e un SVG:

Vantaggi e svantaggi

Il codice in linea per le immagini può essere dettagliato, in particolare gli URI 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 un'unica richiesta.

Svantaggio:

  • Sui dispositivi mobili, la visualizzazione degli URI dati può essere notevolmente 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 superiore al 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 su cui vengono utilizzati.
  • Non sono supportati in IE 6 e 7, supporto incompleto in IE8.
  • Con HTTP/2, la riduzione del numero di richieste di asset diventerà meno una priorità.

Come per tutti gli elementi che richiedono una risposta, devi testare cosa funziona meglio. Utilizza gli strumenti per sviluppatori per misurare le dimensioni dei 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 contiene solo una o due foto che non vengono utilizzate altrove. Se devi incorporare immagini vettoriali, il formato SVG è un'opzione molto migliore.

Immagini in CSS

La proprietà CSS background è uno strumento efficace per aggiungere immagini complesse agli elementi, semplificando l'aggiunta di più immagini e 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 di pagina.
  • Modifica la proprietà background-image in CSS per 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 bassa risoluzione.

Usa query supporti per il caricamento condizionale delle immagini o la direzione artistica

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 management in base alla larghezza dell'area visibile.

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

Utilizza il set di immagini per fornire immagini ad alta risoluzione

La funzione image-set() in CSS migliora la proprietà del comportamento background, agevolando la fornitura di più file immagine per le diverse caratteristiche 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 a 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 avere le stesse dimensioni sulla pagina.

Il supporto di 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, utilizza l'asset 1x. L'avvertenza è che, sebbene il supporto del browser image-set() sia basso, la maggior parte dei browser ottiene l'asset 1x.

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

Le query supporti possono creare regole basate sul rapporto pixel del dispositivo, in modo da specificare immagini diverse per display 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 multimediale e devi specificare gli stili per il caso base. Ciò offre anche il vantaggio di garantire il rendering di un elemento se il browser non supporta query multimediali 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 a seconda delle dimensioni dell'area visibile. Questa tecnica presenta il vantaggio che l'immagine non viene scaricata se la query sui contenuti multimediali 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);
    }
}

Usa il formato SVG per le icone

Quando aggiungi icone alla pagina, se possibile, utilizza 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 le icone semplici con le icone 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 sono scalabili e hanno un aspetto ottimale, indipendentemente da quanto siano piccoli o grandi sullo schermo.

Oltre al set di caratteri normale, un 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 &#9733;

Complimenti ★

Sostituisci le icone complesse con SVG

Per requisiti più complessi, le icone SVG sono generalmente leggere, facili da usare e possono essere stilizzate con CSS. Il formato SVG ha diversi vantaggi rispetto alle immagini raster:

  • Sono grafiche vettoriali che possono essere scalate all'infinito.
  • Gli effetti CSS come colore, ombreggiatura, trasparenza e animazioni sono immediati.
  • Le immagini SVG possono essere incorporate direttamente nel documento.
  • Sono semantici.
  • Offrono 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

Usa con cautela i caratteri delle icone

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

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

  • Sono elementi grafici vettoriali che possono essere scalati all'infinito, ma potrebbero avere anti-alias e generare icone meno nitide come previsto.
  • Stili limitati con CSS.
  • Il posizionamento perfetto del pixel può essere difficile, a seconda dell'altezza della riga, dell'interlinea tra le lettere e così via.
  • Non sono semantici e possono essere difficili da usare con gli screen reader o altre tecnologie per la disabilità.
  • Se l'ambito non è corretto, possono generare file di grandi dimensioni utilizzando 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 per le icone senza costi e a pagamento, 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 meglio utilizzare un'immagine o uno sprite di immagini.

Ottimizza il rendimento delle immagini

Le immagini spesso rappresentano la maggior parte dei byte scaricati e spesso occupano una quantità significativa dello spazio visivo sulla pagina. Di conseguenza, l'ottimizzazione delle immagini può spesso produrre alcuni dei maggiori miglioramenti del risparmio di byte e 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ù veloce il browser può scaricare e visualizzare tutti gli asset.

Riepilogo

  • Non scegliere semplicemente un formato dell'immagine a caso: scopri i diversi formati disponibili e utilizza il formato 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 posizionando le immagini utilizzate di frequente negli sprite di immagini.
  • Per migliorare il tempo di caricamento iniziale della pagina e ridurne il peso iniziale, valuta la possibilità di caricare le immagini solo dopo che sono diventate 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 da uno scanner oppure possono essere create nel browser con l'elemento canvas. Con l'aumento delle dimensioni dell'immagine aumentano anche le dimensioni del file. Se ingrandite rispetto alle dimensioni originali, le immagini raster diventano sfocate perché il browser deve indovinare come riempire i pixel mancanti.

Le immagini vettoriali, ad esempio loghi e linee artistiche, 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 si basano su primitive semplici, possono essere scalate senza alcuna perdita di qualità o modifiche alle dimensioni dei file.

Quando scegli il formato appropriato, è importante considerare sia l'origine dell'immagine (raster o vettore) sia i contenuti (colori, animazione, testo e così via). Nessun formato si adatta a tutti i tipi di immagine e ognuno ha i suoi punti di forza e di debolezza.

Per scegliere il formato appropriato, segui queste linee guida:

  • Utilizza JPG per le immagini fotografiche.
  • Utilizza SVG per gli artwork vettoriali e grafiche a colori in tinta unita come loghi e disegni al tratto. 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, valuta 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 a riga di comando. Se possibile, ti consigliamo di provare ad automatizzare l'ottimizzazione delle immagini in modo che siano integrati nel flusso di lavoro.

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

Utilizzare sprite di immagini

Foglio sprite di immagini utilizzato nell&#39;esempio

Lo spriting CSS è una tecnica in cui un numero di immagini viene combinato 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

Spriting offre il vantaggio di ridurre il numero di download necessari per ottenere più immagini, abilitando 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 esigenze o al termine del caricamento e del rendering dei contenuti principali. Oltre a miglioramenti delle prestazioni, l'utilizzo del caricamento lento può creare esperienze di scorrimento continuo.

Fai attenzione quando crei pagine a scorrimento continuo: poiché i contenuti vengono caricati non appena diventano visibili, i motori di ricerca potrebbero non vederli mai. Inoltre, gli utenti che cercano informazioni da trovare nel piè di pagina non lo vedono 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 immagini che prima richiedevano immagini. Ciò significa che i browser non devono più scaricare file immagine separati, evitando così immagini scalate in modo imbarazzante. Per il rendering delle icone puoi usare caratteri speciali o Unicode.

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 rispondono. Inserisci invece il testo nel markup e, se necessario, utilizza i caratteri web per ottenere lo stile desiderato.

Utilizzare il CSS per sostituire le immagini

I browser moderni possono utilizzare le funzionalità CSS per creare stili che in precedenza avevano immagini richieste. Ad esempio: è possibile creare gradienti complessi utilizzando la proprietà background, creare ombre utilizzando box-shadow e aggiungere 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'uso di queste tecniche richiede cicli di rendering, che possono essere significativi sui dispositivi mobili. Se utilizzato in modo eccessivo, perderai tutti i vantaggi che potresti aver ottenuto e potrebbe ostacolare il rendimento.