Je vous livre ici quelques pistes personnelles de traitement Low Tech des contenus, issues de nombreuses pratiques et expérimentations collectives. Parmi les grandes inspirations, je vous citerai naturellemment en premier chef Gauthier Roussilhe , chercheur spécialisé sur les enjeux environnementaux de la numérisation.

— Principes

  • s’assurer de la pleine cohérence avec les règles pour l'accessibilité des contenus web (WCAG) , notamment (pour ce qui touche au graphisme) en matière de contraste. Vous pouvez tester cette compatibilité à l’aide de l’outil en ligne WAVE / WebAIM .
  • utiliser une seule image par article. Les archives de mon ancien blog comportaient plusieurs images, parfois à des fins purement démonstratives voire illustratives, parce que pour un communicant une image vaut mieux qu’un long discours… Je suis revenu sur cette approche : les images de mes archives ont toutes été optimisées, mes nouvelles contributions se limiteront désormais à une seule image.
  • dans l’idéal j’aimerais pouvoir supprimer les images des articles les moins lus ou archivés : une perspective à laquelle je m’atèlerai prochainement
  • réaliser un traitement précis de chaque format (image, vidéo, audio…)
  • et naturellement respecter les principes de rédaction web vous permettant d’optimiser le référencement naturel (SEO) de vos contenus.

— Traitements des images

Pour les images comportant un très grand nombre de couleurs

Le JPEG est ici le plus recommandé, car il permet de compresser l’image tout en vous permettant de conserver la qualité de rendu que vous souhaitez. Sous Photoshop, voici les paramétrages que je préconise :

  • Fichier > Exporter pour le web
  • choisir JPEG dans le menu déroulant
  • résolution standard pour le web = 72 dpi
  • choisir le mode progressif non optimisé
  • spécifier une qualité à 60-70%
  • converti en sRVB Ces paramétrages permettent d’obtenir des fichiers autour de ~150-200Ko par image (si vous limitez à 1000 pixels de côté). Une bonne pratique sobre revient à calibrer très exactement la dimension des visuels selon leur usage précis. Ce qui vous permettra de réduire encore davantage le poids final.

Pour les images comportant peu de couleurs

L’idéal dans ce cas est le format PNG-8, qui est un PNG limité à 256 couleurs maximum. Avec Photoshop :

  • Fichier > Exporter pour le web
  • choisir PNG-8 dans le menu déroulant
  • puis préciser Perception et Diffusion
  • Tramage à 100%
  • décocher Transparence, Entrelacé et Incorporer le profil de couleur
  • Aligner sur le web à 0%
  • cocher Convertir en sRVB
  • Métadonnées = toutes
  • jouer sur le nombre de Couleurs : soit vous choisissez d’être radical.e en déterminant à l’avance le nombr ede couleurs de vos visuels (c’est mon choix : j’oscille entre 2 et 4 couleurs), soit vous souhaitez conserver un rendu optimal auquel cas vous commencerez par 2 puis 4 puis 8 (…) jusqu’à obtenir le résultat souhaité

Si vous ne disposez pas de Photoshop, il semble que GIMP propose un export en PNG-8 (que je n’ai pas testé). A défaut, voici quelques outils en ligne qui vous permettront de compresser des images :

Une pointe de radicalité

Pour ce blog, j’ai décidé d’utiliser un export en PNG-8 à 2 ou 4 couleurs maximum (idéalement avec un tramage, mais j’y travaille…), ce qui donne un effet graphique très intéressant, par ailleurs souvent confondu avec quelques chose que l’on pourrait assimiler à du “design Low Tech”. Là où il ne s’agit en réalité que d’un traitement radical des visuels… Le design de sobriété repose plutôt sur l’ensemble des leviers liés à l’usage : rendu esthétique certes, mais surtout circulation des informations, parcours & navigation, éco-conception des interfaces, absence de dark patterns, scripts limités, etc. La sobriété de ces éléments visent, pour mémoire, à limiter la consommation globale (notamment énergétique) et ainsi à prolonger au maximum la durée de vie des machines & terminaux.

— Des icones à partir de caractères

Parfois, il est possible de remplacer des images par des rendus visuels construits à base de HTML. Ainsi, vous êtes certains d’alléger grandement le poids de la page (du DOM) puisque celui-ci portera sur de simples polices de caractères et nos plus sur la définitions d’une aire de milliers de pixels (au carré ^).

Dans le squelette du site HUGO = SVG

Les fichiers SVG (Scalable Vector Graphics) correspondent à un langage à balise (basé sur XML) servant à décrire des graphiques vectoriels en 2 dimensions. SVG est ainsi aux graphiques ce que HTML est au texte. SVG est développé par le World Wide Web Consortium (W3C) depuis 1999. Un des avantages du SVG est qu’il soit écrit en texte (et non en code), ce qui le rend analysable par les moteurs de recherche et les navigateurs web : idéal pour le référencement et l’accessibilité. Les SVG ont par ailleurs une compression sans perte et sont beaucoup plus petits que les fichiers PNG ou JPEG : en moyenne leur poids est de 80% inférieur à celui d’un fichier PNG.

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm-fill" viewBox="0 0 16 16">
  <path d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zm2.5 5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z"/>
</svg>

Dans les fichiers Markdown et HTML = Unicode

Les symboles UNICODE correspondent à un jeu de caractères traduits en nombres. Ils pèsent précisément 16 bits, soit 2 octets (là où 1 caractère ASCII pèse 8 bits, soit 1 octet). Vous connaissez certainement l’UNICODE au travers du format de traduction des nombres en binaire (ou “encodage”) UTF-8 (Unicode Transformation Format) ou UTF16 permettant l’affichage des caractères de notre alphabet (sur une page web par exemple).

Par exemple, en saisissant les codes hexadécimaux suivants…

&#x16964; &#x058D; &#x060F; &#x231A; &#x2425; &#9836; &#9775; &#9762; &#9873; &#9760; &#0037; &#9787;

… vous obtiendrez : 𖥤 ֍ ؏ ⌚ ␥ ♬ ☯ ☢ ⚑ ☠  ☻

2 références :

— Traitements des audios

Là-dessus je n’ai rien trouvé de spécifique, au-delà de l’optimisation de la compression MP3, donc avec perte de qualité. Je poursuis mes recherches afin de trouver comment conserver le meilleur rendu audio, même en binaural ou très haute définition, tout en réduisant au maximum le poids des fichiers. Je rédigerai un article dès que j’aurai trouvé une piste intéressante : si vous avez déjà exploré cette problématique, n’hésitez pas à partager vos trouvailles :)

— Traitements des vidéos

Je n’hébergerai certainement que très rarement des vidéos sur ce blog, en revanche si je devais le faire, j’exploiterais les précieux conseils de Gauthier Roussilhe

  • Handbrake permet de réduire drastiquement le poids des fichiers vidéos sans perte de qualité !

␥ Pour aller + loin

Permalien

https://grouan.fr/2022/03/09/traitements-low-tech-images-audios-videos-passer-a-hugo-2/