samedi 3 octobre 2015

Encodage en BASE64 des images avec Web Essentials 2013


Les ressources chargées pour une page web sont parfois nombreuses (images, javascipt, css,etc) et peuvent pénaliser le serveur. : il est globalement conseillé de réduire la quantité de requêtes http pour une page web dans un but d'optimisation globale de votre application web.

Pour les images, il existe une multitude de techniques pour les optimiser : les Sprites, réduction de la tailles des images, et l'encodage en BASE64 des images. C'est du dernier point que je vais vous parler :

l'Encodage en BASE64 d'images
Il s'agit simplement de transformer (encoder) son image sous forme de texte qu'on utilisera directement dans nos css par exemple : du coup, on économise une requête de chargement d'image, cette dernière étant directement encoder dans le fichier css (où dans le "src" d'une balise "image").

l'Encodage BASE64 d'images dans Visual Studio 2013 avec Web Essentials 2013
L'extension Web Essentials 2013 propose les 3 optimisations d'images que j'ai cité plus haut. Voyons comment cela se présente pour l'encodage BASE64 :

Imaginons une classe css dans un projet Web dotnet (dans Visual Studio), qui permet d'afficher une image via une propriété "background". Avec l'extension Web Essentials installée, vous verrez apparaître dans la popUp de notification sur la ligne de votre propriété css 'background' le message :
Performance : the image is only 22(le poids de notre image) bytes and should be embedded as a base64 dataURI to reduce the number of http request.




Tout est dit dans ce message : le point important reste que cette option vous est proposée car votre image a un poids léger. Vous l'aurez, compris l'encodage en base64 n'est pas forcément adapté dans toutes les situations. D'ailleurs, ce type d'encodage entraîne en générale une augmentation du poids de l'image au moment du rendu.

Au passage, Web Essentials vous propose une optimisation de l'image en réduisant son poids (cf image ci-dessous).




Une fois l'option "Embed as base64 dataUri" sélectionnée, votre ligne css sera remplacée automatiquement par l'uri encodée.



Pour information
- L'encodage en base64 n'est pas supporté par les version IE antérieure à la 8.
- Cette technique d'encodage n'est pas seulement utilisée pour les images, mais peut servir pour d'autres types de ressource.
- il existe des encodeurs base64 en ligne


Aucun commentaire:

Enregistrer un commentaire