Nella to do list di web designer e developer dei tempi moderni ci dovrebbe sempre essere un elemento in lista da spuntare: scalabilità delle immagini e grafiche per qualsiasi dispositivo. Che sia quindi uno smartphone di basso costo o un MacBook con un display retina, il nostro sito dovrebbe sempre fare la sua bella figura, presentando i contenuti nel miglior modo possibile.
Esistono diverse soluzioni e strumenti che possiamo adottare per arricchire il nostro sito di immagini che rispondano a questa esigenza, sempre mantenendo il loro livello di dettaglio. Oggi vorrei parlarvi di due in particolare: immagini svg e icon fonts.
Cosa sono le immagini svg e gli icon fonts?
In poche parole, SVG e icon fonts sono delle immagini vettoriali che possiamo utilizzare all’interno della nostra pagina web. Le immagini svg sono uno standard della specifica W3C basati su file XML che ne descrivono la struttura, i secondi sono web fonts che contengono un simbolo al posto di un carattere tipografico. Come si può quindi intuire da ciò di cui sono costituiti, rappresentano entrambi dei contenuti molto più leggeri rispetto alle immagini classiche con formato .jpg e .png, permettendoci di occupare meno banda. In aggiunta, possono essere scalati a qualsiasi dimensione senza perdere qualità dando il meglio di sé su display retina.
L’utilizzo delle immagini svg e la compatibilità
Immagini svg possono essere utilizzate esattamente nel modo in cui includiamo JPG e PNG, sia con il tag img:
[code type=”markup”][/code]
sia utilizzandole come sfondo di un elemento:
[code type=”markup”]
[/code]
[code type=”css”]
.ragno-artera {
width: 600px;
height: 600px;
background: url(“https://www.artera.net/wp-content/uploads/immagini-esempio/ragno.svg”) no-repeat;
background-size: cover;
}
[/code]
Con le proprietà dell’immagine o con il CSS possiamo specificarne le dimensioni. Come potete vedere da questo link riusciamo ad avere un risultato estremamente soddisfacente di immagine ingrandita.
Un modo alternativo è quello di includere il codice XML generato: è sufficiente aprire l’immagine svg in un file di testo e copiarne il codice nella nostra pagina.
Per la creazione di immagini in questo formato, possiamo utilizzare Adobe Illustrator o in alternativa il programma open souce Inkscape (compatibile con Windows, Mac e Linux).
Il formato SVG è supportato dalla maggior parte di Browser e sistemi operativi per smartphone, eccetto per IE < 8 e vecchie versioni di Android.
Se vogliamo rendere un svg incluso in un tag img possiamo utilizzare Modernizr grazie al quale possiamo inserire un fallback .png o .jpg
[code type=”javascript”]
if (!Modernizr.svg) {
$(“.ragno-artera”).attr(“src”, “images/ragno-artera.png”);
}
[/code]
Per gli sfondi, possiamo sfruttare la classe aggiunta nel codice da Modernizr “no-svg” :
[code type=”css”].ragno-artera{
background: url(“https://www.artera.net/wp-content/uploads/immagini-esempio/ragno.svg”) no-repeat;
}
.no-svg .ragno-artera{
background-image: url(“https://www.artera.net/wp-content/uploads/immagini-esempio/ragno.png”);
[/code]
Anche nel caso in cui abbiamo utilizzato direttamente il codice XML generato, sfruttiamo ancora una volta la classe CSS “no-svg”, inserendo nel codice html un tag che conterrà la nostra immagine di fallback:
[code type=”markup”]
[/code]
[code type=”css”].fallback-ragno-artera{
display: none;
}
.no-svg fallback-ragno-artera{
display: block;
background-image: url(“https://www.artera.net/wp-content/uploads/immagini-esempio/ragno.png”);
}[/code]
Vi consiglio di leggere l’articolo di Chris Coyier per ulteriori approfondimenti.
L’utilizzo degli icon font e la compatibilità
Per utilizzare gli icon font esistono diverse web app che vengono in nostro aiuto, come Icomoon. Su quest’ultimo troviamo numerose icone gratuite, tra cui facebook, twitter e google+, con i css e i file necessari da includere pronti all’uso. Possiamo anche caricare delle nostre icone liberamente, con risultati migliori se in font o svg.
Per utilizzarle all’interno del nostro sito, includiamo lo style.css per la regola @font-face e i font generati dalla cartella fonts. Possiamo ora decidere se utilizzare i data-attributes per inserire le icone nel markup:
[code type=”markup”]
Serve aiuto?
[/code]
Specificando agli screen reader con il tag aria che il data-attribute non dovrà essere letto.
In alternativa, possiamo utilizzare le classi messe a disposizione dal css:
[code type=”markup”]
Maggiori informazioni
[/code]
Su questi elementi possiamo applicare tutte le proprietà css dei font, come il colore, la dimensione, l’ombra. Il servizio gratuito permette solo icone monocromatiche e senza gradienti.
Per quanto riguarda la compatibilità, il package scaricato contiene un file javascript per avere la compatibilità multibrowser.
Vi lascio con il link alla documentazione completa di Icomoon.
