[Terminé] Page lourde

[kouiny]

Bonjour,

Une de mes pages est lourde.

Je voudrais savoir, les images, le mieux pour quel soit légère, qualité normale, c'est de les mettre en quel format et de quelle qualité ?

Total des images sur ma page qui est lourde environ 318 000 octel.

Pour y remedier, sans y enlever mes images, mais en les modifiant.

Qualle solution ?

Merci,

 

[obi]

T'as une URL ?
Pour les formats d'image, les photos en jpeg, et le reste en png.

 

[mr_go]

Cela dépend de ton type d'image. Si ce sont des photos avec de nombreuses couleurs et contraste, je te conseille le jpeg. Sinon le gif ou png sont souvent plus approprié pour les éléments d'illustrations de site (pictos, éléments de charte graphique etc...).

Tu peux tester le poids de tes images ainsi converties via phohtoshop (cher) ou the gimp (gratuit).


Dernière précision, généralement on travaille en 72dpi pour le web.

 

[mirko]

Pour optimiser ta page, tu peux déjà travailler sur ton code pour qu'il soit le plus propre possible.

Ensuite, pour les images, j'utiliserais du .png si j'étais toi. Ce format est sensiblement plus léger que le .jpg (du moins je crois...) et d'une qualité équivalente.

Pour enregistrer tes images au mieux, si tu utilises Photoshop, tu peux juste faire Fichier > Enregistrer pour le web, et choisi la qualité d'image qui te convient.

Si tu n'as pas photoshop, tu peux essayer avec Gimp, mais je ne peux pas te conseiller car je ne l'ai pas utilisé depuis fort longtemps...

 

[mahefarivony]

si c'est le site dans le profil, je pense qu'il y a moyen d'optimiser

.... 32Ko déja pour ce petit monstre

 

[kouiny]

Oui merci, je voudrais l'optimiser.

voici son url : http://www.pourtoutsavoir.com

D'après le site :websiteoptimization.com

Il est assez lent, je voudrais un max l'optimiser. Il y a du trvail mais je suis pret.

 

[t_solutions]

Pour le site, les couleurs sont vraiement chocantes, surtout le jaune.

 

[obi]

Aïe, mes yeux ! Le rose en fond est super-agressif, change la couleur vers qqchose de plus neutre, genre #525;

Les flèches arc-en-ciel et animées, out: :arrow:

Pourquoi ne doit-on pas utiliser de gif animé ?

Tout ce qui est animation a un impact sur l'ergonomie : l'oeil est irrémédiablement attiré par l'animation en général et occulte donc parfois certaines parties de contenu importantes de la page.

Lorsque ces animations sont disséminées sur la page, cela devient très difficile de de fixer sur le contenu, de se concentrer, etc. surtout pour certaines personnes déficientes ou handicapées.

Autre raison : chaque gif animé utilise des ressources et ralentit le navigateur.

Enfin, les gifs animés ont acquis une mauvaise réputation car ils sont la "marque de fabrique" des sites amateurs, "cools" et "djeunz".

Dégage tous les tags <font> et fais ça en CSS (cours CSS)

Vire le flash en bas, il ne sert à rien (vu le nom du site et le titre, on le sait qu'on est là pour tout savoir).

Et d'abord, tout savoir sur quoi ?

<Celui qui me répond sur tout, il sort :!: >

 

[mahefarivony]

en compressant avec xat JPEG optimizer, on obtient déja ceci :

taille : 8ko soit divisé par 4 En passant par le gif, on devrait pouvoir encore diviser par 6 voire par 8

 

[kouiny]

Mais par contre vous avez vu la qualité, on retombe, en mauvaise qualité, je ne comprend pas il y a des sites ou la qualité de l'image est bien avec une taille petite.

Mais si je descend mes images comme celui proposé ci-dessus, mon site va descendre en qualité par rapport au image ?!

 

[mahefarivony]

ah bin si tu veux de sublimes dégradés rosacés violissimo : faut choisir entre le beurre et la fermière

 

[kouiny]

genre #525
Ca représente quelle couleur, avec Dreamweaver ca donne du noir ??
Les flèches arc-en-ciel et animées, out: :arrow:
Ca fait pas pro ces flèches ? :lol: je ne crois pas qu'avec ces flèches là, que le site s'alourdit.

 

[obi]

#525 est un raccourci pour #552255; (on double chaque nombre quand il y en a 3 au lieu de 6)

C'est juste que les flêches qui bougent de toutes les couelurs de l'arc-en-ciel, mes yeux ne supportent pas, et mon bon goût encore moins :?

 

[kouiny]

Avant il y avait pas de flèche, mais je peux rajouter des flèches statics, couleur, unique.

Vous proposer quoi comme fond, couleur ?
Je suis en train d'essayer celle-ci :#660000

Je viens de mettre à jour (flèche viré et couleur de fond changé)

C'est vrai que le site a des couleurs chaudes, pour réchauffer les coeurs, été comme hiver

 

[obi]

Beaucoup mieux !
Sur ton texte central, ne mets que la première phrase en gras:
remplace ton

<font size="2">Bonjour et bienvenue  sur le site PourToutSavoir ! </font>

par un

<h1>Bonjour et bienvenue 
                      sur le site PourToutSavoir ! </h1>

Tes menus à gauche sont difficiles à lire, jaune sur fond blanc, ça le fait pas. Diminue la luminosité de la couleur de tes textes dans le menu
Sinon, afficher l'heure, même dans une jolie bulle, ça ne sert pas à grand chose, tout le monde l'à déjà sur son pc :wink:
Vire tous les tags fonts, et mets-y des CSS, ça vaut vraiment le coup.

 

[kouiny]

Toutes mes images en haut ont été remplacé par le format png qui divise par 2 leur taille !!

Par contre il y a une personne qui a dit qu'on pouvait compressé le css pour une optimisation max !

 

[obi]

Avant de compresser ta CSS, mets-y plus de trois règles, et débarasses toi de ces tags <font> roditju ! Ne pense à rien d'autre tant que ce truc là n'est pas fait :twisted:

 

[kouiny]

D'accord chef je m'y met !! :lol:

 

[keroin]

Tu peux aussi utiliser ce genre d'outil en ligne pour optimiser tes images
=> http://tools.dynamicdrive.com/imageoptimizer/

 

[kouiny]

Merci à tous, je vais terminé devant le sujet car tout a été dit.

Pour le css je galère un peut j'ai pas trop l'habitude, mais j'apprend certaine chose, je creerai un autre sujet si j'ai un problème.

Je remercie tout le monde pour votre aide,