Conférence #280 - Image Responsives : Nouveaux traitement d'images par nœuds et graphs

Graphisme 50 mn fr_FR Professionnel Confirmé

Introduction de la conférence

Les images vont s'adapter à tous nos écrans, du mobile à la UltraHD... Mais comment va-t-on faire pour les créer adaptables à toutes ces situations ? Une solution : le traitement d'image par nœuds et graphs.

À propos du conférencier

Biographie

Je suis Camille Bissuel, un illustrateur et formateur indépendant basé dans les Hautes-Alpes. J'utilise des logiciels libres pour mes créations (Krita, Blender, Inkscape, Gimp, et tant d'autres…), et je participe de loin à ces projets de logiciels depuis plusieurs années. Je travaille depuis chez moi, avec un ordinateur sous Linux et une tablette graphique.

Description de la conférence

Aujourd'hui, la plupart des images sont vues sur des écrans... qui ont toute sortes de tailles, de définitions, de ratios et même de formes : comme le design se fluidifie via le web, les images commencent à apprendre à s'adapter, à "s'élastifier", à se recadrer, à se déformer...

Le Responsive Images Community Group (des membres de Google, d'Opera et de Mozilla ) vient de publier (le 11 avril 2014) un brouillon de spécification pour l'élément HTML . Cet élément, en bonne voie d'adoption, nous permettra d'afficher la bonne image pour le bon écran sur le web.
Cela veut aussi dire qu'au lieu d'une image, il faudra en préparer plusieurs pour les yeux de nos visiteurs interconnectés. Mais... nous n'avons pas vraiment les outils pour produire ces images !

Une première solution serait d'utiliser des images vectorielles (géométriques), qui n'ont pas de résolution et s'adapte à toutes les tailles. C'est très bien pour des icônes par exemple. Mais pour les photos et les illustrations (les images matricielles) ?
Ok, on pourrait patiemment utiliser notre Gimp ou Photoshop favori pour recadrer chaque image pour chaque dimension dont nous avons besoin... et multiplier ça par les 30 images de notre site web, pour y passer 2 jours... !
Sinon, on apprends un peu de programmation, on se fait un joli script, et on traite toutes nos images d'un coup ... mais en aveugle ! Ainsi on se retrouve avec des portraits cadrés à coté du visage, ou des paysages entiers de 280 pixels de large.

En fait il y a une autre solution, qui vient du monde de la vidéo : utiliser un logiciel de traitement d'image "par nœuds", ou "par nœuds et graphs" ou "basé sur le flux" (flow-based programming). Des logiciels libres basés sur ce concept commencent à apparaître (Blender, ButtleOFX, imgflo).
Il y a beaucoup d'autres avantages aux systèmes de nœuds :

- c'est très souple (plusieurs entrées/sorties, mis à jour en temps réel)

- édition non destructive

- l'historique des opérations est sous nos yeux (plus besoin d'annuler/refaire)

- on définit le flux de travail une seule fois, et on le réutilise à l'infini

- on peut s'en servir pour une seule image pour en traiter des milliers à la fois

- pas besoin de savoir programmer ou scripter
mais :

- ce n'est pas très habituel, il faut un peu de temps pour apprendre à s'en servir

Pour expliquer la mécanique, j'utiliserais l'exemple de mon cas concert : un site web "responsive" d'illustrations et de fonds d'écran (nylnook.com).

Programme

  • mercredi 9/7 à 16:30 | A.6.01 - 43.632729;3.864030

Documents liés


amarok apache archlinux arduino bitcoin blender creativecommons cernohl debian chamilo drupal elphel eZ Publish fedoraproject firefox gentoo gimp gnome gnu freebsd freeguppy gnuhealth haiku imagemagick inkscape jabber jenkins joomla kde knoppix lea-linux libreoffice linux mageia mandriva moodle mozilla openarena openbsd Open Street Map opensuse perl php pidgin plone postgresql python ruby rudder scribus spip thunderbird tomcat tryton typo3 ubuntu vlc wikipedia wordpress xfce xonotic