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 commentaires

Stylo ouvert posé sur un carnet près d'une tasse de café

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 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 valeur lazy (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 valeur none (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 ).

Pour finir : d'autres conseils sont compilés à cette page pour rendre son site moins gourmand.

2 commentaires

#1  - poupoul2 a dit :

Juste une remarque concernant les méta-données des images : C'est effectivement valable dans le cas où l'auteur du blog est aussi l'auteur des images. Si les images utilisées sont celles d'un tiers (sous réserve de respect de la licence évidemment), il me paraît dangereux de nettoyer les méta-données les yeux fermés. Nombre de créateurs profitent de ces méta-données pour y insérer des informations de licence. Par ailleurs, ces méta-données sont aussi utilisées par les moteurs de recherche ppour leur indexation.
Je serais donc un peu plus prudent quant à ce nettoyage, et je conseillerais plutôt de ne pas le faire en aveugle. Bien sûr, tout ça n'est valable que pour des oeuvres proposées par des tiers :)

Répondre
#2  - antistress a dit :

@ poupoul2 : anéfé (mais pour des vignettes de 300 pixels de large je pense que c'est moins fondamental que pour des tailles plus grandes d'avantage susceptibles d'être ré-exploitées. Dans tous les cas il faut relier explicitement l'image à son auteur et à sa licence en les énonçant ou en mettant un lien vers ces informations car les métadonnées sont cachées par définition)

Répondre

Fil RSS des commentaires de cet article

Écrire un commentaire

NB : en publiant votre commentaire, vous acceptez qu'il soit placé sous la licence CC BY-SA comme indiqué aux conditions d'utilisation du site

Quelle est le troisième caractère du mot vlgcp ?