Les formats WebM et WebP à la loupe
Nous avons une large variété d’options pour optimiser les médias destinés aux sites internet. Il est possible de les optimiser par exemple en utilisant des formats modernes tels que WebM ou WebP. Ces formats de nouvelle génération permettent de gagner du temps car elles sont des versions réduites des médias (JPEG, PNG, GIF, etc.).
Format WebP pour optimiser les fichiers d’images
Il s’agit d’un format d’image conçu par les développeurs de Google pour favoriser une navigation plus fluide sur le net. WebP réduit le volume des images par compression (avec perte ou sans). Même si le format WebP est bien géré par de nombreux navigateurs, il ne l’est qu’en partie. Par conséquent, il est utile de prévoir une autre alternative si vous utilisez d’anciens navigateurs.
Il existe une bibliothèque dénommée libwebp accessible à différents support (Mac, Windows et Linux) destinée à convertir des médias en WebP. Ces derniers peuvent être des vidéos, des images ou encore des GIF.
Comment utiliser le format WebP pour optimiser les images ?
Il est facile d’optimiser les images du net en WebP, suivez les étapes énoncées ci-après :
- Premièrement, commencez en téléchargeant la bibliothèque libwebp sur votre appareil et en la décompressant. Il pourrait être utile de joindre des liens symboliques aux fichiers bin pour y accéder facilement depuis n’importe quel périphérique.
- Deuxièmement, utilisez les outils lorsqu’ils seront prêts. Par exemple, avec l’outil cwebp, il est possible de convertir des fichiers d’images PNG/JPEG au format WebP. Vous pourriez être embêté par les notions d’encodage des extensions donc retenez les quelques notions énoncées ci-après :
- La qualité est codée sous l’extension q qui peut varier de 0 à 100 (75 par défaut).
- L’extension lossless désigne les images comprimées sans compromettre leur qualité (sans perte)
- Le code exact conserve le mode colorimétrique RVB dans les parties transparentes.
Petit conseil, évitez de remplacer les anciennes images, sauvegardez-les tout en répertoriant autre part les fichiers convertis. En fait, ces anciens fichiers vous serviront encore pour la prochaine étape.
- Troisièmement, il faudra exécuter une partie assez ennuyeuse mais essentielle à l’optimisation d’image. Il faut savoir que certains navigateurs comme Safari ne prennent pas en charge WebP. Par conséquent, il faudra télécharger une image de repli (PNG ou JPEG) au lieu du WebP pour ce genre de navigateurs.
Format WebM pour les animations graphiques
WebM est un projet connexe de WebP développé par Google. Vous l’aurez sans doute deviné, on l’a conçu pour mettre des fichiers vidéo et audio sur le Web. En outre, il faut également prévoir de convertir les GIF au format vidéo WebM. Vous pourrez ensuite utiliser l’Open Video pour parcourir en boucle les vidéos.
Comment utiliser le format WebM pour optimiser les graphiques animés ?
Il est possible de contourner les règles du réseau et de fournir une animation d’image hautement optimisée au format de fichier vidéo. Cette technique permet de diminuer la taille du GIF initial de près de 95 % via la compression avec perte, suivez les étapes suivantes :
Premièrement, convertissez vos fichiers GIF au format WebM. Vous pouvez par exemple utiliser ezgif.com. Cette application favorise la création de GIF animés sans avoir à fermer le navigateur web.
Deuxièmement, utilisez la balise HTML5 (vidéo) pour pouvoir parcourir les fichiers nouvellement convertis et les adapter à votre guise. Finalement, le fichier vidéo devrait apparaître comme un GIF animé sans fin. N’oubliez pas d’ajouter les attributs suivant à la vidéo créée, pour :
Parcourir la vidéo après le téléchargement : attribut Autoplay (lecture automatique)
- La lecture en boucle de la vidéo : attribut loop
- Activer la lecture automatique pour les navigateurs qui l’exige : attribut muted
- Éviter que la vidéo ne bascule en plein écran : attribut playsinline.
Parfois, il peut être utile de convertir les fichiers en MP4 comme option de rechange au format WebM. En effet ce format n’est pas forcément supportable pour tous les navigateurs.
Bref, il est possible d’utiliser les formats WebP et WebM pour optimiser la rapidité et l’allègement de vos médias sur le net. Le premier est adapté pour la conversion d’images et le deuxième pour l’optimisation des fichiers vidéo, audio et GIF sur le Web.
Vous pouvez aussi laissez des experts comme siteweb.army s’occuper du côté technique de la création de site web optimisé.
Images pour mon site : comment optimiser leurs dimensions ?
Étant un élément essentiel à tout site internet, les images doivent être dimensionnées d’une manière spécifique pour un site. Or, certains professionnels du web ne connaissent ni les tailles ni les formats d’images convenables à leurs sites. Lire cet article peut vous aider à éviter les mauvais réflexes à cet égard.
Intérêt et usage du format JPEG pour les images du site web
Il est très courant et pratique d’utiliser le JPEG (ou JPG) comme format d’images pour son contenu web. C’est notamment le meilleur choix pour traiter numériquement des photos. En fait, leur petite taille est un atout central pour les images JPG. Le format JPEG réduit sensiblement le volume de données sans compromettre l’aspect qualitatif des images grâce à la compression avec perte. Soulignons tout de même qu’il ne convient pas trop aux images intégrant des zones transparentes. Ces dernières sont plutôt prises en charge par le format PNG.
Intérêt et usage du format PNG pour les images à éditer
Les créateurs du format PNG (Portable Network Graphics) ont voulu pallier certains inconvénients de l’ancien format GIF. Effectivement, le nouveau format intègre un mode colorimétrique plus large tout en considérant le pourtour transparent de certains objets. Si l’on désire par exemple utiliser un arrière-plan transparent (alpha), l’idéal est d’opter pour le format PNG. On peut donc disposer cet arrière-plan derrière les images tout en évitant de les dissimuler. Ces images PNG sont généralement utilisées dans les modèles de création de sites internet. Toutefois, les pages standards d’articles de blog ne requièrent habituellement aucun fond transparent. Sachez que l’extension png compresse les fichiers images sans altérer leur qualité. Puisque le PNG sauvegarde des données volumineuses, il entraîne donc une charge superflue sur le serveur. Quoi qu’il en soit, il est parfait pour afficher des images avec des lignes nettes ou de grandes zones claires. Les logos, icônes ou images vectorielles sont plus volumineuses que les fichiers jpeg et ont souvent un arrière-plan transparent.
Astuces d’optimisation d’images pour améliorer la présentation des contenus d’un site
Pour améliorer leur rendu sur internet, l’idéal est de choisir des images numériques ayant la même résolution en pixels (ou px). 72 pixels par pouce sont amplement suffisants pour un affichage destiné au web. Outre cette résolution, la taille d’image est également importante. Les images de taille 800×600 px conviennent pour les articles de blog. Toutefois, la taille des images ne doit pas dépasser 1200×800 px. En outre, l’insertion d’une image s’étendant sur toute la largeur de l’écran exige environ 1920 px à 2000 px. On insère souvent ce genre d’image en haut des pages web ou en arrière-plan. Pour ce qui est de sa hauteur, elle varie en fonction de l’orientation du modèle ainsi que de l’application qu’on utilise.
Elle peut se présenter sous forme d’une image de fond faisant 1200 px de haut ou d’une courte bande faisant 400 px de large. En outre, WordPress peut gérer la réduction des fichiers images volumineux. Par contre, la taille originale reste sur le serveur et le ralentit inutilement. Or, la lenteur du chargement peut dissuader les visiteurs de les consulter. Parallèlement, les internautes risquent de ne pas voir tout l’aperçu des images lorsqu’ils cliquent dessus.
Options de traitement graphique
Par ailleurs, on peut utiliser Photoshop pour la modification et la réduction des fichiers images. Vous pouvez utiliser des outils comme Photoshop pour la modification ou la réduction des images. Ceci dit, ce logiciel destiné à créer et à retoucher des images est payant et son essai gratuit est limité.
Par conséquent, il constitue un investissement inutile pour les simples usagers qui ne font pas régulièrement de traitements graphiques. Sans oublier que vous ne pourrez pas y réduire rapidement un grand nombre de photos, contrairement au programme gratuit JPEG Resampler 2010. Ce dernier est plus pratique d’utilisation que Photoshop pour réduire rapidement une grande quantité d’images. Pour éditer peu d’images, on peut utiliser Microsoft Office Pictures qui est délivré en standard avec Microsoft Office.
Bref, les détenteurs de sites internet choisissent parfois des images inappropriées qui ne font qu’alourdir et ralentir inutilement leurs pages. Alors qu’en choisissant le bon format d’image, ils pourraient réduire considérablement la taille du volume de données sans compromettre leur qualité.
Nous vous dirigeons quand même vers un prestataire très efficace si vous souhaitez économiser du temps et de l’argent dans la conception de votre site web.
