18041 sujets

Questions générales et questions de débutants

Compression images

salut

depuis peu, je m’intéresse à la vitesse d'affichage en et aux perfs liées au sites

j'ai lu l'article suivant : http://www.alsacreations.com/article/lire/914-compression-pages-html-css-gzip-deflate.html

Mais avec mon pagespeed, il me dit que j'ai une perte de 16% car mes images ne sont pas compressées !

ma question est : dois je utiliser un logiciel tel OPTIPNG ou autre ?

Ou puis je faire cela dans mon htaccess à l'aide des modules apache deflate ou gzip?

si oui doit il se trouver dans le répertoire contenant les images ou à la racine ?

http://webmaster-lorraine.com/capture.jpg
PS : je monte à 78/100 en vidant le cache sur la homepage Smiley sweatdrop et 95% sur les autres Smiley smile

c'est à cause de ce fichu cloud caroussel tout ça

En faisant 2/3 bidouilles je peux monter à 80 max, ça craint

help me Smiley bawling
Bonjour,

Tu demandes s’il faut utiliser le .htaccess pour compresser les images.
Dew dans son article que tu cites en lien te donne la réponse
a écrit :
Il est inutile de s'en servir pour les fichiers binaires (images, vidéos, PDF...)

Il faut effectivement utiliser des logiciels comme optipng que tu cites pour réduire la taille de tes images car c’est les formats des images eux-mêmes qui ont été conçus pour minimiser la taille des fichiers.

Une fois que tu auras réduits tes images, une chose très simple (si tu utilises un serveur Apache bien configuré) pour accélérer le chargement de ta page est de rajouter un .htaccess. Voici celui que j’utilise :
#  http://www.webmaster-hub.com/publication/Mod-rewrite-ou-la-reecriture-des.html
 
# Pour améliorer la note de performance donnée par Yslow, on peut rajouter à la racine d'un projet le fichier .htaccess suivant :
################################################################################
################# Ajouter une date d'expiration en en-tête #####################
################################################################################
#  http://www.apachefrance.com/Manuels/Apache_1.3_VF/mod/mod_expires.html
 

ExpiresActive On
### On va ajouter une date d'expiration aux images et aux fichiers js et css de 1 mois. On peut facilement la réduire si on le souhaite tout dépend. Il faut vérifier que les images sont statiques. En général quand on utilise jpgraph on nomme le fichier image dynamique .php donc pas de problème.

ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType text/plain "access plus 1 month"
ExpiresByType text/css "access plus 1 month"

################################################################################
########################## Enlever les Eétiquettes #############################
################################################################################
FileETag None

################################################################################
################### Permettre la compression des fichiers ######################
################################################################################
#  http://www.wikigento.com/?p=549
 

php_flag zlib.output_compression on

# Insérer un filtre
SetOutputFilter DEFLATE

# Netscape 4.x a quelques problèmes...
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 en a quelques uns de plus
BrowserMatch ^Mozilla/4\.0[678] no-gzip

# MSIE se fait passer pour Netscape, mais c'est bien (?)
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Ne pas compresser les images
SetEnvIfNoCase Request_URI \.(:gif|jpeg|png|jpg)$ no-gzip dont-vary

# Être sûr que les proxies n'envoient pas le mauvais contenu
Header append Vary User-Agent env=!dont-vary


##########################################################################"
########## Règles de redirections ########################################
##########################################################################
Options +FollowSymlinks
RewriteEngine on
RewriteRule   ^nexistepas$   trouve.html  [L]

Modifié par adrien881 (30 Nov 2011 - 14:59)
Smushit reste limité ( tout comme les optimisateurs de png ) : il compresse sans perte de qualité. C'est problématique si les images sont de trop grande qualité... Ca n'est donc à employer qu'à la fin du travail d'optimisation.


Le meilleur moyen reste l'optimisation à la source, dans Photoshop par exemple, avec un enregistrement pour le web déjà précis : un jpg n'a pas besoin d'une qualité supérieure à 60% dans la majorité des cas, et un png peut très souvent être enregistré en png8 et avec un nombre de couleur réduit.
C'est fait merci !
Du moins pour la compression des pages etc..

Je suis monté à 99/100 grâce au chargement de mes JavaScript après que la page soit entièrement chargée !

Si ça peut être utile à d'autres, ça frite bien

<script type="text/javascript">
function includeJS(src){
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', src);
document.getElementsByTagName('head')[0].appendChild(script);
}/*** Une fois la page chargée...*/
(window.addEventListener || window.attachEvent)
(window.addEventListener ? 'load' : 'onload',function() {
//on lance la fonction avec ses scripts js
tincludeJS('http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js');
 tincludeJS('web/js/cloud-carousel.1.0.5.min.js');
 tincludeJS('web/js/jquery.mousewheel.min.js');
 tincludeJS('web/js/cloud-carousel.1.0.5.min.js');
 tincludeJS('web/fancybox/jquery.fancybox-1.3.4.pack.js');
 
 },true);
</script>

Smiley cligne
Modifié par phpCbien (30 Nov 2011 - 18:37)
c'est bizarre

avec firebug, je vois qu'il me génère bien mes scripts mais il ne reconnait pas le $ de jquery en fin de page !

les Lazy Loading sont ils vraiment efficaces ?

CAR selon pagespeed 101.6 Ko du code JavaScript est analysé lors du chargement initial de la page
Modifié par phpCbien (30 Nov 2011 - 18:01)
Bon je veux être + clair

je souhaite Reporter le chargement du JavaScript(cf doc ci dessus)

voici le lien !

http://webmaster-lorraine.com/index2.php

le script est celui cité plus haut et figure dans la doc

regardez avec firebug, les dépendances sont bien chargées, mais pourtant il n'exécute pas le code à la fin ($ est indéfini)

Warum ? Smiley bawling
j'ai placé mon code dans un fichier externe

j'ai plus de problèmes de ce coté mais le changement est pas énorme

Tout vient du carrousel qui redimensionne les images à la volée Smiley fache

j'édite pour ne pas trop upper

bien noté l'optimisation des images sous photoshop.....

Et pour le reste, la compression, les redirections, entêtes http, minifier ses js , balancer tous ses css dans un seul puis le minifier, bla bla, j'ai bien pigé Smiley rolleyes

j'ai passé la journée à comprendre ça et son utilité.

Seulement un truc me turlupine c'est "Différer l'analyse du code JavaScript"... Smiley biggol

Est ce si important bordel ! Smiley fache

Smiley lol Smiley lol Smiley lol
Modifié par phpCbien (30 Nov 2011 - 22:25)
Ça vient surtout du fait que tes images (du carrousel) sont en PNG 24 avec transparence (pour l'ombre). Si acceptes de perdre un peu en qualité tu peux les convertir en PNG 8 avec transparence alpha dans FireWorks.
ouaip merci

Et sous photoshop ?
EN PNG8 je peux réduire leur poids de moitié Smiley eek

Ça me massacre l'ombre Smiley lol
Modifié par phpCbien (30 Nov 2011 - 22:42)
phpCbien a écrit :
Ça me massacre l'ombre Smiley lol


C'est pour ça que je t'ai dis de le faire sous Fireworks en utilisant la transparence alpha. Sous Photoshop c'est pas possible.
Sujet clos
Aller à