images : format dans .HTML ou .CSS ?

Version imprimable

17/02/2013, 16h58
logiclogic

images : format dans .HTML ou .CSS ?

Bonjour,

La taille des images doit-elle être indiquée dans la balise du HTML ou dans le CSS et pourquoi ?
On doit bien garder l'image d'origine, et indiquer sa taille dans le code, n'est-ce-pas ? On ne change l'image directement ?

Auriez-vous un nom de site qui adapte une image au format d'un site internet ? Go Live le fait, mais... s'il y a un petit programme facile d'utilisation et conforme...

En fait, quelle est l'image appropriée pour un site internet ?

merci..........; un petit code d'image parfaite pour site web ne ferait pas de mal :aie:
17/02/2013, 17h26
happyboon

la taille de l'image peut être indiquée en HTML comme en CSS. chaque option a ses avantages et inconvénients.
Si par exemple trois images voire plus que tu veux mettre sur avec la même taille même hauteur même largeur tu peux préciser la taille en HTML.
Cela permettra au navigateur d'oublier la taille réelle et de l'adapter selon la hauteur et le largeur que tu as préciser.
Le problème est que les images peuvent avoir des tailles originales très différentes ce qui fait que pour une image 5*5 et une image 700*600 qui utilisent le même css ou la taille d'affichage sera 10*10 par exemple , et bien l’affichage sera flou pour l'une des images.
voilà pourquoi il est souvent préférable de préciser la taille en HTML pour chaque image.

le format d'image supporté par les sites internet sont .png, .jpg, .gif et .bmp( dont l'utilisation est déconseillé)
si tu peux un logiciel pour convertir le format des images tu as photofiltre qui très bien www.photofiltre.com

Bonjour,

Citation:

La taille des images doit-elle être indiquée dans la balise du HTML ou dans le CSS et pourquoi ?

dans la partie CSS pour séparer les couches HTML,CSS,JS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[Taille image]</title>
<style>
#img1{ width: 54px;}
#img2{ width:109px;}
#img3{ width:164px;}
#img4{ /* pas de déclaration, taille d'origine */ }
</style>
</head>
<body>
  <img id="img1" src="http://www.developpez.net/template/images/logo.png">
  <img id="img2" src="http://www.developpez.net/template/images/logo.png">
  <img id="img3" src="http://www.developpez.net/template/images/logo.png">
  <img id="img4" src="http://www.developpez.net/template/images/logo.png">
</body>
</html>

17/02/2013, 21h48
thelvin

Euh... Oui, enfin, le mieux, c'est encore que le fichier image soit à la bonne taille dès le début, hein...