Quando si salvano le immagini in un programma grafico, vengono offerti diversi formati grafici. Ma quale scegliere se si tratta di inserire l'immagine in un sito web?
Se si desidera presentare un'immagine sul proprio sito web, si ha la scelta tra tre formati.
• GIF
• JPEG
• PNG
Ma quale formato scegliere per quale scopo? È meglio utilizzare GIF o PNG per le foto? Per prima cosa, una breve panoramica delle capacità dei singoli formati.
| Caratteristica | JPEG | GIF | PNG |
| Memorizzazione senza perdita di informazioni | No | Sì | Sì |
| Colori | 24 bit | indicizzati fino a 256 | indicizzati (fino a 256), 24 bit o 48 bit |
| Trasparenza | No | Sì, un colore | Sì |
| Caricamento progressivo o interlacciamento | Sì | Sì | Sì |
| Animazioni | No | Sì | No |
Questo piccolo riepilogo mostra già le diverse caratteristiche dei formati. Naturalmente, non sorprende che alcuni formati siano più adatti di altri per determinati scopi. Ed è proprio qui che interviene la sezione successiva. Verrà mostrato quando è meglio utilizzare quale formato.
Foto
Senza dubbio, per le foto si utilizza il formato JPEG. Questo perché le immagini possono essere compressi molto bene, con la possibilità di variare la qualità. Si trova qui l'equilibrio giusto tra qualità e tasso di compressione.
Screenshot/Diagrammi
Per questi scopi, il formato PNG è il migliore. Il PNG è interessante anche per disegni tecnici, piani di costruzione, ecc. Inoltre, il PNG può essere utilizzato anche per le immagini in cui si lavora con aree trasparenti.
Fonti/Loghi
Se nel vostro logo c'è del testo o se volete rappresentare del testo, dovreste invece utilizzare il GIF o il PNG. A causa delle migliori prestazioni, di solito si opta per il PNG. JPEG è comunque inadatto per la rappresentazione di testi, poiché i bordi vengono visualizzati in modo poco pulito.
Trasparenza
Quando si tratta di mostrare aree trasparenti, JPEG viene escluso anticipatamente. Restano quindi GIF e PNG. Ma quale di questi due formati si utilizza quando si tratta di trasparenza? GIF può gestire la trasparenza in linea di principio, ma i risultati sono generalmente poco puliti. Un pixel nel formato GIF può infatti essere completamente visibile o completamente trasparente. Questo non accade con il PNG. Questo formato ha un canale alfa aggiuntivo, grazie al quale si ottengono risultati di trasparenza più precisi.
Inserire immagini
Le grafiche possono essere inserite tramite l'elemento img. (Tenete presente che le immagini vengono spesso inserite tramite CSS. Ulteriori informazioni su CSS seguiranno naturalmente. Il modo HTML mostrato è però totalmente conforme agli standard e può essere utilizzato senza problemi anche in HTML5.)
<img src="logo.png" alt="PSD-Tutorials.de" />
Con img si tratta di un elemento autonomo. Attraverso gli attributi appropriati è possibile descrivere meglio l'immagine. L'attributo più importante è senza dubbio src. Perché tramite questo si indica l'immagine da inserire. Nell'esempio mostrato si presume che il file grafico logo.png si trovi nella stessa cartella del file HTML in cui è stato definito l'elemento img.
Perché le immagini vengano effettivamente visualizzate, è necessario specificare correttamente il percorso verso di esse. HTML fornisce diverse opzioni per il riferimento.
• Percorsi assoluti
• Specifiche dei percorsi assoluti relativamente all'indirizzo di base
• Specifiche dei percorsi relativi all'indirizzo di base
Per prima cosa, per quanto riguarda i percorsi assoluti. Questa variante viene utilizzata di solito quando l'immagine non si trova sul proprio server. Supponiamo che volete inserire nel vostro sito web la farfalla conosciuta da PSD-Tutorials.de. Teoricamente, potreste caricarla direttamente dal server su cui si trova. Prima di tutto, determinate il percorso dell'immagine. Questo è più semplice se si fa clic destro sull'immagine nel browser e si sceglie Copia URL immagine.
Quello che viene caricato negli appunti dovrebbe apparire alla fine così:
http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg
Quindi si tratta dell'indirizzo completo dell'immagine. Questa informazione è sufficiente per incorporare l'immagine.
<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />
Si assegna quindi all'attributo src il percorso completo dell'immagine.
Il problema di questi percorsi assoluti è che in ultima analisi, non si ha un controllo reale sul contenuto incorporato. Se l'immagine a cui fate riferimento viene eliminata dal server o spostata in un'altra directory, si verifica un errore di visualizzazione.
Pertanto, l'assoluta indicazione del percorso dovrebbe effettivamente essere l'eccezione.
Percorsi assoluti relativi all'indirizzo di base
Questa opzione è sempre consigliabile quando l'immagine si trova sullo stesso computer/server del file HTML e è accessibile tramite il protocollo attuale. Può sembrare complicato, ma non lo è.
Un esempio:
http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg
Questa è l'indirizzo completo. La parte seguente è il percorso assoluto.
wp-content/uploads/2013/01/logo-psd-tutorials.jpg
Questo percorso assoluto si riferisce relativamente all'indirizzo di base http://4eck-media.de.
Percorsi relativi all'indirizzo di base
Questa variante presentata ora è certamente la più comune. In questo caso, viene sempre preso il percorso attuale come punto di riferimento da cui alla fine si effettua l'indirizzamento. Ecco alcuni esempi. Immaginiamo che ci sia il file index.htm, in cui si desidera includere un'immagine. Inoltre, nella stessa cartella esiste la directory images, in cui si trova l'immagine in questione.
index.htm
images
--logo.png
La chiamata nell'attributo src sarebbe in questo caso:
src="images/logo.png"
Come sarebbe invece se l'immagine si trovasse in una directory sopra il file HTML?
projekt
--images
-----logo.png
--archiv
-----index.htm
In questo caso, l'index.htm si trova una directory sotto l'immagine da includere logo.png.
src="../images/logo.png"
La sintassi significa quindi: salire di un livello, passare alla directory images e visualizzare logo.png.
projekt
--images
----logo.png
----2013
------januar
--------index.htm
In questo caso, la sintassi è la seguente:
src="../../images/logo.png"
L'immagine logo.png si trova in questo caso due livelli sopra l'index.htm nella directory images.
Il vantaggio dei percorsi relativi è la loro flessibilità. Potete ad esempio sviluppare il progetto in locale e poi copiarlo su un server "reale". I percorsi rimarranno invariati dopo la copia.
