Depuis 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 300 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.

Travail sur les sons et vidéos

Depuis quelques mois il est possible d'afficher dans le navigateur des séquences audio et vidéo aussi simplement que des images, grâce aux nouvelles balises multimédias introduites avec la version 5 de HTML.

Les balises multimédias de HTML5

Puisque vos sons et vidéos sont destinées à être affichés dans une page web, vous allez utiliser les derniers outils à votre disposition à savoir les balises audio et video de HTML5 et les codecs libres Ogg Theora et Ogg Vorbis (respectivement pour la vidéo et le son) de la fondation Xiph.org.
Pour les nouvelles balises de HTML5 il vous suffira d'utiliser votre éditeur de texte ou de blogue habituel.

Compression de vos sons et vidéos

Pour disposer de fichiers encodés aux formats libres Ogg Theora et Ogg Vorbis à insérer dans ces nouvelles balises, vous pourrez par exemple utiliser le logiciel libre ffmpeg2theora, sous la licence GNU GPL.
Ainsi la commande ffmpeg2theora -V 400 fichier_source -o fichier_de_destination.ogg vous donnera à la vitesse de la lumière une vidéo au format Ogg Theora avec un débit constant de 400 kbit/s (vous pouvez vous contenter de saisir ffmpeg2theora -V 400 fichier_source si vous n'envisagez pas de modifier le nom du fichier qui sera alors littéralement repris avec simplement « .ogg » à la fin).
Vous pouvez ajouter des arguments afin de redimensionner (et même recadrer) la vidéo et trouver le bon équilibre entre résolution et débit. A titre de règle pratique je considère raisonnable un débit de l'ordre de 350-500 kbit/s pour une résolution de 320x240 pixels dans le cas de prises de vue réelles (pour des scènes moins fouillées comme la capture vidéo d'un écran d'ordinateur vous pourrez modifier le rapport débit/résolution en faveur de la résolution). La commande ffmpeg2theora -V 400 -x 240 fichier_source redimensionnera si nécessaire la vidéo pour que sa largeur atteigne 240 pixels (la hauteur étant ajustée automatiquement afin de préserver le rapport largeur/hauteur).
L'encodage audio se déroule de la même manière. Notez que la commande ffmpeg2theora fichier_source --novideo -o fichier_de_destination.ogg sert à extraire et compresser au format Ogg Vorbis la piste son d'une vidéo.
A noter que ffmpeg2theora peut être utilement complété par les Ogg Video Tools, sous la licence GNU GPL, qui vous permettront de joindre ou couper des vidéos Ogg Theora ou encore de dissocier le son de la vidéo d'une séquence donnée (tout cela sans recompression).
Plus d'infos ici, ici et là.
Dans tous les cas, veillez à utiliser la version 1.1 (nom de code : Thusnelda) ou supérieur de l'encodeur Theora qui bénéficie de sérieuses optimisations.

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="225" width="300").
Attention : il ne s'agit pas ici de demander au navigateur de redimensionner dynamiquement l'image 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.
Pour l'anecdote, on regrettera ici que le lecteur audio HTML5 embarqué dans Firefox s'agrandisse en hauteur le temps d'afficher l'indicateur de chargement de la séquence car cela a pour effet de décaler momentanément toute la mise en page et de ruiner tous vos efforts à ce sujet.

Prévoyez 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'existerait pas pour les balises multimédias de HTML5.