Optimisation des visuels

Bonjour tout le monde !

J'ai mon portfolio en ligne depuis un moment et j'ai un petit problème. En effet, j'ai voulu recréer un univers particulier avec de très nombreux visuels. La principale contrainte étant le poids de ma page qui fait environ 4.5 Mo, ce qui est énorme j'en suis conscient.

J'ai déjà optimisé mes visuels sous photoshop (web jpg ou png24) ou mis en repeat (css) quand c'était possible. J'ai déjà réussi à gagner encore 1Mo hier mais là je ne sais plus trop quoi faire de plus.

C'est pourquoi j'aimerais savoir s'il y avait des astuces ou des logiciels capables de m'aider ?

Par avance merci et bonne journée !

(la page en question c'est ici : http://www.florianbranchet.com/graphics.html
pour le reste du site j'arrive à peu près à m'en sortir ^^)

Hello,

J'aurais bien répondu mais ce site commet l'erreur ergonomique majeure de changer l'apparence du curseur de la souris. J'ai été vraiment très très tenté de me barrer de là.

Plus sérieusement (enfin non, c'est super sérieux, il faut juste PAS FAIRE ÇA!), pour tes images:
- Tu dois pouvoir optimiser encore en passant certains PNG en PNG-8 classiques ou PNG-8 avec transparence alpha (Fireworks ou ImageAlpha font ça très bien). Un coup de compression avec ImageOptim ou outil équivalent ne peut pas faire de mal non plus.
- Vu que tu es sur une page longue, le salut est soit dans le découpage en plusieurs pages, soit dans le lazy-loading des images (on charge les images en JavaScript au fur et à mesure que l'utilisateur fait défiler la page).
Modifié par fvsch (18 Jun 2012 - 09:54)

C'est une discipline que l'on nomme performance web.
Il faut près de 10 secondes pour charger ta page d'accueil, avec un start render à 3 s. C'est très long.

Tu peux évaluer tes perfs grâce à webpagetest et appliquer les préconisations.
Je n'ai pas regardé ton site en détail, mais une stratégie pour les pages lourdes en images, c'est de faire du lazy loading (edit: pas vu le post de Florent)
Modifié par paolo (18 Jun 2012 - 10:15)

Ton site est inaccessible pour l'instant donc quelques trucs à l'aveugle (peut-être as-tu déjà fait ça) :

- Utilisation massive des sprites.
- Utilisation systématique de PNG-8 au lieu de PNG-24 quand c'est possible.
- Compression par zones pour les JPG si tu veux aller au fond des choses.
- TOUJOURS recompresser avec un autre outil derrière Photoshop (qui fait tout ça très, très mal) : tu gagnes parfois jusqu'à 60% de poids.
- Mettre des expires headers sur les images (en autres).

Je te renvoie à ma réponse récente en anglais qui reprend certains arguments déjà cités précédemment.
- Avantage de découper un PNG-24 en plusieurs PNG-8 : gain de poids ET chaque PNG-8 aura sa propre palette de 256 couleurs donc au total plusieurs fois 256 couleurs.
Enfin ça c'est quand un JPG ne convient pas à cause de la transparence ...
- détecter les mobiles, pour une fois. 4,5 Mo même en WiFi j'en veux pas et il resterait à l'afficher !
- lazy loading de tout ce qui n'est pas visible au chargement. Comme un heureux titulaire d'une ligne 2megamax (2 mbps) n'attendra probablement pas, tu peux aussi choisir d'être inaccessible à ceux qui n'activent pas JS ... T'es plus à ça près et ce n'est pas un site de contenu mais une démo assumée.
Modifié par Felipe (18 Jun 2012 - 11:34)

Coucou !

Merci pour vos réponses elles m'ont beaucoup aidé ! je viens de gagner 1.2Mo et la page passe donc à environ 3.2Mo. Pour le curseur je vais sans doute l'enlever. Je vais peut être aussi couper la page en deux comme ça plus de problèmes ! Et sinon pour l'affichage mobile j'y ai déjà pensé à plusieurs reprises mais le hic c'est que je ne peux faire qu'un media query pour le css, or il faudrait que je change aussi le html... Bref c'est un peu compliqué pour le moment.
Pour la découpe des png mes visuels n'excède pas 80Ko donc je vais voir. Ce qui est plus lourd ce sont les arrière plan en jpg

Encore merci !