Optimisation graphique pour le web

L'optimisation graphique pour une bonne intégration dans une page web.

Après la création graphique, il s'agit de découper puis d'optimiser les visuels pour une intégration dans une page web.

Les modèles de page

Lors le la phase de création des modèles de pages HTML, l'interface graphique est découpée en éléments graphiques distincts. Le graphisme s'intègre au fur et à mesure de la construction du modèle HTML.

Une des tâches les plus complexes pour les intégrateurs est d'obtenir une réplique exacte d'une interface graphique sous forme HTML. Les modèles de pages web sont composés d'une imbrication de code HTML, de style CSS et de bouts d'éléments graphiques préalablement optimisés.

L'optimisation graphique

Pour garantir un temps de chargement acceptable pour la majorité des utilisateurs, il faut porter une attention particulière au poids des images.

Olloweb s'attache à optimiser les visuels en jouant sur le nombre de couleurs et le taux de compression. Ainsi avant l'intégration dans le modèle de page chaque visuel graphique est optimisé et enregistré suivant les principaux formats d'image pour le web (GIF, JPEG, PNG).

Les formats et la compression d'image

Le format JPEG est utilisé principalement pour l'optimisation des photos ou pour les grandes images composées d'éléments graphiques disparates (composition de logo, photo, schémas...). L'avantage du format JPEG est de proposer une bonne qualité d'image et un faible poids.

L'optimisation du format JPEG se réalise en appliquant un taux de compression de 0 à 100%. Plus l'image est compressée plus la qualité est réduite. Il faut donc choisir le taux de compression correspondant à la qualité recherchée.

Exemple de photo avec une compression de 90% - 3,97 ko

Exemple de photo avec une compression de 70% - 6,69 ko

Exemple de photo avec une compression de 20% - 22,2 ko

L'optimisation du format GIF se réalise en choisissant une palette de couleur des plus réduite afin de baisser le poids du visuel tout en conservant une bonne qualité graphique.

Notre logo utilisant le format GIF avec une palette de 128 couleurs pour un poids total de 1,625 Ko Le format GIF est particulièrement adapté pour l'optimisation des visuels avec des aplats de couleur comme les logos, également les petits éléments graphiques de dégradé, les pictogrammes, les puces et petites illustrations. Il convient également pour de petite animation et permet en supprimant une couleur d'obtenir de la transparence.

L'optimisation du format PNG est identique au format GIF et il faut parfois comparer le meilleur rapport qualité et poids entre les deux formats.

Notre logo utilisant le format PNG avec une palette de 128 couleurs pour un poids total de 1,491 Ko Le format PNG comme le format GIF utilise une palette de couleur pour le rendu. Il peut donc être utilisé pour les même éléments graphique que le format GIF. L'avantage d'utiliser le format PNG est variable suivant les visuels. Ainsi sur des images de taille moyenne la qualité de rendu est meilleure que le format GIF. Le poids est également inférieur sur certains visuels.

Choisir le bon format d'image pour chaque visuel et le bon rapport poids qualité, est la garantie d'avoir un site rapide et performant qui valorise votre communication.