I’m giving a conference, which will tell you more on how I’m creating this website on the picture side, at Libre Software Meeting in Montpellier, the 9th of July at 4.30pm, in the building n\u00b06 of the second Montpellier’s University.<\/p>\n

It will probably be in french, but I may speak english too. To know more, you’re welcome to read the conference description at LSM website<\/a>.<\/p>\n

https:\/\/nylnook.art\/\/fr\/wp-content\/uploads\/sites\/2\/image-responsives-nouveaux-traiteme_low.mp4<\/a><\/video><\/div>\n

You can alos view the video on the LSM website<\/a> (in french).<\/p>\n

A pitch<\/em> :
\nToday, most images are seen on screen. Every monitor has a unique size, definition, ratio and even shape : As design get fluid with web, pictures start to learn to resize, to respond, to crop, to deform…<\/p>\n

The Responsive Images Community Group (members of Google, Opera and Mozilla) just published (11th of April 2014), a specification draft for the “picture” HTML element. This element is promise to adoption, and will allow us to display the right picture to the right screen on the web.
\nThis mean we will have to serve not only one image but several of them, for ours interconnected visitors. But, wait… we do not really have the right tools to produce theses pictures !<\/p>\n

A first solution would be to use vector images (geometrical), which do not have a resolution, and fit all sizes. That\u2019s a really good solution for icons for example. But for photos and illustrations (bitmap image) ?
\nOk, we may be patient, and use our favourite Gimp or Photoshop program to crop each image for each dimension we need… and multiply that with the 30 pictures on our website, to spend 2 days on it… !
\nOtherwise, we learn some programming, we make a nice script, and batch process all our picture once… but blindly ! So, we obtain portraits crop aside of the face, or full landscapes that fit in 280 pixels.<\/p>\n

In fact, there is another solution, coming from the video world : use a “node based” or a “node and graph”, or a “flow-based programming” image processing tool. Some free and open source software based on this concept start to appear nowadays (Blender, ButtleOFX, imgflo).
\nThere are many interests with node systems :
\n– Very flexible : Multiple inputs, operations and\/or outputs, updated live
\n– Editing through history of operation (forget undo\/redo)
\n– Non destructive editing
\n– Set up your workflow once, reuse to infinity
\n– No need to know how to write a script
\n– Good for a single image editing as for many (batch processing)
\nBut :
\n– Not so usual, need some initial learning<\/p>\n

To explain the mechanics, I will use my concrete case : a responsive website with illustrations and wallpapers (nylnook.com)<\/p>\n","protected":false},"excerpt":{"rendered":"

I’m giving a conference, which will tell you more on how I’m creating this website on the picture side, at Libre Software Meeting in Montpellier, the 9th of July at 4.30pm, in the building n\u00b06 of the second Montpellier’s University. It will probably be in french, but I may speak english too. To know more, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"godot_game_meta":[],"pulp_press_meta":[],"pulp_comic_meta":[],"inline_featured_image":false,"nylnook_wp_meta":[null],"footnotes":""},"categories":[1],"tags":[31,50,52,55],"class_list":["post-68","post","type-post","status-publish","format-standard","hentry","category-blog","tag-geek","tag-teaching","tag-tutorials","tag-video"],"_links":{"self":[{"href":"https:\/\/nylnook.art\/en\/wp-json\/wp\/v2\/posts\/68","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nylnook.art\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nylnook.art\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nylnook.art\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nylnook.art\/en\/wp-json\/wp\/v2\/comments?post=68"}],"version-history":[{"count":3,"href":"https:\/\/nylnook.art\/en\/wp-json\/wp\/v2\/posts\/68\/revisions"}],"predecessor-version":[{"id":268,"href":"https:\/\/nylnook.art\/en\/wp-json\/wp\/v2\/posts\/68\/revisions\/268"}],"wp:attachment":[{"href":"https:\/\/nylnook.art\/en\/wp-json\/wp\/v2\/media?parent=68"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nylnook.art\/en\/wp-json\/wp\/v2\/categories?post=68"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nylnook.art\/en\/wp-json\/wp\/v2\/tags?post=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}