{"id":1271,"date":"2011-05-28T21:24:49","date_gmt":"2011-05-28T20:24:49","guid":{"rendered":"http:\/\/www.donatantonio.net\/blog\/?p=1271"},"modified":"2011-05-28T21:24:49","modified_gmt":"2011-05-28T20:24:49","slug":"html-le-immagini","status":"publish","type":"post","link":"https:\/\/www.donatantonio.net\/blog\/guide_tutorial\/htmlcss\/html-le-immagini\/","title":{"rendered":"Html: le immagini"},"content":{"rendered":"

Fino ad ora si \u00e8 concentrata l\u2019attenzione alla formattazione del testo, quindi paragrafi, titoli e contenitori di testo, consapevoli che il moderno web non mette a disposizione solo questo tipo di informazioni.
\nSiamo lontani dai siti web dei primissimi anni \u201990<\/em>, quando le pagine erano composte totalmente da testo, oggi \u00e8 impensabile non visualizzare in una pagina web un\u2019immagine, un video o qualche altro elemento grafico.
\nPer inserire un\u2019immagine<\/span> in una pagina html si utilizza il tag <img><\/strong>. La sintassi per inserire un\u2019ipotetica immagine \u00e8:<\/p>\n

\r\n<img src=\u2018immagini\/foto.jpg\u2019 \/>\r\n<\/pre>\n
Il tag <img> si compone essenzialmente di un attributo obbligatorio src<\/span>, che indica l\u2019url dell\u2019immagine da visualizzare.
\nIn fase di visualizzazione quando il browser incontra il tag img, analizza l\u2019url associato e carica l\u2019immagine, ponendola all\u2019interno della pagina dove questa \u00e8 stata definita dallo sviluppatore.
\nIl seguente codice HTML descrive in maniera completa l\u2019inserimento di un immagine in una pagina html:<\/p>\n
\r\n<html>\r\n     <head>\r\n     <title>IMMAGINI<\/title>\r\n     <\/head>\r\n\r\n     <body>\r\n\r\n          <div>La nostra prima immagine : <\/div>\r\n\r\n          <!-- INSERISCO L\u2019IMMAGINE logo.jpg -->\r\n          <img src=\u2018img\/logo.jpg\u2019 \/>\r\n\r\n     <\/body>\r\n<\/html>\r\n<\/pre>\n
Il risultato nel browser \u00e8 il seguente:<\/p>\n
\"Immagini<\/p>\n
Non avendo specificato allineamento e altri attributi, l\u2019immagine viene stampata a sinistra e dopo l\u2019elemento che lo precede nel codice (nel nostro caso il div che contiene il testo).<\/p>\n
I formati per le immagini web.<\/h3>\n
Nonostante non siano definiti in maniera precisa i formati ammissibili per le immagini \u00e8 bene sottolineare che nella scelta del formato va tenuta in grande considerazione la pesantezza dell\u2019immagine (espressa in byte).
\nI formati pi\u00f9 indicati per il web sono sostanzialmente tre:<\/p>\n
\"Formati<\/p>\n
Indipendentemente dal formato utilizzato \u00e8 importante ricordare che abusare<\/strong> delle immagini incide negativamente sulle prestazioni<\/em> del browser. Difatti caricare una pagina html con molte immagini richiede un tempo maggiore rispetto ad una pagina con testo e poche immagini.
\nUna volta scelte le immagini da inserire queste vanno ottimizzate<\/span>, regolando la dimensione e il formato. La regola alla quale attenersi per scegliere il formato corretto \u00e8 riassunta di seguito:<\/p>\n
    \n
  •  se bisogna inserire una foto allora scegliamo il formato jpg;<\/li>\n
  • se bisogna inserire un logo o un disegno scegliamo il formato gif o png.<\/li>\n<\/ul>\n
    L’attributo ALT e le regole di accessibilit\u00e0.<\/h3>\n
    Un aspetto importante di cui tener conto \u00e8 che non tutti i browser visualizzano le immagini presenti in una pagina html, o ad esempio per scelta un utente potrebbe non visualizzare le immagini.
    \nAlcuni utenti, quali gli ipovedenti<\/em>, non sono in grado di mettere a fuoco del tutto le immagini inserite nelle pagine web, i non vedenti <\/em>sono del tutto esclusi anche da questa pur limitata possibilit\u00e0; altri ancora utilizzano browser che non supportano immagini e interpretano solamente i testi contenuti nelle pagine stesse.
    \nPensare di creare pagine web alternative a quelle che utilizzano le immagini significherebbe di fatto discriminare tali utenti da una completa fruizione di tutto ci\u00f2 che di positivo spesso riserva la rete.
    \nFornire invece un testo equivalente<\/strong> per le immagini garantisce in tutti i casi sopraelencati l’accessibilit\u00e0, oltre a essere utile indistintamente a tutti gli utenti: si tratta in ogni caso di un elemento irrinunciabile per assicurare sempre e comunque accessibilit\u00e0 alle immagini inserite in una pagina web.<\/p>\n
    L\u2019attributo ALT<\/span> permette appunto di definire un testo da visualizzare in assenza dell\u2019immagine.<\/p>\n
    \r\n<img src=\u2018img\/logo.jpg\u2019  alt=\u2018Il logo del corso HTML\u2019 \/>\r\n<\/pre>\n
    Seppur non obbligatorio come attributo, l’uso dell’attributo alt \u00e8 opportuno sulle principali immagini incluse in una pagina, in modo particolare nel caso in cui l’immagine rappresenta un prodotto, un servizio, o comunque un elemento relativo alla pagina.
    \nUtilizzando l\u2019attributo alt si potr\u00e0 notare come in Internet Explorer il testo venga visualizzato anche in presenza dell\u2019immagine qualora l\u2019utente trascini su di essa il puntatore del mouse; negli altri browser invece il testo viene visualizzato solo in assenza dell\u2019immagine.<\/p>\n
    Altezza e larghezza delle immagini.<\/h3>\n
    Gli attributi width<\/span> e height<\/span> possono essere usati per impostare l’altezza e la larghezza di una immagine. Per impostare l’altezza e la larghezza viene usato, solitamente, un valore in pixel.
    \nA differenza dei centimetri, i pixel sono unit\u00e0 di misura relative che dipendono dalla risoluzione dello schermo. Ad un utente con uno schermo ad alta risoluzione, 25 pixel possono corrispondere ad 1 centimetro, mentre gli stessi 25 pixel su uno schermo a bassa risoluzione possono corrispondere sullo schermo a 1.5 centimetri.
    \nSe non vengono impostate l’altezza e la larghezza, l’immagine verr\u00e0 inserita con le sue dimensioni originali. Bisogna comunque tenere in considerazione che il browser conosce le dimensioni di un\u2019immagine solo nel momento in cui questa viene caricata completamente<\/strong>, in ogni caso \u00e8 consigliabile indicare le dimensioni dell\u2019immagine favorendo la realizzazione del layout al browser.
    \nGli attributi width e height possono inoltre essere utilizzati per scalare le immagini troppo grandi.<\/p>\n
    Il codice html sottostante descrive l\u2019utilizzo degli attributi width e height:<\/p>\n
    \r\n<html>\r\n     <head>\r\n     <title>ALTEZZA E LARGHEZZA IMMAGINI<\/title>\r\n     <\/head>\r\n     <body>\r\n     <div>Dimensione delle immagini : <\/div>\r\n\r\n     <img src='img\/logo.jpg' width='82px' height='200px' alt='Il logo del corso HTML!'\/>\r\n     <img src='img\/logo.jpg' width='70px' height='170px' alt='Il logo del corso HTML!'\/>\r\n     <img src='img\/logo.jpg' width='50px' height='150px' alt='Il logo del corso HTML!'\/>\r\n\r\n     <\/body>\r\n<\/html>\r\n<\/pre>\n
    Nel codice sono presenti tre immagini<\/em> in sequenza con dimensioni diminuite di volta in volta.
    \nDi seguito \u00e8 mostrato il risultato:
    \n\"Altezza
    \nIn definitiva la sintassi per impostare altezza e larghezza di un immagine \u00e8:<\/p>\n
    <img src=”\u2018immagine.jpg\u2019” alt=”” width=”\u2018100px\u2019” height=”\u2018100px\u2019” \/><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
    Fino ad ora si \u00e8 concentrata l\u2019attenzione alla formattazione del testo, quindi paragrafi, titoli e contenitori di testo, consapevoli che il moderno web non mette a disposizione solo questo tipo di informazioni.
    \nSiamo lontani dai siti web dei primissimi anni \u201990<\/em>, quando le pagine erano composte totalmente da testo, oggi \u00e8 impensabile non visualizzare in una pagina web un\u2019immagine, un video o qualche altro elemento grafico.
    \nPer inserire un\u2019immagine in una pagina html si utilizza il tag <img>. La sintassi per inserire un\u2019ipotetica immagine \u00e8:<\/p>\n
    <img src=\u2018immagini\/foto.jpg\u2019 \/><\/p>\n
    Il tag <img> si compone essenzialmente di un attributo obbligatorio src, che indica l\u2019url dell\u2019immagine da visualizzare.
    \nIn fase di visualizzazione quando il browser incontra il tag img, analizza l\u2019url associato e carica l\u2019immagine, ponendola all\u2019interno della pagina dove questa \u00e8 stata definita dallo sviluppatore.
    \nIl seguente codice HTML descrive in maniera completa l\u2019inserimento di un immagine in una pagina html:<\/p>\n
    <html>
    \n     <head>
    \n     <title>IMMAGINI<\/title>
    \n     <\/head><\/p>\n
         <body><\/p>\n
              <div>La nostra prima immagine : <\/div><\/p>\n
              <!– INSERISCO L\u2019IMMAGINE logo.jpg –>
    \n          <img src=\u2018img\/logo.jpg\u2019 \/><\/p>\n
         <\/body>
    \n<\/html><\/p>\n
    Il risultato nel browser \u00e8 il seguente:<\/p>\n<\/p>\n
    Non avendo specificato allineamento e altri attributi, l\u2019immagine viene stampata a sinistra e dopo l\u2019elemento che lo precede nel codice (nel nostro caso il div che contiene il testo).<\/p>\n
    I formati per le immagini web.<\/p>\n
    Nonostante non siano definiti in maniera precisa i formati ammissibili per le immagini \u00e8 bene sottolineare che nella scelta del formato va tenuta in grande considerazione la pesantezza dell\u2019immagine (espressa in byte).
    \nI formati pi\u00f9 indicati per il web sono sostanzialmente tre:<\/p>\n<\/p>\n
    Indipendentemente dal formato utilizzato \u00e8 importante ricordare che abusare delle immagini incide negativamente sulle prestazioni<\/em> del browser. Difatti caricare una pagina html con molte immagini richiede un tempo maggiore rispetto ad una pagina con testo e poche immagini.
    \nUna volta scelte le immagini da inserire queste vanno ottimizzate, regolando la dimensione e il formato. La regola alla quale attenersi per scegliere il formato corretto \u00e8 riassunta di seguito:<\/p>\n
     se bisogna inserire una foto allora scegliamo il formato jpg;
    \nse bisogna inserire un logo o un disegno scegliamo il formato gif o png.<\/p>\n
    L’attributo ALT e le regole di accessibilit\u00e0.<\/p>\n
    Un aspetto importante di cui tener conto \u00e8 che non tutti i browser visualizzano le immagini presenti in una pagina html, o ad esempio per scelta un utente potrebbe non visualizzare le immagini.
    \nAlcuni utenti, quali gli ipovedenti<\/em>, non sono in grado di mettere a fuoco del tutto le immagini inserite nelle pagine web, i non vedenti <\/em>sono del tutto esclusi anche da questa pur limitata possibilit\u00e0; altri ancora utilizzano browser che non supportano immagini e interpretano solamente i testi contenuti nelle pagine stesse.
    \nPensare di creare pagine web alternative a quelle che utilizzano le immagini significherebbe di fatto discriminare tali utenti da una completa fruizione di tutto ci\u00f2 che di positivo spesso riserva la rete.
    \nFornire invece un testo equivalente per le immagini garantisce in tutti i casi sopraelencati l’accessibilit\u00e0, oltre a essere utile indistintamente a tutti gli utenti: si tratta in ogni caso di un elemento irrinunciabile per assicurare sempre e comunque accessibilit\u00e0 alle immagini inserite in una pagina web.<\/p>\n
    L\u2019attributo ALT permette appunto di definire un testo da visualizzare in assenza dell\u2019immagine.<\/p>\n
    <img src=\u2018img\/logo.jpg\u2019  alt=\u2018Il logo del corso HTML\u2019 \/><\/p>\n
    Seppur non obbligatorio come attributo, l’uso dell’attributo alt \u00e8 opportuno sulle principali immagini incluse in una pagina, in modo particolare nel caso in cui l’immagine rappresenta un prodotto, un servizio, o comunque un elemento relativo alla pagina.
    \nUtilizzando l\u2019attributo alt si potr\u00e0 notare come in Internet Explorer il testo venga visualizzato anche in presenza dell\u2019immagine qualora l\u2019utente trascini su di essa il puntatore del mouse; negli altri browser invece il testo viene visualizzato solo in assenza dell\u2019immagine.<\/p>\n
    Altezza e larghezza delle immagini.<\/p>\n
    Gli attributi width e height possono essere usati per impostare l’altezza e la larghezza di una immagine. Per impostare l’altezza e la larghezza viene usato, solitamente, un valore in pixel.
    \nA differenza dei centimetri, i pixel sono unit\u00e0 di misura relative che dipendono dalla risoluzione dello schermo. Ad un utente con uno schermo ad alta risoluzione, 25 pixel possono corrispondere ad 1 centimetro, mentre gli stessi 25 pixel su uno schermo a bassa risoluzione possono corrispondere sullo schermo a 1.5 centimetri.
    \nSe non vengono impostate l’altezza e la larghezza, l’immagine verr\u00e0 inserita con le sue dimensioni originali. Bisogna comunque tenere in considerazione che il browser conosce le dimensioni di un\u2019immagine solo nel momento in cui questa viene caricata completamente, in ogni caso \u00e8 consigliabile indicare le dimensioni dell\u2019immagine favorendo la realizzazione del layout al browser.
    \nGli attributi width e height possono inoltre essere utilizzati per scalare le immagini troppo grandi.<\/p>\n
    Il codice html sottostante descrive l\u2019utilizzo degli attributi width e height:<\/p>\n
    <html>
    \n     <head>
    \n     <title>ALTEZZA E LARGHEZZA IMMAGINI<\/title>
    \n     <\/head>
    \n     <body>
    \n     <div>Dimensione delle immagini : <\/div><\/p>\n
         <img src=’img\/logo.jpg’ width=’82px’ height=’200px’ alt=’Il logo del corso HTML!’\/>
    \n     <img src=’img\/logo.jpg’ width=’70px’ height=’170px’ alt=’Il logo del corso HTML!’\/>
    \n     <img src=’img\/logo.jpg’ width=’50px’ height=’150px’ alt=’Il logo del corso HTML!’\/><\/p>\n
         <\/body>
    \n<\/html><\/p>\n
    Nel codice sono presenti tre immagini<\/em> in sequenza con dimensioni diminuite di volta in volta.
    \nDi seguito \u00e8 mostrato il risultato:<\/p>\n
    In definitiva la sintassi per impostare altezza e larghezza di un immagine \u00e8:<\/p>\n
    <img src=”\u2018immagine.jpg\u2019” alt=”” width=”\u2018100px\u2019” height=”\u2018100px\u2019” \/><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[237],"tags":[306,307,305,308],"_links":{"self":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/posts\/1271"}],"collection":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/comments?post=1271"}],"version-history":[{"count":0,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/posts\/1271\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/media?parent=1271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/categories?post=1271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/tags?post=1271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}