Optimisation des images d'un site Web - Partie 2

Ça y est, votre projet de site Web est lancé, ou peut-être même achevé.

Mais avez-vous pris en compte toutes les possibilités d'optimisation qui faciliteront son utilisation par un internaute ?

Dans cet article, j'aborde les optimisations possibles pour toutes les images... et il y a des choses à faire !

Un site Web moderne utilise largement les images. Leur optimisation est donc un critère essentiel de performance, notamment au regard du temps de chargement des pages.


Du côté du HTML

Concernant l'appel aux images dans votre code HTML, n'oubliez jamais de préciser la largeur (attribut width) et la hauteur (attribut height).

Les navigateurs ajustent sans problème l'affichage, alors pourquoi ajouter ces balises, me direz vous ? Et bien tout simplement pour la raison qui sous tend cette question : l'ajustement dynamique au fur et à mesure des chargements.

En effet, si les dimensions attendues ne sont pas précisées, l'affichage est recalculé pour chaque image chargée (effet dit de « reflow ») et déplace ainsi les éléments en fonction de la taille constatée, provoquant ainsi des affichages intermédiaires totalement déstructurés.

À l'opposé, une page structurée est lisible, indépendemment de l'affichage des illustrations graphiques, améliorant ainsi grandement le confort de l'internaute.


En écho à la recommandation émise dans le paragraphe Gérer la taille, utilisez, si nécessaire, les attributs hspace et vspace ou les propriétés CSS (padding et margin) pour contrôler les espacements.

Soit votre structure permet de regrouper ces définitions dans une feuille de style, soit vous pouvez les gérer unitairement par une déclaration inline.

L'exemple ci-dessous affiche l'image « mon-image.png », d'une hauteur et d'une largeur de 32 pixels, en ajoutant un espace horizontal de 5px, vertical de 10px et une marge droite de 15px.

                                    
                                        <img src="chemin/mon-image.png" 
                                             width="32px" height="32px" 
                                             hspace="5px" vspace="10px"
                                             style="margin-right:15px;" />
                                    
                                

Pour la syntaxe complète et détaillée de la balise img, vous pouvez consulter Insérer une image et IMG - Inline Image.

Déclaration inline

Pour les images de taille réduite, vous pouvez également limiter le nombre de requêtes HTTP par une déclaration inline, dans du html ou dans vos feuilles de style.

Pour cela, il suffit d'encoder le fichier image en base 64 et d'insérer le résultat directement dans la feuille de style.

Dans une session terminal, vous pouvez utiliser une commande du type :

                                    
                                        $> openssl base64 -in img/image-to-encode-64.png | tr -d '\n\'
                                        iVBORw0KGg......
                                    
                                

Vous pouvez aussi utiliser un service en ligne, comme par exemple Motobit - Base 64 encoder-decoder ou http://www.greywyvern.com ou encore préférer l'utilisation d'un outil Windows sur votre poste, comme celui développé par John Dyer : Css Image Embedder


Cette technique augmente le volume de données de 30 à 50%, mais réduit le temps de chargement global de la page.

Elle ne peut donc être utilisée que pour de petites images (icones par exemple).

Dans du code HTML, cela donne, par exemple :

                                    
                                        <img src="data:image/jpg;base64,iVBORw0KGg......);
                                             width="32px" height="32px" />
                                    
                                

Et dans du code CSS :

                                    
                                        header{
                                            background:blue url(data:image/png;base64,iVBORw0KGg......);
                                        }
                                    
                                

Mais attention !

De nombreux navigateurs, dont Internet Explorer, sont incapables de traiter correctement ce type de déclaration.

Or il se trouve qu'Internet Explorer représente une quantité non négligeable de navigateurs et rend, de fait, cette technique impossible à utiliser pour des sites grand public.


Les sprites, méthode 1

Toujours dans l'optique de réduire le temps de chargement global de la page, une approche alternative pour réduire le nombre de requêtes d'appels d'images est de regrouper le maximum d'images en une seule.

Par exemple, l'image ci-dessous est composée de 4 sprites de 32 x 32 pixels.

À l'usage, il suffit de définir et déplacer une zone d'affichage précise pour n'afficher que la partie d'image souhaitée.

Par exemple, la déclaration CSS ci-dessous provoque les décalages nécessaires vers la gauche (multiples de 32 pixels) afin de n'afficher que l'icone ad-hoc en fond de DIV.

                                    
                                        <style>
                                        #faceBook {
                                           width:32px;
                                           height:32px;
                                           background:url(img/optimisation-image-5.png) 0px 0px no-repeat;
                                        }
                                        #linkedIn {
                                           width:32px;
                                           height:32px;
                                           background:url(img/optimisation-image-5.png) -32px 0px no-repeat;
                                        }
                                        #Rss {
                                           width:32px;
                                           height:32px;
                                           background:url(img/optimisation-image-5.png) -64px 0px no-repeat;
                                        }
                                        #viadeo {
                                           width:32px;
                                           height:32px;
                                           background:url(img/optimisation-image-5.png) -96px 0px no-repeat;
                                        }
                                        </style>
                                        
                                        <body>
                                            <div id="faceBook"></div>
                                            <div id="linkedIn"></div>
                                            <div id="Rss"></div>
                                            <div id="viadeo"></div>
                                        </body>
                                    
                                
FaceBook LinkedIn Rss Viadeo

Note : l'utilisation de la propriété background permet de pouvour afficher du texte en sur-impression.


Pour en savoir plus sur l'utilisation de la propriété background, vous pouvez commencer par un excellent tutoriel AlsaCréations.

Les sprites, méthode 2

Une autre possibilité est d'utiliser le clipping d'image, à condition de s'appuyer sur un container externe.

                                    
                                        <style>
                                        .clipDiv {
                                           position:relative;
                                           overflow:hidden;
                                           width:32px; /* la taille de l'icone */
                                           height:32px;
                                        }
                                        .faceBook {
                                           position:absolute;
                                           top:0;
                                           left:0;
                                           clip:rect(0 32px 32px 0);
                                        }
                                        .linkedIn {
                                           position:absolute;
                                           top:0;
                                           left:-32px;
                                           clip:rect(0 64px 32px 32px);
                                        }
                                        .Rss {
                                           position:absolute;
                                           top:0;
                                           left:-64px;
                                           clip:rect(0 96px 32px 64px);
                                        }
                                        .viadeo {
                                           position:absolute;
                                           top:0;
                                           left:-96px;
                                           clip:rect(0 128px 32px 96px);
                                        }
                                        </style>
                                        
                                        <body>
                                            <div class="clipDiv">
                                               <img class="faceBook" src="img/optimisation-image-5.png" />
                                            </div>
                                            <div class="clipDiv">
                                               <img class="linkedIn" src="img/optimisation-image-5.png" />
                                            </div>
                                            <div class="clipDiv">
                                               <img class="Rss" src="img/optimisation-image-5.png" />
                                            </div>
                                            <div class="clipDiv">
                                               <img class="viadeo" src="img/optimisation-image-5.png" />
                                            </div>
                                        </body>
                                    
                                
FaceBook LinkedIn Rss Viadeo

Pour en savoir plus sur l'utilisation de la propriété clip, vous pouvez commencer par un excellent tutoriel CSS-Tricks, CSS Sprites with Inline Images.


 

Au résultat des 2 méthodes, une image chargée, 4 images affichées (!) mais à l'usage, la gestion par la propriété background est certainement le meilleur choix.

Conclusion

L'ensemble des éléments évoqués dans cet article permet de réaliser une véritable optimisation du temps de chargement des pages, pour peu que l'on se donne la peine de réfléchir à une stratégie d'optimisation des requêtes HTTP produites.

Maintenant, c'est à vous, car n'oublions pas qu'il est communément admis qu'à chaque seconde de chargement d'une page, c'est 10 internautes qui fuient !