Immagini adattabili

Un'immagine vale più di 1000 parole e queste sono parte integrante di ogni pagina. Spesso, però, vengono utilizzati anche la maggior parte dei byte scaricati. Con il responsive web design, non solo i nostri layout possono cambiare in base alle caratteristiche dei dispositivi, ma anche alle immagini.

Con il responsive web design, non solo i layout possono cambiare in base al dispositivo caratteristiche, ma anche i contenuti possono cambiare. Ad esempio, in alto (2x), la grafica ad alta risoluzione garantisce nitidezza. Un'immagine che ha una larghezza del 50% può funzionare correttamente quando il browser è largo 800 px, ma utilizza spazio eccessivo su un telefono stretto e richiede lo stesso overhead di larghezza di banda quando viene ridimensionato per adattarsi a uno schermo più piccolo.

Direzione artistica

Altre volte potrebbe essere necessario modificare l'immagine in modo più drastico, ad esempio cambiando proporzioni, ritaglio e persino sostituzione dell'intera immagine. In questo caso, la modifica dell'immagine è in genere direzione artistica. Consulta responsiveimages.org/demos/ per ulteriori informazioni esempi.

Immagini adattabili

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, per migliorare l'aspetto delle immagini e caricarle rapidamente su qualsiasi dispositivo.

Lungo il percorso, apprenderai una serie di abilità e tecniche per integrare immagini reattive nel flusso di lavoro di sviluppo. Entro la fine nel corso, con immagini che si adattano e rispondono alle tue esigenze dimensioni dell'area visibile e scenari di utilizzo diversi.

Questo è un corso senza costi offerto tramite Udacity

Partecipa al corso

Immagini nel markup

L'elemento img è potente: scarica, decodifica e esegue il rendering e i browser moderni supportano una vasta gamma di formati di immagine. Tra cui: che funzionano su più dispositivi non è diverso da quello dei computer e solo richiede alcuni piccoli ritocchi per creare un'esperienza positiva.

Riepilogo

• Utilizza dimensioni relative per le immagini in modo da evitare l'overflow accidentale nel container.
• Utilizza l'elemento picture quando vuoi specificare immagini diverse a seconda sulle caratteristiche dei dispositivi (ovvero art director).
• Usa srcset e il descrittore x nell'elemento img per fornire suggerimenti il browser in merito all'immagine migliore da utilizzare quando si sceglie tra densità diverse.
• Se la pagina contiene solo una o due immagini che non vengono utilizzate altrove su valuta la possibilità di utilizzare immagini in linea per ridurre le richieste di file.

Utilizzare le dimensioni relative per le immagini

Ricorda di utilizzare le unità relative quando specifichi la larghezza delle immagini per evitare che vengano per evitare l'overflow accidentale dell'area visibile. Ad esempio, width: 50%; causa la larghezza dell'immagine in modo che sia il 50% dell'elemento contenitore (non il 50% dell'area visibile 50% delle dimensioni effettive dei pixel).

Poiché il CSS consente l'overflow dei contenuti dal proprio contenitore, potresti dover utilizzare width: 100% per evitare l'overflow di immagini e altri contenuti. Ad esempio:

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

Assicurati di fornire descrizioni significative tramite l'attributo alt su img elementi; contribuiscono a rendere il sito più accessibile fornendo contesto alla schermata lettori e altre tecnologie per la disabilità.

Migliora i img con srcset per i dispositivi con DPI elevato

L'attributo srcset migliora il comportamento dell'attributo Elemento img, per semplificare l'invio di più file immagine per le diverse caratteristiche dei dispositivi. Simile a image-set Funzione CSS nativo di CSS, srcset consente al browser di scegliere dell'immagine in base alle caratteristiche del dispositivo, ad esempio l'uso un'immagine 2x su un display 2x e, potenzialmente, 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 browser predefinito file immagine specificato dall'attributo src. Per questo è importante includi sempre un'immagine 1x che possa essere visualizzata su qualsiasi dispositivo, indipendentemente le funzionalità di machine learning. Quando la funzionalità srcset è supportata, l'elenco separato da virgole di l'immagine/condizioni viene analizzata prima di effettuare qualsiasi richiesta e solo venga scaricata e visualizzata l'immagine appropriata.

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

Direzione artistica nelle immagini adattabili con picture

Cambiare le immagini in base alle caratteristiche del dispositivo, nota anche come grafica nella direzione opposta, usa l'elemento picture. La L'elemento picture definisce una soluzione dichiarativa per fornendo più versioni di un'immagine in base a diversi caratteristiche, come dimensioni del dispositivo, risoluzione del dispositivo, orientamento, e altro ancora.

Utilizza l'elemento picture quando l'origine di un'immagine esiste in più densità o quando un reattivo design indica un'immagine leggermente diversa su alcuni tipi di schermi. Simile al video elemento; è possibile aggiungere più elementi source da includere, consentendo di specificare diversi file immagine in base alle query supporti o al formato delle immagini.

<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, allora head.jpg o head-2x.jpg, a seconda della risoluzione del dispositivo. Se browser è compreso tra 450 e 800 px, viene quindi utilizzato di nuovo head-small.jpg o head-small- 2x.jpg, a seconda della risoluzione del dispositivo. Per larghezze dello schermo inferiore a 450 px e compatibilità con le versioni precedenti in cui l'elemento picture non è supportata, il browser esegue il rendering dell'elemento img e dovrebbe essere sempre inclusi.

Immagini di dimensioni relative

Quando non si conoscono le dimensioni finali dell'immagine, può essere difficile specificare descrittore di densità per le origini dell'immagine. Ciò è particolarmente vero per le immagini che coprono una larghezza proporzionale del browser e sono fluide, a seconda dimensione 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 immagine, consentendo al browser di calcolare automaticamente il densità dei pixel 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 esegue il rendering di un'immagine che ha una larghezza pari a metà dell'area visibile (sizes="50vw") e a seconda della larghezza del browser e del pixel del dispositivo consente al browser di scegliere l'immagine corretta indipendentemente dalle dimensioni finestra del browser. Ad esempio, la tabella seguente mostra quale immagine viene browser sceglierebbe:

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

Tenere conto dei punti di interruzione nelle immagini adattabili

In molti casi, le dimensioni delle immagini possono cambiare a seconda del layout del sito. punti di interruzione. Ad esempio, su uno schermo piccolo, potresti volere che l'immagine l'intera larghezza dell'area visibile, mentre sugli schermi più grandi dovrebbe ne prese 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 riportato sopra, utilizza diverse query supporti per e specificare le dimensioni dell'immagine. Quando la larghezza del browser è maggiore di 600 px, l'immagine corrisponde al 25% della larghezza dell'area visibile. quando è compreso tra 500 px e 600 px, l'immagine corrisponde al 50% della larghezza dell'area visibile. e inferiore a 500 px, è a larghezza intera.

Rendere espandibili le immagini prodotto

I clienti vogliono vedere cosa acquistano. Sui siti di vendita al dettaglio, gli utenti si aspettano di puoi vedere primi piani ad alta risoluzione dei prodotti per vedere meglio dettagli partecipanti allo studio se non ci fosse stato possibile.

Un buon esempio di immagini espandibili toccabili è fornito da J. Sito dell'equipaggio. La scomparsa di un overlay indica che è possibile toccare un'immagine, con un conseguente ingrandimento nell'immagine con dettagli minuziosi visibili.

Altre tecniche per le immagini

Immagini compresse

La tecnica delle immagini compresse consente di pubblicare un'immagine 2x molto compressa per tutti i dispositivi, indipendentemente funzionalità del dispositivo. In base al tipo di immagine e al livello compressione, la qualità dell'immagine potrebbe non cambiare, ma le dimensioni del file calano in modo significativo.

Prova

Sostituzione di immagini JavaScript

La sostituzione dell'immagine JavaScript controlla le funzionalità del dispositivo e "viene cosa giusta". Puoi determinare le proporzioni pixel del dispositivo tramite window.devicePixelRatio, ottieni larghezza e altezza dello schermo ed eventualmente qualche sniffing della connessione di rete tramite navigator.connection o emettendo un falso richiesta. Una volta raccolte tutte queste informazioni, puoi decidere quali dell'immagine da caricare.

Uno svantaggio importante di questo approccio è che usare JavaScript comporta ritarda il caricamento delle immagini fino al termine almeno del parser look-ahead. Questo significa che il download delle immagini non inizierà fino a dopo l'evento pageload incendi. Inoltre, è molto probabile che il browser scarichi sia l'interfaccia 1x che quella 2x. con conseguente aumento del peso della pagina.

Immagini incorporate: raster e vettoriale

Ci sono due modi fondamentalmente diversi per creare e archiviare le immagini: questo influisce sul modo in cui esegui il deployment delle immagini in modo reattivo.

Le immagini raster, come fotografie e altre immagini, vengono rappresentati come una griglia di singoli punti di colore. Potrebbero essere visualizzate immagini raster da una fotocamera o uno scanner oppure essere creati con l'elemento canvas HTML. Formati come PNG, JPEG e WebP, servono per memorizzare immagini raster.

Le immagini vettoriali, ad esempio loghi e disegni a linee, sono definite come un insieme di curve, linee, forme, colori di riempimento e gradienti. È possibile creare immagini vettoriali con programmi come Adobe Illustrator o Inkscape oppure testo scritto a mano libera con in formato vettoriale come SVG.

SVG

Il formato SVG consente di includere grafica vettoriale adattabili in una pagina web. La il vantaggio dei formati di file vettoriali rispetto ai formati di file raster è che il browser può eseguire il rendering di un'immagine vettoriale di qualsiasi dimensione. I formati vettoriali descrivono la geometria l'immagine: come è strutturata 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 il ridimensionamento.

Di seguito sono riportate due versioni della stessa immagine: un'immagine PNG a sinistra e un file SVG sulla quella a destra. Il formato SVG ha un aspetto fantastico in qualsiasi dimensione, mentre il file PNG accanto inizia appare sfocata su display di dimensioni maggiori.

Se vuoi ridurre il numero di richieste di file effettuate dalla tua pagina, puoi scrivere il codice immagini incorporate in formato SVG o URI dei dati. Se visualizzi il codice sorgente di questa pagina, noterai che entrambi i loghi: un URI di dati e un SVG sono dichiarati in linea.

SVG offre un ottimo supporto su dispositivi mobili e computer, e gli strumenti per l'ottimizzazione possono ridurre significativamente le dimensioni del file SVG. I due loghi SVG in linea che seguono hanno identico, ma uno è di circa 3 KB e l'altro solo 2 KB:

URI dati

Gli URI dati forniscono un modo per includere un file, ad esempio un'immagine, in linea impostandolo il src di un elemento img come stringa codificata Base64 utilizzando 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 contiene più di 5000 caratteri.

Trascina di eliminazione dei dati, come jpillora.com/base64-encoder sono disponibili per convertire i file binari, come le immagini, in URI di dati. Proprio come gli SVG, Gli URI di dati sono ben supportati sui dispositivi mobili browser desktop.

Incorporamento in CSS

Anche gli URI dei dati e i file SVG possono essere incorporati in CSS (supportato in CSS) sia su dispositivi mobili che su computer. Ecco due immagini dall'aspetto identico implementate immagini di sfondo in CSS; un URI dati, un SVG:

Fornitori incorporati e contro

Il codice incorporato per le immagini può essere dettagliato, in particolare gli URI dati, quindi perché vuoi usarlo? Per ridurre le richieste HTTP. Gli SVG e gli URI di dati possono abilitare un'intera pagina web, inclusi immagini, CSS e JavaScript, da recuperare con una singola richiesta.

Svantaggio:

• Sui dispositivi mobili, gli URI dei dati possono essere notevolmente più lenti da visualizzare su dispositivi mobili anziché nelle immagini di un src esterno.
• Gli URI dei dati possono aumentare notevolmente le dimensioni di una richiesta HTML.
• Aggiungono complessità al tuo markup e al tuo flusso di lavoro.
• Il formato URI 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, pertanto devono essere scaricati per ogni pagina in cui vengono utilizzati.
• Non sono supportati in IE 6 e 7, il supporto è incompleto in IE8.
• Con HTTP/2, la riduzione del numero di richieste di asset diventa una priorità inferiore.

Come per tutti gli aspetti reattivi, è necessario fare delle prove per capire cosa funziona meglio. Usa sviluppatore per misurare le dimensioni dei file di download, il numero di richieste e il totale una latenza di pochi millisecondi. A volte gli URI dati possono essere utili per le immagini raster, ad esempio su una home page che contenga una o due foto che non sono utilizzate altrove. Se immagini vettoriali in linea, il formato SVG è un'opzione molto migliore.

Immagini in CSS

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

Riepilogo

• Utilizza l'immagine migliore in base alle caratteristiche del display, considera lo schermo dimensioni, risoluzione del dispositivo e layout di pagina.
• Modifica la proprietà background-image in CSS per le visualizzazioni con valore 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 in markup dei dati.
• Considera i costi delle prestazioni quando utilizzi la sostituzione di immagini JavaScript o quando vengono pubblicate immagini ad alta risoluzione ad alta compressione su con dispositivi con risoluzione più bassa.

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

Le query supporti non influiscono solo sul layout della pagina, puoi anche utilizzarli caricare le immagini in modo condizionale o fornire una direzione artistica in base all'area visibile standard.

Ad esempio, nell'esempio in basso, solo small.png è su schermi più piccoli scaricato e applicato ai contenuti div, 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

Utilizza il set di immagini per fornire immagini ad alta risoluzione

La funzione image-set() in CSS migliora il comportamento della proprietà background, permettendo di fornire più file immagine per diversi dispositivi caratteristiche. Ciò consente al browser di scegliere l'immagine migliore in base le caratteristiche del dispositivo, ad esempio l'uso di un'immagine 2x su un display 2x, o un'immagine 1x su un dispositivo 2x quando si trova 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 il doppio grande come immagini 1x, quindi ridimensiona l'immagine 2x di un fattore di 2, che l'immagine abbia le stesse dimensioni della pagina.

Il supporto per image-set() è ancora una novità ed è supportato solo in Chrome e Safari con il prefisso del fornitore -webkit. Includi 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 sopra carica l'asset appropriato nei browser che supportano il set di immagini. altrimenti viene restituito l'asset 1x. L'avvertenza ovvia è che, sebbene Il supporto dei browser image-set() è basso, la maggior parte dei browser riceve l'asset 1x.

Utilizzare le query supporti per fornire immagini ad alta risoluzione o art director

Le query supporti possono creare regole basate proporzioni pixel del dispositivo, permettendo di specificare immagini diverse per i 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 i linguaggi standard (min-resolution: 2dppx), mentre i browser Safari e Android richiedono entrambi il prefisso del fornitore precedente senza l'unità dppx. Ricorda che questi stili vengono caricati solo se corrisponde alla query multimediale e devi specificare gli stili per la base. Ciò offre anche il vantaggio di garantire che venga eseguito il rendering di un elemento quando il browser non supporta query supporti specifiche della 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 le dimensioni dell'area visibile. Questa tecnica ha il vantaggio che l'immagine non sia scaricati se la query multimediale non corrisponde. Ad esempio, bg.png è solo scaricati e applicati al body se la larghezza del browser è pari o superiore a 500 px:

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

Utilizzare SVG per le icone

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

Riepilogo

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

Sostituisci le icone semplici con Unicode

Molti caratteri supportano la miriade di glifi Unicode, che possono essere usati anziché immagini. A differenza delle immagini, i caratteri Unicode ridimensionano in modo ottimale a prescindere da quanto siano grandi o piccoli sullo schermo.

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

L'inclusione di un carattere Unicode avviene 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 icone complesse con SVG

Per requisiti più complessi per le icone, le icone SVG sono generalmente leggere, facile da usare e può essere applicato agli stili CSS. I formati SVG offrono diversi vantaggi rispetto immagini raster:

• Sono grafiche vettoriali con possibilità di scalabilità infinita.
• Vengono visualizzati effetti CSS come colore, ombreggiatura, trasparenza e animazioni in modo diretto.
• 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 i caratteri delle icone con cautela

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

• Si tratta di grafiche vettoriali con scalabilità infinita, ma che possono L'anti-alias produce icone meno nitide come previsto.
• Stili limitati con CSS.
• Il posizionamento perfetto dei pixel può essere difficile, a seconda dell'altezza della linea, 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 definite in modo adeguato, possono generare file di grandi dimensioni perché utilizzano solo un 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 caratteri di icone senza costi e a pagamento, tra cui Font Fantastico, 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 usare un'immagine o uno sprite immagine.

Ottimizza le immagini per migliorare il rendimento

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

Riepilogo

• Non scegliere un formato dell'immagine a caso: cerca di capire i diversi formati disponibili e usare il formato più adatto.
• Includi strumenti di ottimizzazione e compressione delle immagini nel tuo flusso di lavoro per ridurre dimensioni dei file.
• Riduci il numero di richieste http posizionando le immagini utilizzate di frequente immagini sprite.
• Per migliorare il tempo di caricamento iniziale della pagina e ridurre il peso iniziale, considera l'idea di caricare le immagini solo dopo averle sfogliate per visualizzarle.

Scegli il formato giusto

Devi prendere in considerazione due tipi di immagini: immagini vettoriali e immagini raster. Per le immagini raster occorre 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 in genere provengono da una fotocamera scanner oppure possono essere create nel browser con l'elemento canvas. Come aumenta anche la dimensione dell'immagine. Quando viene ridimensionato dimensione originale, le immagini raster diventano sfocate perché il browser deve indovinare come riempire i pixel mancanti.

Le immagini vettoriali, ad esempio loghi e disegni a linee, 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 salvati in un formato vettoriale come SVG Poiché le immagini vettoriali si basano semplici primitive, possono essere scalate senza alcuna perdita di qualità di modifica delle dimensioni del file.

Quando si sceglie il formato appropriato, è importante considerare sia il l'origine dell'immagine (raster o vettoriale) e i contenuti (colori, animazione, testo ecc.). Nessun formato è adatto a tutti i tipi di immagine e ognuno ha i propri punti di forza e i punti deboli.

Inizia con queste linee guida quando scegli il formato appropriato:

• Utilizza JPG per le immagini fotografiche.
• Utilizza SVG per grafica vettoriale e elementi grafici a tinta unita, ad esempio loghi e disegni a linee. Se la grafica vettoriale non è disponibile, prova WebP o PNG.
• Usa PNG anziché GIF in quanto consente più colori e offre migliori rapporti di compressione.
• Per animazioni più lunghe, puoi utilizzare <video>, che fornisce un'immagine migliore e offre all'utente il controllo sulla riproduzione.

Riduci le dimensioni del file

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

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

Usa immagini sprite

Lo sprite CSS è una tecnica mediante la quale un certo numero di immagini vengono combinate in un "foglio sprite" dell'immagine. Puoi quindi utilizzare le singole immagini specificando immagine di sfondo di 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 sprite ha il vantaggio di ridurre il numero di download necessari per ottenere a più immagini, pur consentendo la memorizzazione nella cache.

Valuta la possibilità di utilizzare il caricamento lento

Il caricamento lento può velocizzare notevolmente il caricamento di pagine lunghe che includono molte le immagini below the fold caricandole se necessario o quando il caricamento e il rendering dei contenuti. Oltre al rendimento, miglioramenti, l'utilizzo del caricamento lento può creare esperienze di scorrimento continuo.

Fai attenzione quando crei pagine a scorrimento continuo, perché i contenuti vengono caricati sotto forma di diventa visibile, i motori di ricerca potrebbero non vederli mai. Inoltre, agli utenti che cercano informazioni che si aspettano di trovare nel piè di pagina, non vedrà mai il piè di pagina perché nuovi contenuti vengono sempre caricati.

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à. I browser generano immagini che in precedenza avrebbero richiesto in formato Docker. Ciò significa che i browser non devono più scaricare immagini separate evitando così immagini ridimensionate in modo scomodo. Puoi usare Unicode o Special Edition per eseguire il rendering delle icone.

Inserisci il testo nel markup anziché incorporato nelle immagini

Ove possibile, il testo deve essere testo e non incorporato nelle immagini. Per Ad esempio, l'utilizzo di immagini per i titoli o il posizionamento di dati di contatto, numeri di telefono o indirizzi: l'accesso diretto alle immagini impedisce agli utenti copiare e incollare le informazioni; rende le informazioni inaccessibili per screen reader e non risponde. Inserisci invece il testo nel markup e, se necessario, utilizza i caratteri web per ottenere lo stile che ti serve.

Utilizzare CSS per sostituire le immagini

I browser moderni possono utilizzare le funzionalità CSS per creare stili che in precedenza avrebbero le immagini richieste. Ad esempio, puoi creare gradienti complessi utilizzando background, le ombre possono essere create utilizzando box-shadow e arrotondate puoi aggiungere angoli con la proprietà border-radius.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque seduto 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. Fatto 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, può essere significativo sui dispositivi mobili. Se lo usi troppo, perderai i vantaggi che potresti sono aumentati e questo potrebbe indebolire il rendimento.