Aller au contenu

Que pensez vous de mon site ?


cooloweb

Sujets conseillés

heu :whistling: j'ai mis les images au format gif et leur poid ont diminué d'environ 10* + quelques octets avec Png...

je suis trop content j'comprends pas ce que j'ai fais j'étais persuadé que le format habituelle pour les sites était le jpg

quand j'aurai fini le poid total de mes images devrait donc passer de 600 à 60

je commence à comprendre pourquoi le taux de visite était de 72% ...

Lien vers le commentaire
Partager sur d’autres sites

Pour les repeat-x et repeat-y, ca sert a repeter une image d'arriere plan (background) selon l'axe des abscices (X) ou des ordonnée (Y), c'est a dire horizontalement et verticalement

Par exemple je vois que pour ton menu tu as utilisé une image en degradé de bas en haut, si tu regarde bien (en faisant abstraction du texte) tu remarqueras que l'image est la meme de gauche a droite, c'est a dire que si tu repete l'image horizontalement (repeat-x) tu obtiendras le meme motif, il parait facile de prendre une image de 1px de large (oui oui 1px de large) contenant ton degradé, et de la repeter horizontalement, ainsi tu obtient le meme rendu avec une image netement plus petite

Tu n'as plus ensuite qu'a ajouter le texte sur le fond te le tour et joué

Si je reprend tout ca en css : (supposons que tes menus sont contenu dans un element ayant pour classe menu (class="menu")

.menu a {

display: block; /*pour permetre de dimensionner tes cellules*/

width: 100px;

line-height: 25px;

background: url(tonimagede1pixeldelarge.gif) repeat-x;

}

et en html :

<a href="tonlien">Le titre du lien</a>

Tu vois le principe ?

@++

Lien vers le commentaire
Partager sur d’autres sites

Je suis surpris de ce que tu me dis ! je pensais que tout le monde utillisait le jpg

Une petite recherche sur Google m'a permi de te trouver un article pas trop mal expliquant les différences entre les deux formats. :)

http://actuel.fr.selfhtml.org/articles/graphisme/gif-jpeg/

Bravo, pour ton taux de compression, c'est déjà une belle réussite. Je ne crois pas que tu devrais tenter de les compresser davantage, je fais pleinement confiance à pngoptimizer pour avoir appliqué le taux correct sur tes images. Maintenant, si tu veux faire descendre ton poids de page plus bas encore, c'est sur la structure même qu'il faudra se pencher. :)

Autrement dit, remplacer ou joindre certaines images pour diminuer le nombre de requêtes http et favoriser l'utilisation de CSS pour remplacer certaines autres. Mais le plus important à ce point, ce n,est plus tellement tes images, mais bien ton HTML. Si tu entreprend de virer tous tes tags FONT et autres éléments de présentation pour les remplacer par des équivalences CSS, au bas mot, tu diminuera encore de 50% le poids de ta page...

Mais là, on entre dans quelque chose d'un peu plus corsé. Te sens-tu d'attaque ? Si oui, il est temps de commencer à lire les articles que je t'ai proposé lors de mon premier message :

http://openweb.eu.org/css/

http://www.alsacreations.com/articles/

Bonne chance ! Reviens quand tu auras des questions. :idea:

Lien vers le commentaire
Partager sur d’autres sites

Super ! :D mes images ne pèsent plus que 116ko 207 en tout

croyez vous que je devrais encore baisser où est-ce que ça va comme ça ?

Je pense aussi que les images ont assez maigri comme ca, faut pas non plus les rendre rachitique ;)

Pour finir avec les images et avant d'entamer les CSS, n'oublies pas de rassembler l'ensemble de tes boutons en 1 :

- toutes les images commencant par -http://www.cooloweb.net/Images/blah212

- toutes les images commencant par -http://www.cooloweb.net/Images/Fond

gain espéré : 5*5.7ko + 7*2.1ko = 43.2ko

Lien vers le commentaire
Partager sur d’autres sites

Si je puis me permettre de revenir aux PNGs : si tu les a compressés à partir des jpg, comme le jpg entraine une perte de qualité, ça entraine une forte augmentation de la taille de ces images ^_^ Si tu as les originales non compressées, tu risque de pouvoir gagner encore de la place en les compressant directement...

Lien vers le commentaire
Partager sur d’autres sites

Hum... Si tu souhaites aller plus loin, il faut regarder un peu le code des pages à présent. Comme documentation, je te recommande Ecrire une page Web, fait par les élèves de l'ENS, qui donne toutes les bases dans un langage... humain ;)

Il semble que tu aies beaucoup procédé par copié-collé de pages ou de bribes de codes que tu as pris en exemple. C'est une très bonne façon de commencer, mais il faudrait y mettre un petit peu d'ordre.

En l'état, ta page d'accueil (par exemple) comporte 3 sections <html>...</html>, 3 sections <body>...</body> et 4 sections <head>...</head>, ce qui est un peu trop ;)

En effet, abondance de biens ne nuit pas, mais... une page HTML ne peut comporter qu'une section <html>...</html> unique, et dans celle-ci :

- une section <head>...</head> unique pour des informations non directement affichées par le navigateur dans la fenêtre, mais nécessaires à la bonne restitution de la page,

- une section <body>...</body> unique pour ce qui sera affiché.

Donc typiquement :

<html>
    <head>
          ici pleins de lignes de code
    </head>
    <body>
          ici pleins de lignes de code
    </body>
</html>

Avant d'aborder des choses commes XHTML, CSS et autres, l'étape suivante me semble donc de déplacer un peu les bouts épars et d'éliminer les morceaux inutiles. Tes pages y gagneront à nouveau en poids, et tu pourras aborder le code avec quelque-chose de lisible (pour l'instant, tu aurais beaucoup de mal à t'y retrouver).

Pour t'aider, voici à quoi devrait ressembler le résultat dans un premie temps:

<html>
    <head>
         -ici un seul <title>CooloWeb.net : Le site généraliste de l'internaute et du webmaster classé en 8 thèmes</title>
         -ici plein de <meta...
         -ici un seul <style>...</style>
         -ici plein de <script>...</script>
    </head>
    <body background="...
         -ici plein de lignes de code
    </body>
</html>

Lien vers le commentaire
Partager sur d’autres sites

Hum... Si tu souhaites aller plus loin, il faut regarder un peu le code des pages à présent. Comme documentation, je te recommande Ecrire une page Web, fait par les élèves de l'ENS, qui donne toutes les bases dans un langage... humain ;)

Ouais, merci pour cette ressource Laurent, je ne la connaissais pas. Approche très intéressante pour présenter HTML. approbation.gif

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...