Lorsque vous enregistrez des images dans un programme graphique, différents formats d'image vous sont proposés. Mais lequel choisir lorsque vous souhaitez intégrer une image dans un site web ?
Lorsque vous souhaitez présenter une image sur votre site web, vous avez le choix entre trois formats.
• GIF
• JPEG
• PNG
Mais quel format choisir pour quel type d'utilisation ? Préfère-t-on GIF ou PNG pour les photos ? Tout d'abord, voici un bref aperçu des capacités de chaque format.
| Propriété | JPEG | GIF | PNG |
| Compression sans perte | Non | Oui | Oui |
| Couleurs | 24 bits | indexé jusqu'à 256 | indexé (jusqu'à 256), 24 bits ou 48 bits |
| Transparence | Non | Oui, une couleur | Oui |
| Chargement progressif ou entrelacé | Oui | Oui | Oui |
| Animations | Non | Oui | Non |
Cette petite vue d'ensemble montre déjà les différentes caractéristiques des formats. Il n'est donc pas surprenant que certains formats soient plus adaptés que d'autres à des utilisations spécifiques. C'est précisément à ce stade que la section suivante intervient. Celle-ci montre quand il est préférable d'utiliser chaque format.
Photos
Pour les photos, le JPEG est le plus adapté. En effet, les images peuvent être très bien compressées, la qualité pouvant être choisie de manière variable. On trouve ainsi le bon équilibre entre qualité et taux de compression.
Captures d'écran/Diagrammes
Pour cela, le format PNG est le plus adapté. Le PNG est également intéressant pour les dessins techniques, les plans, etc. Le PNG peut également être utilisé pour les images comportant des zones transparentes.
Polices de caractères/Logos
Si votre logo contient du texte ou si vous souhaitez afficher du texte en général, vous devriez utiliser le GIF ou le PNG. En raison de meilleures performances, on opte généralement pour le PNG. Le JPEG n'est en aucun cas adapté à l'affichage de polices de caractères, car les contours sont affichés de manière floue.
Transparence
Lorsqu'il s'agit d'afficher des zones transparentes, le JPEG est d'emblée exclu. Restent donc le GIF et le PNG. Mais lequel de ces deux formats choisir lorsque la transparence est importante ? Le GIF peut en théorie gérer la transparence, mais les résultats sont généralement de mauvaise qualité. En effet, un pixel au format GIF ne peut être soit complètement visible, soit complètement transparent. Ce phénomène ne se produit pas avec le PNG. Ce format possède un canal alpha supplémentaire, permettant d'obtenir des résultats de transparence plus fins.
Insertion d'images
Les graphiques peuvent être insérés via l'élément img. (Veuillez noter que les images sont aujourd'hui souvent intégrées via CSS. Des informations détaillées sur le CSS suivront bien sûr. La méthode HTML montrée est cependant entièrement conforme aux normes et peut être utilisée sans problème en HTML5.)
<img src="logo.png" alt="PSD-Tutorials.de" />
Pour img, il s'agit d'un élément autonome. Les attributs correspondants permettent de décrire plus en détail l'image. L'attribut le plus important est sans doute src. Car c'est par lui que l'on indique quelle image doit être intégrée. Dans l'exemple montré, je pars du principe que l'image logo.png se trouve dans le même répertoire que le fichier HTML où l'élément img a été défini.
Pour que les images soient effectivement affichées, il est nécessaire de spécifier correctement le chemin d'accès. HTML propose différentes options de référencement.
• Chemins absolus
• Adresses URL absolues relatives à l'adresse de base
• Adresses URL relatives à l'adresse de base
Commençons par les chemins absolus. On utilise généralement cette méthode chaque fois que l'image ne se trouve pas sur son propre serveur. Supposons que vous vouliez intégrer le papillon bien connu de PSD-Tutorials.de dans votre site web. Vous pourriez alors le charger directement depuis le serveur où il se trouve. Pour commencer, déterminez le chemin de l'image. Cela se fait le plus simplement en cliquant avec le clic droit de la souris sur l'image dans le navigateur, puis en choisissant Copier l'URL de l'image.
Ce qui est chargé dans le presse-papiers devrait finalement ressembler à ceci :
http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg
Il s'agit donc de l'adresse complète de l'image. Cette information suffit pour intégrer l'image.
<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />
On attribue donc le chemin d'accès complet de l'image à l'attribut src.
Cependant, le problème avec ces chemins absolus est finalement qu'on a peu de contrôle sur le contenu inclus. Si l'image référencée par vous est supprimée du serveur ou déplacée dans un autre répertoire, une erreur d'affichage se produira.
C'est pourquoi cette référence absolue devrait réellement être l'exception.
Références relatives dans le cadre de l'adresse de base
Cette variante est toujours recommandée lorsque l'image se trouve sur le même ordinateur/serveur que le fichier HTML et est accessible via le protocole actuel. Cela peut sembler compliqué, mais ce n'est pas le cas.
Un exemple:
http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg
Ceci est l'adresse complète. La partie suivante est le chemin d'accès absolu.
wp-content/uploads/2013/01/logo-psd-tutorials.jpg
Ce chemin d'accès absolu est relatif à l'adresse de base http://4eck-media.de.
Références relatives par rapport à l'adresse de base
La variante présentée maintenant est certainement la plus courante. Le chemin actuel est toujours pris comme point de référence pour finalement adresser. Quelques exemples à nouveau. Supposons qu'il y ait le fichier index.htm, dans lequel vous souhaitez inclure une image. De plus, sur le même niveau, il y a le répertoire images où se trouve ladite image.
index.htm
images
--logo.png
L'appel dans l'attribut src ressemblerait à ceci dans ce cas:
src="images/logo.png"
Cependant, comment cela se présenterait-il si l'image se trouvait dans un répertoire situé au-dessus du fichier HTML?
projekt
--images
-----logo.png
--archiv
-----index.htm
Dans ce cas, l'index.htm se trouve un répertoire en dessous de l'image à inclure logo.png.
src="../images/logo.png"
Ainsi ici, la syntaxe signifie: aller d'un niveau vers le haut, changer de répertoire pour images et afficher logo.png.
projekt
--images
----logo.png
----2013
------januar
--------index.htm
Voici à quoi ressemble la syntaxe dans ce cas:
src="../../images/logo.png"
L'image logo.png se trouve dans ce cas à deux niveaux au-dessus de l'index.htm dans le répertoire images.
L'avantage des chemins relatifs réside dans leur flexibilité. Vous pouvez ainsi développer le projet localement et ensuite le copier sur un serveur "réel". Les chemins restent inchangés ensuite.
