Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Immagini

Un'immagine vale più di mille parole e ricopre un ruolo chiave in ogni pagina. Tuttavia spesso rappresenta anche la maggior parte dei byte scaricati. Con il Web design reactive, non solo il layout ma anche le immagini possono adattarsi alle caratteristiche del dispositivo.

Immagini reattive

Il Web design reactive consente di modificare sia i layout che i contenuti in base alle caratteristiche del dispositivo. Ad esempio, devi utilizzare elementi grafici ad alta risoluzione sui display (2x) ad alta risoluzione per ottenere una buona nitidezza. Un'immagine con una larghezza del 50% tende a funzionare su un browser di larghezza pari a 800 pixel, ma utilizzerebbe risorse eccessive su un cellulare dallo schermo ridotto e consumerebbe la stessa larghezza di banda anche se scalata per uno schermo piccolo.

Direzione artistica

Esempio di direzione
artistica

In altre circostanze potrebbe essere necessario modificare drasticamente l'immagine, come ad esempio ridimensionarla, ritagliarla o persino sostituirla. In questi casi, le modifiche all'immagine vengono definite 'direzione rtistica'. Consulta responsiveimages.org/demos/ per ulteriori esempi.

Immagini Responsive

Lo sapevi che le immagini rappresentano più del 60% dei byte mediamente necessari per caricare una pagina web?

In questo corso imparerai a lavorare con le immagini sul web moderno, in modo che le tue immagini siano fantastiche e si carichino velocemente su qualsiasi dispositivo.

Attraverso il corso, raccoglierai una serie di skill e tecniche per integrare senza problemi le immagini responsive nel tuo workflow di sviluppo. Alla fine del corso, svilupperai con immagini che si adattano e rispondono a diversi formati di visualizzazione e scenari di utilizzo.

Questo è un corso gratuito offerto attraverso Udacity

Inizia il corso

Immagini nel markup

Il potente elementoimg consente di scaricare, decodificare e renderizzare i contenuti, mentre i browser odierni supportano numerosi formati di immagine. La procedura di inserimento delle immagini compatibili con diversi dispositivi è simile a quella usata con i computer desktop e richiede minime regolazioni per offrire un'esperienza ottimale.

TL;DR

  • Utilizza le dimensioni relative delle immagini per evitare l'overflow involontario del contenitore.
  • Utilizza l'elemento picture per specificare immagini diverse in base alle caratteristiche del dispositivo (operazione detta 'direzione artistica').
  • Utilizza srcset e il descrittore x nell'elemento img per indicare al browser l'immagine da utilizzare in presenza di diverse densità.

Utilizzo delle dimensioni relative per le immagini

L'utilizzo delle unità relative per la larghezza delle immagine previene l'overflow involontario del viewport. Ad esempio, con width: 50% si ottiene una larghezza dell'immagine pari al 50% dell'elemento contenitore e non della dimensione effettiva dei pixel o del viewport.

Poiché CSS consente l'overflow del contenitore dei contenuti, può essere necessario utilizzare max-width: 100% per evitare l'overflow di immagini e altri contenuti. Ad esempio:

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

Inserisci descrizioni dettagliate con l'attributo alt degli elementi img per ottimizzare l'accessibilità del sito e fornire contesto ai lettori di schermo o altre tecnologie assistive.

Ottimizzazione di img con srcset per dispositivi a DPI elevati

L'attributo srcset ottimizza l'azione dell'elemento img semplificando la fornitura di diversi file di immagine in base alle caratteristiche dei dispositivi. In maniera analoga alla funzione nativa CSS image-set , srcset indica al browser l'immagine ottimale in base alle caratteristiche del dispositivo, ad esempio un'immagine 2x su un display 2x e un'immagine 1x su dispositivi 2x con limiti di larghezza di banda.

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

I browser che non supportano srcset utilizzano il file di immagine predefinito indicato dall'attributo src. Per questo motivo fondamentale inserire sempre un'immagine 1x visualizzabile su qualsiasi dispositivo, indipendentemente dalle funzionalità. Se srcset è supportato, l'elenco di immagini/condizioni separato da virgole viene analizzato prima dell'esecuzione delle richieste, quindi viene scaricata e visualizzata solo l'immagine più appropriata.

Anche se le condizioni possono includere diverse caratteristiche, dalla densità dei pixel fino a larghezza e altezza, al momento solo la densità pixel gode di un supporto ottimale. Per equilibrare il comportamento attuale con le funzionalità future, prova a inserire l'immagine 2x nell'attributo.

Direzione artistica nelle immagini reactive con picture

La modifica delle immagini in base alle caratteristiche del dispositivo, detta anche direzione artistica, avviene mediante l'elemento picture. L'elemento picture definisce una soluzione dichiarativa per la fornitura di diverse versioni di un'immagine in base a caratteristiche come dimensioni e risoluzione del dispositivo, orientamento e via dicendo.

Esempio di direzione
artistica

Utilizzare l'elemento picture quando esiste un'origine dell'immagine a densità multiple o quando una grafica reattiva impone l'utilizzo di un'immagine diversa su alcuni tipi di schermi. Così come avviene per l'elemento video, è possibile inserire diversi elementi source per specificare diversi file d'immagine in base alle media query o al 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>

Nell'esempio precedente, se la larghezza del browser è di almeno 800 pixel, in base alla risoluzione del dispositivo viene utilizzato head.jpg o head-2x.jpg. Se la larghezza del browser è compresa fra 450 e 800 pixel, anche in questo caso viene utilizzato head.jpg o head-2x.jpg a seconda della risoluzione del dispositivo. Con schermi di larghezze inferiori a 450 pixel e retrocompatibilità nei casi in cui l'elemento picture non sia supportato, il browser esegue il rendering dell'elemento img (che occorre includere sempre).

Immagini con dimensioni relative

Se non si conosce la dimensione finale dell'immagine può essere difficile indicare un descrittore di densità per le origini dell'immagine. In particolare, ciò avviene con le immagini fluide e distribuite sulla larghezza proporzionale del browser in base alle dimensioni dello stesso.

Invece di indicare densità e dimensioni fisse dell'immagine, è possibile specificare le dimensioni di ciascuna immagine fornita aggiungendo un descrittore di larghezza contenente la dimensione dell'elemento dell'immagine, consentendo al browser di calcolare 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">

Nell'esempio precedente viene eseguito il rendering di un'immagine di dimensione pari alla metà della larghezza del viewport (sizes="50vw"), basata sulla larghezza del browser e sulle proporzioni in pixel del dispositivo, consentendo al browser di utilizzare l'immagine corretta indipendentemente dalla larghezza della finestra del browser. Ad esempio, la tabella sottostante indica l'immagine che verrà utilizzata dal browser:

Larghezza del browser Proporzioni in pixel del dispositivo Immagine utilizzata Risoluzione effettiva
400 pixel 1 200.png 1x
400 pixel 2 400.png 2x
320px 2 400.png 2.5x
600px 2 800.png 2,67x
640 px 3 1000.png 3,125x
1100px 1 1400.png 1.27x

Attenzione ai breakpoint nelle immagini reattive

In alcuni casi, le dimensioni o l'immagine potrebbero variare in base ai breakpoint della disposizione del sito. Ad esempio, con schermi di dimensioni ridotte l'immagine potrebbe coprire l'intera larghezza del viewport, mentre su schermi più grandi potrebbe occuparne 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">

L'attributo size dell'esempio precedente utilizza diverse media query per indicare le dimensioni dell'immagine. Se la larghezza del browser è superiore a 600 pixel, l'immagine occuperà il 25% della larghezza del viewport, mentre con una larghezza compresa fra 500 e 600 pixel l'immagine occuperà il 50% della larghezza del viewport. Infine, con una larghezza inferiore a 500 pixel l'immagine apparirà a larghezza piena.

Possibilità di ingrandire le immagini dei prodotti

I clienti desiderano visualizzare al meglio gli articoli da acquistare. Nei siti di vendita al dettaglio, gli utenti devono poter visualizzare ingrandimenti ad alta risoluzione dei prodotti per analizzarne i dettagli e i partecipanti allo studio non gradirebbero certo l'impossibilità di utilizzare questa funzione.

Sito web di J. Crews con
  immagini dei prodotti dotate di funzione di zoom
Sito web di J. Crews con immagini dei prodotti dotate di funzione di zoom

Il sito di J. Crews è un buon esempio di immagini interattive e dotate di funzione di zoom. L'overlay a scomparsa indica la possibilità di analizzare dell'immagine mediante una visualizzazione ingrandita e nitida.

Ulteriori tecniche per le immagini

Compressione delle immagini

Vedi esempio

La tecnica di compressione delle immagini invia un'immagine 2x a elevata compressione a tutti i dispositivi, indipendentemente dalle funzionalità. In base al tipo d'immagine e al livello di compressione, la qualità dell'immagine potrebbe restare inalterata anche con una significativa riduzione delle dimensioni del file.

Vedi esempio

Sostituzione dell'immagine JavaScript

La sostituzione dell'immagine JavaScript verifica le funzionalità del dispositivo ed esegue l'operazione in maniera ottimale. È possibile determinare la proporzione dei pixel del dispositivo con window.devicePixelRatio, ottenere altezza e larghezza dello schermo ed eseguire lo sniffing della connessione di rete con navigator.connection o una richiesta fasulla. Una volta raccolte queste informazioni è possibile scegliere l'immagine da caricare.

L'approccio è caratterizzato da un aspetto negativo: l'utilizzo di JavaScript rallenta il caricamento dell'immagine fino alla conclusione dell'attività del parser look-ahead e il download delle immagini non avrà luogo prima dell'attivazione dell'evento pageload. Inoltre, il browser scarica l'immagine 1x e 2x causando un aumento del peso della pagina.

Immagini in CSS

La proprietà 'background' CSS è un potente strumento per l'aggiunta di immagini complesse agli elementi in modo da semplificare l'inserimento di immagini multiple, la ripetizione modulare delle stesse e molto altro. Se utilizzata con le media query, la proprietà background è ancor più utile grazie alla possibilità di eseguire il caricamento condizionale delle immagini in base a risoluzione dello schermo, dimensioni del viewport e così via.

TL;DR

  • Utilizza immagini adatte alle caratteristiche del display, prendendo in considerazione dimensioni dello schermo, risoluzione del dispositivo e disposizione della pagina.
  • Modifica la proprietà background-image dei CSS per i display ad alta risoluzione utilizzando le media query con min-resolution e -webkit-min-device-pixel-ratio.
  • Utilizza scrset per fornire immagini ad alta risoluzione oltre all'immagine 1x nel markup.
  • Valuta i costi in termini di rendimento dovuti all'utilizzo di tecniche di sostituzione delle immagini via JavaScript o di immagini compresse ad alta risoluzione per i dispositivi a risoluzioni inferiori.

Utilizzo delle media query per il caricamento delle immagini adattabili o la direzione artistica

Le media query influiscono sulla disposizione della pagina e consentono anche il caricamento condizionale delle immagini o la gestione della direzione artistica in base alla larghezza del viewport.

Nell'esempio sottostante, con schermi di dimensioni ridotte viene scaricato e applicato solo small.png al contenuto div, mentre con schermi di dimensioni elevate background-image: url(body.png) viene applicato al corpo e background-image: url(large.png) al div del contenuto.

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

Utilizzo di image-set per la fornitura di immagini ad alta risoluzione

La funzione image-set() dei CSS ottimizza la proprietà di comportamento background in modo da semplificare la fornitura di file di immagini multipli in base alle diverse caratteristiche dei dispositivi. In questo modo, il browser seleziona l'immagine ottimale in base alle caratteristiche del dispositivo, ad esempio un'immagine 2x su un display 2x o un'immagine 1x su un dispositivo 2x con larghezza di banda limitata.

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

Oltre al caricamento dell'immagine appropriata, il browser ne esegue un ridimensionamento adeguato. In altri termini, il browser suppone che le immagini 2x abbiano larghezza doppia rispetto a quelle 1x e ridimensiona l'immagine 2x riducendola di 2 volte, in modo che venga visualizzata nella pagina con la stesse dimensioni.

Il supporto di image-set() non è ancora diffuso ed è disponibile solo su Chrome e Safari usando il prefisso del fornitore -webkit. Attenzione a includere un'immagine alternativa in caso di assenza di supporto di image-set(). 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  
  );
}

In questo caso vengono caricate le corrette risorse nei server che supportano image-set o in alternativa la risorsa 1x. Poiché il supporto di image-set() non è ancora diffuso, la maggior parte dei browser utilizza la risorsa 1x.

Utilizzo delle media query per fornire immagini ad alta risoluzione o la direzione artistica

Le media query possono creare regole basate sulle proporzioni dei pixel del dispositivo per indicare diverse immagini per la visualizzazione 2x o 1x.

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

Chrome, Firefox e Opera supportano lo standard (min-resolution: 2dppx), mentre Safari e il browser di Android richiedono una sintassi prefissata del fornitore meno recente, senza l'unità dppx. Questi stili vengono caricati solo se il dispositivo corrisponde alla media query e richiedono la specifica dello stile per il caso di base. L'operazione consente di eseguire comunque il rendering anche se il browser non supporta la media query specifica 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);
  }
}

È possibile utilizzare la sintassi min-width per la visualizzazione di immagini alternative basate sulla dimensione del viewport. Si tratta di una tecnica vantaggiosa che non richiede il download dell'immagine in caso di mancata corrispondenza con la media query. Ad esempio, bg.png viene scaricato e applicato a body solo se la larghezza del browser è di almeno 500 pixel:

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

Utilizzo di SVG per le icone

Per aggiungere icone alla pagina cerca di utilizzare icone SVG o i caratteri unicode.

TL;DR

  • Utilizza SVG o unicode per le icone al posto delle immagini raster.

Sostituzione delle icone semplici con caratteri unicode

Numerosi caratteri contengono glifi unicode che è possibile utilizzare al posto delle immagini. A differenza delle immagini, è possibile scalare i caratteri unicode ottenendo una qualità ottimale in qualsiasi dimensione.

Oltre al normale insieme set di caratteri, l'unicode inlcude simboli per forme numeriche (⅐), frecce (←), operatori matematici (√), forme geometriche (★), immagini di controllo (▶), schemi braille (⠏), note musicali (♬), lettere greche (Ω) e pezzi degli scacchi (♞).

La procedura per l'inserimento dei caratteri unicode è identica a quella per le named entity, ovvero l'utilizzo del codice &#XXXX, in cui XXXX è il numero del carattere unicode. Ad esempio:

Sei un super&#9733;

Sei un super★

Sostituzione delle icone complesse con SVG

Per creare icone più complesse, SVG offre un risultato più leggero, intuitivo e personalizzabile con CSS. SVG offre diversi vantaggi rispetto alle immagini raster:

  • Si tratta di elementi grafici vettoriali scalabili all'infinito.
  • Effetti CSS come colori, ombreggiature, trasparenze e animazioni sono molto semplici da utilizzare.
  • È possibile visualizzare immagini SVG inline nel documento.
  • È un formato semantico.
  • Offrono un'accessibilità ottimale con gli i corretti attributi.
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">.

Utilizza i caratteri per icone con attenzione

I caratteri per icone sono diffusi e intuitivi, ma presentano alcuni svantaggi rispetto alle icone SVG.

  • Si tratta di elementi grafici vettoriali scalabili all'infinito, ma un eventuale anti-aliasing potrebbe ridurne la nitidezza.
  • Personalizzazione con CSS limitata.
  • L'esatto posizionamento dei pixel potrebbe essere difficile, essendo basato su altezza delle linee, spaziatura delle lettere e così via.
  • Non essendo elementi semantici, sono inadatti a lettori dello schermo o altre tecnologie di assistenza.
  • Se non utilizzati al meglio possono creare file di grandi dimensioni anche con l'utilizzo di un gruppo ridotto di icone.

Esempio di pagina che utilizza FontAwesome come icone dei caratteri.

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

Esistono diversi caratteri per icone gratuiti e a pagamento come Font Awesome, Pictos e Glyphicons.

Equilibra il peso delle richieste HTTP aggiuntive e le dimensioni del file con le esigenze in termini di icone. Ad esempio, se occorrono poche icone è consigliabile l'utilizzo di un'immagine o di uno sprite di immagine.

Ottimizzazione delle immagini per un rendimento ottimale

Spesso le immagini richiedono il download di molti dati e occupano una parte rilevante dello spazio di visualizzazione della pagina. L'ottimizzazione delle immagini consente di risparmiare byte e migliorare il rendimento del sito web: il consumo della larghezza di banda del client e la velocità di download e visualizzazione delle risorse nel browser sono inversamente proporzionali al numero di byte da scaricare.

TL;DR

  • Non scegliere un formato a caso per le immagini, ma analizza quelli disponibili e utilizza il più adatto alle tue esigenze.
  • Inserisci strumenti di ottimizzazione delle immagini e compressione al flusso di lavoro per la riduzione delle dimensioni dei file.
  • Riduci il numero delle richieste HTTP inserendo immagini di utilizzo comune negli sprite immagine.
  • Valuta se caricare le immagini solo al momento della visualizzazione, in modo da ottimizzare tempi di caricamento e peso iniziale della pagina.

Scelta del formato corretto

Esistono due tipi di immagini da prendere in considerazione: immagini vettoriali e immagini raster. Per le immagini raster occorre selezionare il formato di compressione appropriato, come ad esempio GIF, PNG e JPG.

Le immagini raster sono simili alle fotografie e alle altre immagini costituite da una griglia di pixel o punti singoli. Di solito, le immagini raster vengono prodotte da fotocamere o scanner ed è possibile crearle nel browser con l'elemento canvas. La dimensione del file è direttamente proporzionale alla dimensione dell'immagine. Aumentando le dimensioni delle immagini raster rispetto a quelle originali si ottiene un effetto sfocato poiché il browser deve riempire in qualche modo i pixel mancanti.

Le immagini vettoriali, come logo e line art, vengono definite da un insieme di curve, linee, forme e colori di riempimento, create con programmi come Adobe Illustrator o Inkscape e salvate in un formato vettoriale come ad esempio SVG. Le immagini vettoriali vengono realizzate con semplici primitive ed è possibile ridimensionarle senza perdite di qualità o modifiche della dimensione del file.

Per la scelta del formato corretto è importante prendere in considerazione l'origine dell'immagine (raster o vettoriale) e i contenuti (colori, animazioni, testo e così via). Non esiste un formato adatto a tutti i tipi di immagini: ciascun formato presenta vantaggi e svantaggi.

Per scegliere il formato corretto attieniti alle linee guida seguenti:

  • Utilizza il JPG per le fotografie.
  • Utilizza l'SVG per gli elementi grafici vettoriali e a tinta unita come logo ed disegni al tratto. Se non sono disponibili elementi grafici vettoriali usa WebP o PNG.
  • Utilizza il PNG e non il GIF poiché il primo formato offre colori e rapporto di compressione ottimali.
  • Per le animazioni di maggiore durata utilizza i <video>, che offrono una qualità dell'immagine ottimale e un efficace controllo della riproduzione.

Riduzione della dimensione dei file

È possibile ridurre le dimensioni del file utilizzando il 'post-processing' una volta concluso il salvataggio. Esistono diversi strumenti per la compressione delle immagini: con o senza perdita di informazioni, online, GUI e con riga di comando. È consigliabile eseguire un'ottimizzazione automatizzata dell'immagine come elemento principale del flusso di lavoro in uso.

Esistono diversi strumenti per eseguire un'ulteriore compressione senza perdita di informazioni dei file JPG e PNG senza compromettere la qualità dell'immagine. Per il formato JPG, prova jpegtran o jpegoptim, disponibile solo su Linux e da eseguire con l'opzione strip-all. Per il formato PNG, prova OptiPNG o PNGOUT.

Utilizzo degli sprite immagine

Lo spriting CSS è una tecnica che unisce diverse immagini in una singola immagine di 'foglio di sprite'. Quindi è possibile utilizzare singole immagini specificando l'immagine di sfondo di un elemento (foglio di sprite) e un offset per la visualizzazione della parte corretta.

 Foglio di sprite immagine utilizzato nell'esempio

.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;
}

Lo spriting riduce il numero dei download necessari per ottenere immagini multiple senza disattivare il caching.

Valuta il caricamento ritardato

Il caricamento ritardato velocizza il caricamento delle pagine di grandi dimensioni con diverse immagini caricate secondo necessità o al termine del caricamento e del rendering del contenuto primario. Oltre ai miglioramenti in termini di rendimento, il caricamento ritardato consente di eseguire lo scorrimento infinito della pagina.

Attenzione nel creare pagine a scorrimento infinito, poiché i contenuti vengono caricati al momento della visualizzazione e i motori di ricerca potrebbero non indicizzarli. Inoltre, gli utenti in cerca delle informazioni visualizzate nei piè di pagina non riusciranno a visualizzare questa parte della pagina a causa del continuo caricamento dei nuovi contenuti.

Evitare le immagini

In alcuni casi, è consigliabile evitare l'utilizzo delle immagini. Se possibile, utilizza le funzionalità native del browser per offrire funzionalità analoghe. I browser possono creare elementi grafici che un tempo richiedevano l'utilizzo dei file d'immagine. In altre parole, il browser non deve più scaricare file di immagine separati in modo da evitare la visualizzazione di immagini ridimensionate in modo non ottimale. È possibile effettuare il rendering delle icone usando unicode o i caratteri speciali per icone.

Posiziona i testi in un markup senza incorporarli nelle immagini

Se possibile, usa il testo e non incorporarlo nelle immagini. Ad esempio, evita l'utilizzo delle immagini per le intestazioni o l'inserimento di informazioni di contatto come numeri telefonici o indirizzi, poiché in questo modo è impossibile copiare e incollare le informazioni, utilizzare gli screen reader e ottenere buone prestazioni. Al contrario, inserisci i testi in un markup e utilizza i webfont per ottenere lo stile desiderato.

Utilizzo di CSS per la sostituzione delle immagini

I browser moderni utilizzano le funzionalità CSS per la creazione di stili che un tempo richiedevano l'utilizzo delle immagini. Ad esempio, è possibile creare gradienti complessi con la proprietà background, ombre con box-shadow e angoli smussati con 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>

Inoltre, l'utilizzo di queste tecniche non richiede cicli di rendering, cosa molto importante per i dispositivi mobili. Attenzione a non esagerare, poiché potresti sacrificare i vantaggi ottenuti e ottenere un basso rendimento.