LowTech

Techniques

Techniques

Optimiser ses images avec le «Dithering»

Afin de diminuer au maximum le poid de ces images, le site de [LOW←TECH MAGAZINE] à mit en place une ancienne technique de compression d’image appelée « diffusion d’erreur ».

Cette technique repose sur deux grand principes :

La «quantification des couleurs»

Une image habituel est composé de pixel pouvant avoir nimporte quel couleur codé sur trois canneaux : Rouge, Vert, Bleu, avec pour chaque une valeur allant de 0 à 255.

L’indexation d’image est une technique qui consiste à réduire les couleurs de l’image à une palette réduite.

Cette technique, aussi nommée «Color Quantization» économise beaucoup de poid, mais laisse place à moins de nuances.

L’équipe de [LOW←TECH MAGAZINE] a fait le choix d’utilier 4 nuances de gris, et d’y appliquer un filtre CSS pour remplacer le blanc par une couleur : mix-blend-mode: hard-light;

Par contre, si on se contente d’indexer les couleurs d’une image dans Gimp ou Photoshop, le rendu visuel ne sera pas forcément optimal, surtout en monochrome.

Le «trammage»

Pour améliorer la visibilité de l’image avec le moins de couleurs possibles, une bonne astuce est d’utiliser des trames «dithering».

Vu a une certaines distance, la quantité de noir et de blanc se mélangent et sont percu comme un gris.

Il existe plusieurs algorythme de dithering, imagemagick permet entre autre d’en appliquer en ligne de commande.


R&D de compression

J’ai voulu expérimenter différentes options d’imagemagick pour comparer les résultat tant visuelment que sur le poid du fichier final.

Quantification des couleurs

# Resize & 2 grey : 19KB
convert gare.jpg -resize 400x600 -colors 2 -colorspace gray -normalize gare1.gif

# Resize & 3 grey : 24KB
convert gare.jpg -resize 400x600 -colors 3 -colorspace gray -normalize gare2.gif

# Resize & 3 colors : 25KB
convert gare.jpg -resize 400x600 -colors 3 -normalize gare3.gif

# Resize & 4 colors : 30KB
convert gare.jpg -resize 400x600 -colors 4 -normalize gare4.gif

gare1.gif gare2.gif

gare3.gif gare4.gif


Trammage en noir et blanc

# Resize & Ordered Dither 2 : 8KB
convert gare.jpg -resize 400x600 -colorspace gray -ordered-dither o2x2 gare5.gif

# Resize & Ordered Dither 3 : 10KB
convert gare.jpg -resize 400x600 -colorspace gray -ordered-dither o3x3 gare6.gif

# Resize & Ordered Dither 4 : 11KB
convert gare.jpg -resize 400x600 -colorspace gray -ordered-dither o4x4 gare7.gif

# Resize & Ordered Dither 8 : 12KB
convert gare.jpg -resize 400x600 -colorspace gray -ordered-dither o8x8 gare8.gif

gare5.gif gare6.gif

gare7.gif gare8.gif


Trammage en couleurs

# Resize & Ordered Dither 2 : 20KB
convert gare.jpg -resize 400x600 -ordered-dither o2x2 gare9.gif

# Resize & Ordered Dither 3 : 23KB
convert gare.jpg -resize 400x600 -ordered-dither o3x3 gare10.gif

# Resize & Ordered Dither 4 : 25KB
convert gare.jpg -resize 400x600 -ordered-dither o4x4 gare11.gif

# Resize & Ordered Dither 8 : 27KB
convert gare.jpg -resize 400x600 -ordered-dither o8x8 gare12.gif

gare9.gif gare10.gif

gare11.gif gare12.gif


Comparaison

Les trammages en noir et blanc donnent les meilleur compression :

Suivi par :

Les autres vont de 23KB à 30KB ce qui commence à faire beaucoup comparé au 10KB totalement correcte que l’on a eu précédement.

Le meilleur compromit taille et esthétique se place donc entre :

Je vais décliner ces réglages avec différentes images sources pour avoir un avis plus avisé.

Sources : gare.jpg ; matcha.jpg ; bike.jpg ; desktop.jpg ;

Déclinaison

gare6.gif gare7.gif

10KB & 11KB

matcha3.gif matcha4.gif

4KB & 4KB

bike3.gif bike4.gif

13KB & 16KB

desktop3.gif desktop4.gif

10KB & 11KB

Conclusion

On constate que dans certains cas, le «Ordered Dither 3» manque de détail. Je préconise donc «Ordered Dither 4» :

convert input.jpg -resize 400x600 -colorspace gray -ordered-dither o4x4 output.gif

Sites

Sites

LowTechLab

Lien du site

Lien du wiki

Ce site et surtout ce wiki servent à partager des astuces LowTech mais dans des domaines non numérique tel que :

Articles

Articles

Comment créer un site web basse technologie

Lien de l’article

Introduction

Selon les dernières estimations, le réseau tout entier représente 10 % de la consommation mondiale d’électricité et la quantité de données échangées double tous les deux ans.

Faire fonctionner les centres de données avec des sources d’énergie renouvelables ne suffit pas à combler la consommation d’énergie croissante d’Internet.

Avec l’amélioration des terminaux et de la connexion internet, le poid moyen des pages web on été multiplié par 4 en 8 ans.

Des sites plus « lourds » ou plus « gros » ne font pas qu’augmenter la consommation d’énergie sur l’infrastructure du réseau, ils raccourcissent aussi la durée de vie des ordinateurs, car des sites plus lourds nécessitent des ordinateurs plus puissants pour y accéder. Ce qui veut dire que davantage d’ordinateurs ont besoin d’être fabriqués, une production très coûteuse en énergie.

En quelque année, on est passé d’une connexion ponctuel sur l’ordinateur au travail, à la maison, à la bibliothèque à une connexion permanante avec la wifi/4G et les smartphones.

Conception d’un site internet basse technologie

Avec un site internet poids plume alimenté par l’énergie solaire et déconnecté du réseau, nous voulons démontrer que d’autres décisions peuvent être prises. La taille de la page (d’accueil) a été divisée par plus de six, le nombre de requêtes par cinq, et la vitesse de téléchargement a été multipliée par dix.

Le site est statique

Les sites internet statiques sont donc basés sur le stockage de fichiers quand les sites dynamiques dépendent de calculs récurrents. En conséquence, un site statique nécessite moins de puissance de calcul, donc moins d’énergie.

Les images optimisées

Pour réduire le poid des images sans réduire l’atractivité du site. Les images consomment l’essentiel de la bande passante, les optimiser fait le gros du travail.

Nous avons plutôt choisi d’appliquer une ancienne technique de compression d’image appelée « diffusion d’erreur ». Le nombre de couleurs d’une image, combiné avec son format de fichier et sa résolution, détermine la taille de cette image. Ainsi, plutôt que d’utiliser des images en couleurs à haute résolution, nous avons choisi de convertir toutes les images en noir et blanc, avec quatre niveaux de gris intermédiaires.

Cette technique nommée «dithering» diminu par dix leur consomation de ressource.

Il y a des lib sur Github ou des fonctions dans ImageMagick

Police et Logo

Toutes les ressources chargées, y compris les polices de caractères et les logos, le sont par une requête supplémentaire au serveur.

Le choix est donc d’utiliser la typo par defaut du navigateur et d’utiliser un logo en typo.

Pas de pistage par un tiers, pas de services de publicité, pas de cookies

Avec un serveur auto-hébergé, nous pouvons obtenir et visualiser ces mesures de données avec la même machine: tout serveur génère un journal de ce qui se passe sur l’ordinateur. Ces rapports (anonymes) ne sont vus que par nous et ne sont pas utilisés pour profiler les visiteurs.

Avec un serveur auto-hébergé, pas besoin de pistage par un tiers ni de cookies.

Google collecte des informations sur les visiteurs du blog, ce qui nous contraint à développer davantage les déclarations de confidentialité et les avertissements relatifs aux cookies, qui consomment aussi des données et agacent les visiteurs. Nous avons donc remplacé Adsense par d’autres sources de financement (voir ci-dessous pour en savoir plus). Nous n’utilisons absolument aucun cookie.

Articles

Le Libre peut-il faire le poids ?

Lien de l’article

On y apprend que c’est un mouvement qui s’oppose frontalement aux géants, ce qui est fantastique.

Si les bribes d’idéologie LowTech orientent les gens vers des associations, comment fait-on pour sortir de terre une entreprise éthique, rentable et solidaire ?

Il donne les liens :

Nous avons besoin d’un antidote au capitalisme de surveillance qui soit tellement contradictoire avec les intérêts des Big Tech qu’il ne puisse être récupéré par eux.

Articles

Pourquoi la révolution des machines à écrire est-elle nécessaire dans les bureaux?

Lien de l’article

Le problème des écrans multiples est qu’ils augmentent énormément la consommation d’énergie. Ajouter un second écran à un ordinateur double la consommation d’électricité, en ajouter cinq la triple.

Le papier ne consomme rien la ou les seveurs consomment h24

Machine à écrire

Il est possible de remplacer le la rédaction un ordinateur par une machine à écrire. Il en existe des modernes, qui sauvegarde des fichier text. Elles sont monotache, donc sans distraction. Elle pouvent avoir un système de cloud pour sauvegarder le travail.

Papier carbone

Avec une machine à écrire, on peu avoir jusqu’a 10 verssions simultanée.

Imprimantes

Les imprimantes matricielles sont beaucoup plus moins energivore que celles celles laser, et bien moins cher que les cartouches jet d’encre.

Par contre elle ne permetent que l’imperssion de text en noir.

Vidéos

Vidéos

Et s'il existait des jeux en exemplaire unique ?

Il parle de web à partir de 3m32s

Jeu vidéo

Comparaison de l’industrie numérique ou rien n’est unique et ephemaire à certaines démarches d’artistes.

Il présente un developpeur de jeu vidéo qui vend des jeu qu’a la première personne qui l’achète, ne gardant pas lui même de copie. Laissant les clients faire ce qu’iels veullent de la copie. La supprimer, la distribuer…

Un autre artiste a lui créé un jeu, disponible uniquement sur dix CD, caché dans des lieux secret, atendant d’être toruvé ou détruit par le temps…

Web

Cette démarche de l’éphemaire lui fait énormément penser à celle du blog lowtechmagazine, qui parle et réflechit autour de la LowTech.

«C’est à dire des moyen de réduire notre consomation d’énergie avec la technologie, ou de comment favoriser le recyclage des appareils informatiques dans nos pratique et nos quotidiens»

Ils ont expérimenter l’adaptation de leur site dans une verssion la plus économique possible et dont documenté le tout dans un article. Parmit la multitude de partit prix, il y a celui de la remise question de la disponibilité du site.

La plupart des hébergeurs qui annoncent utiliser l’énergie solaire dans leurs datacenter utilisent aussi le réseau électrique urbain quand leurs bateries sont vides. Lowtechmagazine à prit la décision de ne compter uniquement sur l’énergie solaire, rendant donc le site innacecible quand il n’y a plus d’énergie, jusqu’au retour d’une météo plus clémente.

Cette démarche recréer un lien matériel, une phisicalité à un internet qu’on persoit bien trop souvent comme seulement virtuel.

Conclusion

Ces questions et bien d’autres vont être crutiales dans les années à venir. Dans un context ou la question de l’énergie et des ressources sera probablement contral.

Vidéos

Les jeux vidéo vont-ils disparaître ?