Catégories Web Design & Ergonomie

Compression de l’image pour booster la navigation d’un site internet


ergonomie site web et compression d'image

C’est bien connu : les internautes veulent des navigations rapides aussi bien sur leur mobile que sur leur ordinateur de bureau. Or, et ce n’est pas nouveau, des images en haute définition ralentissent la navigation. De la compression individuelle à l’allégement systématique, on vous dit tout.

Charger des images vectorielles

Vous (et Google !) cherchez à optimiser l’expérience utilisateur. En d’autres termes, l’internaute doit être ravi de naviguer sur votre site. Pour ne pas ralentir leur navigation, oubliez les images PNG de plus de 500 ko. Vous pourrez utiliser le PNG pour toutes vos illustrations en aplat de couleurs, évidemment.

Le mieux est de vectoriser vos visuels. Pourquoi utiliser le SVG ? Tout d’abord, le SVG est un format d’images vectorielles basé sur le langage de balisage XML. Il est donc particulièrement adapté à une diffusion en ligne.

Les SVG sont aussi facile à créer grâce à Illustrator ou Sketch. Par ailleurs, ils sont compatibles avec tous les navigateurs existants et s’adaptent aux écrans retina.

Opter pour la compression systématique des images

Vous avez exporté vos images depuis Photoshop, par exemple ? Installez désormais un de ces 3 logiciels qui permettent de réduire jusqu’à 5 fois le poids de vos photos sans altérer la qualité de celles-ci :

 ImageOptim

 ImageAlpha

 JPEGMini

Pour rendre automatique la compression de vos images, utiliser des outils tels que Node.js ou npm.

Enfin, imageoptim-cli une solution en shell et appleScript qui automatise tout le processus :

imageOptim -j -a -q -d images

Cette commande parcourt alors les contenus dans images, lance les logiciels d’optimisation et remplace l’image originale.

 

N'hésitez pas à partager...Share on LinkedInTweet about this on TwitterShare on FacebookShare on Google+Share on TumblrDigg this

Aucun commentaire

Laisser un commentaire