Mes outils pour bloguer : gérer les fichiers multimédias
Rédigé par antistress le 23 février 2010 (mis à jour le 19 février 2023) - 2 commentairesDepuis que j'ai quitté Blogger (lire l'épisode précédent, sobrement intitulé Aujourd'hui est le premier jour du reste de ma vie numérique), j'ai – du moins en théorie – la maîtrise technique complète de mon blogue, ce qui a pour effet de me responsabiliser et de m'inciter à creuser un peu les choses.
Bien que restant incontestablement un blogueur des plus amateurs, glanant de-ci de-là des idées et astuces pour mon blogue sans forcément toutes bien les comprendre, je vais partager avec vous les outils et techniques que je mets en œuvre au quotidien – enfin pas tout à fait si j'observe la fréquence de publication de mes billets – au cas très hypothétique où l'un d'eux vous aurait échappé.
Aujourd'hui nous démarrons avec la gestion des fichiers multimédias : images, sons et vidéos.
Travail sur les images
Des images peuvent servir à agrémenter vos billets ou illustrer votre propos. Assurez-vous que ces fichiers ne nuisent pas au confort de lecture en alourdissant inutilement la page.
La taille de l'image : point trop grande
Inutile de voir trop grand pour illustrer votre blogue. À titre de règle pratique, pour des images au format relativement carré, j'applique une réduction afin que le plus grand côté n'excède pas 400 pixels (si vous souhaitez utiliser une image au format panoramique, remplissant la largeur de votre colonne de texte, vous procéderez différemment). Le logiciel libre GIMP, sous la licence GNU GPL (rappelons que GIMP est l'acronyme de the GNU Image Manipulation Program), vous fera ça très bien par exemple.
Rien ne vous interdit de rendre l'image cliquable et de la lier à une version plus grande pour que vos lecteurs puissent y accéder à leur guise.
Le choix du format de compression de l'image : JPEG ou PNG
Pour diffuser sur le Web vous avez grosso modo le choix entre les formats GIF, PNG et JPEG (ce sont tous des formats libres aujourd'hui).
Passons rapidement sur le premier format que le deuxième remplace avantageusement.
Pour des prise de vue réelles vous privilégierez le JPEG pour le rapport qualité/poids des fichiers obtenus. En revanche, pour des images synthétiques (type capture d'écran) vous privilégierez le PNG qui, tout en assurant une bonne compression, fera des merveilles s'agissant d'un format non destructeur (contrairement au JPEG, la compression au format PNG n'engendre aucune perte de qualité ce que vous constaterez aisément sur des images contenant du texte par exemple : ses bords restent parfaitement définis). Le format PNG gère en outre la transparence.
Optimisation de vos images : troisième acte
Vous avez à présent votre image mise à l'échelle, au format PNG ou JPEG. Savez-vous que ces images contiennent des métadonnées ? Certaines renferment des données techniques, d'autres exposent des informations que vous pourriez considérer comme privées (marque et modèle de votre appareil photo, coordonnées GPS du lieu où la photo a été prise...)
A moins que vous ne soyez féru de technique photographique auquel cas les paramètres de prise de vue ont leur importance, vous pouvez nettoyer vos images de leurs métadonnées avant de les publier tant pour des raisons de performance que de respect de la vie privée.
C'est le rôle des outils libres jpegoptim, sous la licence GNU GPL, pour les images JPEG, et optipng, sous la licence zlib compatible avec la GNU GPL (optipng repose sur libpng qui repose sur zlib), pour les images PNG. Vous utiliserez par exemple les commandes jpegoptim -p --strip-all *.jpg
pour supprimer toutes les données EXIF et commentaires des images JPEG, et optipng -o7 *.png
pour les images PNG (mais aussi BMP, GIF, PNM et TIFF). A noter que l'optimisation se fait dans les deux cas sans dégradation de l'image.
Mise à jour : le greffon « Save for Web » pour GIMP vous permet de générer directement un fichier optimisé depuis votre logiciel de retouche préféré. Vous les trouverez dans les dépôts sous forme de pack nommé « gimp-plugin-registry ».
Travail sur les sons et vidéos
Il est possible d'afficher dans le navigateur des séquences audio et vidéo aussi simplement que des images, grâce aux balises multimédias introduites avec la version 5 de la spécification HTML.
Les balises multimédias de HTML5
Pour intégrer des sons et vidéos dans vos pages web, vous avez à votre disposition les balises audio
et video
de HTML5.
Le fonctionnement de la balise video
est expliqué dans ce billet.
Cependant tous les codecs ne sont pas acceptés au sein de ces balises…
Compression de vos sons et vidéos
Avec le logiciel libre Avidemux vous choisirez « Mpeg4 AVC (x264) » et « AAC (FDK) » respectivement comme encodeurs vidéo et audio et « MP4v2 Muxer » comme format de sortie (ou bien, dans le même ordre : « VP9 (libvpx) », « Opus Encoder » et « Webm Muxer »).
Réserver l'espace pour l'affichage des images et vidéos
Une fois l'image ou la vidéo mise à l'échelle, vous pourrez préciser ses dimensions à l'aide des attributs height
et width
de la balise img
(par exemple, pour l'image illustrant ce billet : height="300" width="400"
).
Attention : il ne s'agit pas ici de demander au navigateur de redimensionner dynamiquement l'image – ce qu'il peut aussi faire – mais seulement de lui indiquer la taille actuelle de l'image afin qu'il réserve son emplacement pendant qu'il construit la page et ainsi d'éviter que la mise en page ne « saute » à ce moment là. Cette technique n'améliorera pas la vitesse de chargement de la page mais influera bien sur la perception que vos lecteurs en ont.
Vous ferez de même avec la balise video
de HTML5 pour les mêmes raisons.
Prévoir un texte alternatif
Que ce soit pour des raisons de référencement ou d'accessibilité, pensez à renseigner dans la balise img
l'attribut de texte alternatif.
Étonnamment l'équivalent n'existe pas pour les balises multimédias de HTML5 (le sous-titrage est censé permettre l'accessibilité).
Stipuler le chargement des images, sons et vidéos à la demande
Pour éviter des chargements inutiles, vous pouvez :
- pour certaines de vos images (celles qui ne sont pas en tête de billet), stipuler l'attribut
loading
avec la valeurlazy
(ce qui donnera :<img loading="lazy" src="image.jpg" alt="texte decriptif" width="640" height="480">
) (plus ici) ; - pour vos sons et vidéos, stipuler l’attribut
preload
avec la valeurnone
(ce qui donnera, pour une vidéo :<video preload="none" src="vidéo.mp4" type="video/mp4" controls="controls" poster="" width="320" height="240">texte alternatif</video>
) (plus là).
Pour finir : d'autres conseils sont compilés à cette page pour rendre son site moins gourmand.