Inserire le Immagini in HTML, attributi e responsive design

 In Web design

Le immagini in HTML non si possono inserire direttamente nella pagina, come si farebbe con un documento Word. Invece, le immagini vanno preparate a parte e salvate nella directory del sito. A questo punto, con la tag <img>si crea un segnaposto. Il browser, caricando la pagina, va a cercarla e la inserisce nella pagina web. Se sono stati specificati determinati attributi (CSS, dimensioni, allineamento, ecc.), il browser interpreta anche quelli. La sintassi HTML5 per inserire un’immagine è predefinita.

<img src="smiley.png" alt="Smiley face" height="42" width="42">

La tag <img> non si chiude mai!Contrariamente a molte altre, dal paragrafo al div, non esiste una tag di chiusura per le immagini. Questo, perché le immagini non devono contenere nient’altro. Invece, è possibile creare un link sull’immagine, ad esempio a un sito.

<a href="http://www.michelebugliaro.com" title="Sito di Michele" target="_blank">
<img src="smiley.png" alt="Smiley face" height="42" width="42">
</a>

Inserire un’immagine in un articolo

WordPress ha un editor che semplifica questo procedimento, tuttavia è bene sapere quali attributi la tag <img>possa ricevere.

Attributi per la tag <img>

AttributoSpiegazione
srcLa directory dove si trova il file.
altSpecifica il testo alternativo dell’immagine. Da inserire sempre, in quanto compare se l’immagine non si dovesse caricare. Soprattutto utile per gli utenti con disabilità visive.
height / widthAltezza e larghezza dell’immagine in pixel. Specificarli sempre.
longdescUna URL che punta ad una descrizione più lunga dell’immagine.

Allineare un’immagine

L’attributo align=”left|right|middle|top|bottom” è decaduto in HTML5 e va usato esclusivamente il CSS, nello specifico la property CSS float. Traducibile in italiano come “fluttuare”, permette di posizionare un elemento a sinistra (float: left;) oppure a destra (float: right;).

img {
    float: left;
    margin: 10px;
}

Per centrare l’immagine, infine, la sintassi non necessita di float.

img {
    display: block;
    margin: 0 auto;
}

L’attributo src: attenzione alla url

L’attributo src merita qualche riga di approfondimento. L’errore più comune che capita a tutti, è quello di ritrovarsi con una pagina le cui immagini non vengono trovate. Nel caso di WordPress, questo potrebbe capitare se si elimina l’immagine per errore, se viene spostata, rinominata oppure subito dopo la migrazione del sito verso un nuovo hosting. Ci sono due modi per dichiarare l’attributo src:

  1. una URL relativa alla posizione della pagina web – ad esempio …/img/smiley.png – il browser deve percorrere le directory del sito, relativamente alla posizione della pagina, per trovare l’immagine,
  2. una URL assoluta – ad esempio http://www.michelebugliaro.com/img/smiley.png – il browser ha l’indirizzo completo dell’immagine. In WordPress, si inserisce la URL del sito nelle impostazioni per questo motivo.

Facciamo un esempio semplice per capire le URL relative. In un ipotetico sito web, creiamo le cartelle necessarie (css, img, js) e copiamo due immagini nella cartella img. Nel Finder vediamo questo:

img_percorsorelativo

Da notare che il file HTML si trova allo stesso livello della cartella img. Nel body, il codice per l’immagine dice che dentro tale cartella si trova html_hyperlinks.png.

<body>
<div id="column">
<h1>Un super titolo</h1>
<img src="img/html_hyperlinks.png" width="792" height="300" alt="un'immagine figa">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>

Il browser carica l’immagine, perché la trova in img > html_hyperlinks.png (caso 1). Ora facciamo una prova: dentro la cartella img creiamo una sottocartella (la chiamiamo “design”) e spostiamo l’immagine (caso 2) senza toccare il codice HTML.

img_esempi

Il percorso che porta al file html_hyperlinks.png è cambiato (img > design), pertanto il browser non trova più l’immagine! Avendo inserito la tag, alt, abbiamo il testo alternativo che in questi casi è utile a descrivere l’immagine.

Immagini responsive

Riallacciandosi all’introduzione al linguaggio HTML5, occorre inserire nella sezione <head>della pagina HTML5 la seguente meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Grazie ad essa, insieme a un semplice CSS, possiamo rendere le immagini responsive in un colpo solo! Le immagini si adattano in base alla larghezza dello schermo, senza tuttavia ingrandirsi oltre la loro larghezza (con effetti negativi sulla qualità). Da notare che senza la meta tag, questo sistema non funziona!

img {
    max-width: 100%;
    height: auto;
}

Ciliegina sulla torta, è possibile impostare un bordo arrotondato tramite un semplice CSS3, usando la property border-radiuse il value in pixel oppure in percentuale. Sì, non è più  necessario ritagliare le immagini in Photoshop.

img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

Esiste un metodo maggiormente adatto al responsive design. Con l’introduzione dello standard HTML5, è stata introdotta la tag <picture>con lo scopo di specificare immagini diverse a seconda della dimensione dello schermo (responsive design). Si potrebbe pertanto considerare di preparare immagini specifiche ad ogni device.

<picture>
 <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
 <source srcset="img_flowers.jpg">
 <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Link interessanti

Inserire le immagini / HTMl.it
Responsive Web Design Images
CSS3 images

Post suggeriti

Leave a Comment

Inizia a digitare e premi Enter per effettuare una ricerca