Poids et format des images

Bonjour,
j'aurais voulu savoir qu'elle était la taille maximale conseillée pour un page web car sur le net on trouve un peu de tout mais je ne sais pas quoi croire.
Concernant le format, est-il préjudiciable de n'utiliser que du jpg et pas de png (je connais la différence entre ces deux formats mais je voulais savoir si il valait mieux utiliser du png même si il n'y a pas de transparence)?

Merci d'avance.

mackean a écrit :
j'aurais voulu savoir qu'elle était la taille maximale conseillée pour un page web car sur le net on trouve un peu de tout mais je ne sais pas quoi croire.

Il n'y a pas de règle absolue. Opquast recommande de rester en dessous de 100 Ko pour la page d'accueil et de 150 Ko pour une page interne (sauf avertissement préalable), ou encore d'indiquer le poids des fichiers en téléchargement (image ou PDF directement lié, fichier à télécharger, etc.).
Ce sont des recommandations qui prennent en compte un accès correct aux pages par les utilisateurs en bas débit.

mackean a écrit :
Concernant le format, est-il préjudiciable de n'utiliser que du jpg et pas de png

Non, si le design s'y prête.

mackean a écrit :
je voulais savoir si il valait mieux utiliser du png même si il n'y a pas de transparence

Pour une image opaque, il suffit de prendre le meilleur format dans chaque cas (pour chaque image ou portion d'image) en prenant en compte le poids de l'image obtenue et la qualité (non dégradée pour du PNG-24, plus ou moins dégradée pour du JPEG). Typiquement, les photos et illustrations seront plutôt en JPEG, et des éléments de design avec peu de textures mais surtout des formes géométriques et des dégradés seront en PNG-24, ou en PNG-8 (ou GIF).

Merci a toi pour cette réponse. Voici le site que je dois coder:



j'y ai mis les traits de découpe pour vous montrer comment je fais, car je ne suis pas du tout sur que ce soit bon. Si vous avez une meilleure solution je suis preneur.

mackean a écrit :
j'y ai mis les traits de découpe pour vous montrer comment je fais, car je ne suis pas du tout sur que ce soit bon. Si vous avez une meilleure solution je suis preneur.

A priori, il vaut mieux commencer à penser sémantique que structure.
Tu verras alors que certains éléments de type block t'éviteront l'utilisation abusive de <div>, ce que ce découpage pourrait laisser craindre, si tu n'y prêtes pas attention...
Modifié par Cygnus (30 Sep 2008 - 11:33)

heu comment te dire ....je n'ai pas du tout compris ce que tu voulais dire . En terme de sémantique, j'utilise bcp de javascript, j'ai donc mis la plupart de mes cadres en fond (css) et les images en html. En fait, par exemple, dans le grand cadre ou je présente mes créas, ce sera du javascript style accordéon horizontal. j'ai donc mis une <div>, puis mis mon fond en css (le cadre) puis ajouter les images et créé mon javascript. Mais je trouve que mon images de fond (cadre est un peu lourde 40ko), et je ne vois pas comment faire. as-tu une idée?
Modifié par mackean (30 Sep 2008 - 11:45)

mackean a écrit :
En terme de sémantique, j'utilise bcp de javascript

Hmm... je sais qu'il faut pas se moquer mais heu... lol.

Pour rappel:

1. Le contenu est écrit et structuré sémantiquement en HTML. La sémantique HTML est assez simple et consiste à utiliser certains éléments à bon escient, notamment les liens (A) pour faire des liens (et pas des actions en JavaScript), des paragraphes (P) pour faire des paragraphes, des titres (H1 à H6) pour les différents titres structurant le contenu, etc.

2. L'habillage graphique est ensuite géré en CSS.

3. Les comportements et certaines interactions possibles sur la page sont réalisées en JavaScript. Le JavaScript doit venir comme une couche optionnelle par-dessus un contenu correctement structuré (HTML) et mis en forme (CSS).

Pour ton design, ton aperçu est un peu réduit donc ça n'est pas évident de se prononcer. Tu aurais sans doute du JPEG pour le dégradé de fond (sauf si c'est moins lourd en PNG-24), peut-être des PNG-32 (avec transparence) pour certains effets de lumière, ou bien il faut faire ça avec des images «en dur» qui reprennent à la fois le dégradé du fond et les éléments par dessus (auquel cas ça sera sans doute du JPEG)...
En tout cas ce design n'a pas été créé pour être facilement intégrable...

Hello,

Commence à sortir les mouchoirs car tu vas vite comprendre que les dégradés en webDesign c'est pas cool du tout.

Enfin je vais te faire gagner du temps, et toutes tes images de fond en dégradé doivent être en png24.

EVITE des découpes de dégradé verticales...car le jpg utilise des blocs d'image pour son algorithme donc on verra la démarquation de tes découpes dans le dégradé sous le format jpeg.

Mes conseils ne portent que sur les parties contenant des dégradés pour le reste pas de soucis

@++

copperfield a écrit :
Commence à sortir les mouchoirs car tu vas vite comprendre que les dégradés en webDesign c'est pas cool du tout.

Heu... les dégradés, c'est très difficile à gérer en impression, mais sur le web, c'est plutôt "cool", au contraire.

sauf si tu les découpes en tranche au format jpeg...
C'est un massacre, je me suis cassé la tête dessus pendant plusieurs jours car le mal était déjà fait.

C'est en forgeant qu'on devient forgeron (c'est beau )

copperfield a écrit :
sauf si tu les découpes en tranche au format jpeg...
C'est un massacre, je me suis cassé la tête dessus pendant plusieurs jours car le mal était déjà fait.

C'est en forgeant qu'on devient forgeron (c'est beau )

Euhm...
Personnellement, le .jpg est le format que j'affectionne le plus pour les dégradés.
Et je n'ai jamais rencontré de problème particulier.

Cygnus a écrit :
Personnellement, le .jpg est le format que j'affectionne le plus pour les dégradés.
Et je n'ai jamais rencontré de problème particulier.

Le JPEG peut être très bien pour les dégradés s'il n'est pas trop compressé.
Si le dégradé est réellement régulier (c'est-à-dire pas tramé), le PNG-24 va être très efficace dans la plupart des cas (surtout si on passe un coup de pngcrush ou PNG Optimizer derrière). Dans certains cas assez rares, il sera trop lourd. Pas encore bien ciblé pourquoi. Donc souvent je fais des exports en PNG-24 et JPEG (ou dans d'autres circonstances en PNG-32 et PNG-8 par exemple), et je garde le meilleur rapport qualité/poids.

Euh je parle dans le cas de découpe en tranche.
Si vous découpez un dégradé en deux images par exemple au format jpeg et que vous reconstruisez le dégradé en collant les deux images dans votre page html et bien vous verrez une démarquation entre les deux photos alors que sous photoshop par ex. , le dégradé était pourtant uniforme.

C'est à cause de l'algorithme du jpeg que ce phénomène apparait.

C'est d'autant plus visible si vous changez le taux de compression entre les deux images;
Enfin je referai un test sous photoshop pour être sûr à 200%

La vous pouvez me croire car j'ai cherché un p'tit bout de temps en pensant que la démarquation venait d'un décalage de mes deux images.

Voilou @+

a écrit :
copperfield a écrit:
C'est en forgeant qu'on devient forgeron (c'est beau )

Yes, yes c'est ça!

Bonjour

Au sujet du poids des images, il y a quelques années (comme le temps passe) j'ai eu un petit logiciel bien pratique en Freeware qui à l'enregistrement donnait les différents poids possibles sous les formats bmp, gif et jpg (selon un taux de compression défini pour ce dernier). Je n'ai malheureusement plus les références de cet outil bien pratique qui sont parties en fumée avec DD.

A tout hasard est-ce qu'il y aurait quelqu'un connaissant un logiciel de ce type mais qui intègre en plus le png.

Je n'ai rien trouvé à ce sujet et pourtant ça doit bien exister.

Merci

bah oui, photoshop
Bon ok, c'est pas freeware mais peut être que Gimp lui propose aussi cette même option.