Régime été, faire maigrir son site!!

[tsaong]

Bonjour tout le monde

Alors voila, comme le titre le dit j'aimerais faire perdre du poids à mon prochain site en optimisant les PNG,
J'aimerais avoir vos conseils sur la découpe des images, comment faire, les techniques???

J'ai quelques encadrés sur la page d'accueil et sur les autres (Voir page d'accueil Webrankinfo, sur la droite intitulée Logiciel de pro) je voulais savoir si il fallait mieux les laisser complète ou les découper en tranche pour optimiser le poids ?

De plus j'ai une grande colonne sur la gauche qui fait grosso modo 980 x 200 pxl dans laquelle se trouve des liens rapides et autres info en lien interne.

Cette colonne est fixe, enfin je veux elle aura toujours les mêmes dimensions peut importe la longueur des pages.
De plus l'angle sur le coté gauche de chaque barre est arrondis!!

Ci-dessous un pseudo schéma de cette colonne

!!!!!!!!!!!!!!!!
!
!
!
!!!!!!!!!!!!!!!!
!
!!!!!!!!!!!!!!!!
!
!
!
!
!!!!!!!!!!!!!!!!
!
!
!
!
!!!!!!!!!!!!!!!!
!
!
!

Je pensait à développer les encadrés en CSS, mais je vais me prendre la tête pour les arrondis
Merci pour votre aide

Je connais bien les pack Adobe, logiciel avec lesquels je boss

 

[skyll]

un petit schéma ou capture serais pratique :wink:

 

[tsaong]

et voici le lien
http://www.pixyup.com/uploads/021727224c56e3da39114.JPG
merci

 

[HawkEye]

Si tu veux vraiment optimiser, travaille avec des sprites CSS: http://www.pompage.net/pompe/sprites/

 

[skyll]

ben, 3 solutions :
- avec des png (légèrement plus lourds mais bon, pas énorme quand même) ca gère la transparence,
donc pratique si ton background est pas uniforme, tu peut créer 3 petites images png ou un bandeau
pour gérer ton arrondi.

- avec des jpg (tu peux les compresser bien plus que les png) mais ca gère pas la transparence

- avec du CSS (ca marche pas ou mal avec IE8, pour IE7 y'à un paliatif) mais pour le reste, ca fonctionne plutôt pas mal...

dans les cas "image" un petit bandeau ou 3 petites images pour garder "l'elasticité" c'est pas bien lourd, et faire maigrir ca...
je vois pas vraiment l'utilité...
elle pèse combien tes png ?

 

[tsaong]

en totalité et avec la solution la plus simple, c'est à dire en découpant pas page présente sur le lien par tranche
les images devraient avoir un poir grosso modo de 4100 ko

 

[skyll]

en totalité et avec la solution la plus simple, c'est à dire en découpant pas page présente sur le lien par tranche
les images devraient avoir un poir grosso modo de 4100 ko

8O houla....
bon, je crois que tu dois pas avoir la bonne technique la...
tu aurais dis 100Ko, j'aurais dit, ca fais trop, on peur gratter encore, mais là... c'est totalement irréel...

pour ta colonne par exemple, comment t'y prends tu ?

avec un petit bandeau de 5ko max que tu répète, ca suffirait amplement... allez, 10ko parceque c'est décoré avec plein de fioritures... mais pas plus.. du coup ta colonne, 20ko avec le texte + code + css :wink:

PS : et avec du css, juste le poids du code, quelques octets :mrgreen:

 

[tsaong]

avec la solution dans mon message précédent je vais au plus simple
c'est à dire que via Illustrator je découpe chaquee encadré et l'enregistre en PNG!
pour la colonne je crée une image de 980 par 200 pxl et je l'enregistre en PNG!!

 

[skyll]

OMG :mrgreen:
bon, va falloir revoir la méthode, c'est ca qui colle pas

comment expliquer ca...
par exemple un possibilité simple :

3 mini images de quelques octets a quelques ko
http://www.pixyup.com/uploads/021923124c56ff00dbdcc.jpg

dans une table de 3 ligne ou dans 3 div : 3 bacground
et tu duplique le code seulement, pas les images :wink:

 

[tsaong]

ok donc je segment les encadrés, et enduplicant le code je reforme le cadre!
jai tout de même une question pour le CSS est il accepté par tous les navigateurs, et comment faire pour les arrondis ?
merci de ton aide

 

[skyll]

ok donc je segment les encadrés, et enduplicant le code je reforme le cadre!
jai tout de même une question pour le CSS est il accepté par tous les navigateurs, et comment faire pour les arrondis ?
merci de ton aide

tout à fait, ca te fera gagner de précieux Ko :wink:

pour le css, non, il n'est pas encore accepté partout...
IE7 => marche pas d'origine. fonctionne pas trop mal avec le script "roundies"
IE8 => marche pas d'origine. possible avec la gruge d'IE7 mais plus de background possible sur les parties arrondies
FF => fonctionne sur toutes les version récentes que j'ai testé
chrome => fonctionne sur toutes les version récentes que j'ai testé
pour le reste, faut tester :wink:

tu peut chercher du côté des commandes :
border-radius
moz-border-radius
webkit-border-radius
khtml-border-radius

 

[tsaong]

donc au final
il est préférable de développer un site avec de petite image duplucable quen CSS ?

 

[kanon90]

Perso pour ma part je compresse mes png de facon à conserver une qualité acceptable pour le web et pas trop trop lourde. j'obtiens des résultats assez intéressant, proche du jpg en poid.

cf : http://le-blog-de-kanon.ma-deesse.com/referencement-seo/google-et-le-t ... pages.html

 

[tsaong]

quels sont les avantages du CSS ?
est ce que le référencement est amélioré si développé en CSS ?
Quel genre de site doivent développé en CSS, je veux dire par rapport à leur produit, ou concept ?