Using <picture> to its full extent, .webp and range of .jpg sizes

[BorisKourt]

I have been using Optimus with Stasis and am now trying to implement this:

<picture>
    <source
        srcset="opera-200.webp 200w,
                opera-400.webp 400w,
                opera-800.webp 800w,
                opera-1200.webp 1200w,
                opera-1600.webp 1600w,
                opera-2000.webp 2000w"
        type="image/webp">
    <img
        src="opera-fallback.jpg" alt="The Oslo Opera House"
        sizes="(min-width: 640px) 60vw, 100vw"
        srcset="opera-200.jpg 200w,
                opera-400.jpg 400w,
                opera-800.jpg 800w,
                opera-1200.jpg 1200w,
                opera-1600.jpg 1600w,
                opera-2000.jpg 2000w">
</picture>

(As per the second last listing here: http://dev.opera.com/articles/responsive-images/ )

Here is my initial code, not yet tested.

(defn picture
    "Creates a picture element with hiccup based on
     the responsive image practices outline here:
     http://dev.opera.com/articles/responsive-images/" 
    [request 
     image
     alt 
     & {:keys   [breakpoint sizes] 
        :or     {breakpoint 640 
                 sizes      [200,400,800,1200,1600,2000]}}]
      [:picture
        [:source 
            {:srcset (str "\"" 
                             (map #(link/file-path 
                                    request 
                                    (str image "-" % ".webp")) 
                                  sizes)
                             "\"")
             :type   "image/webp"}]
        [:img 
            {:src    (link/file-path
                        request
                        (str image "-fallback.jpg"))
             :alt    alt
             :sizes  (str "\"(min-width:" breakpoint ") 60vw, 100vw\"")
             :srcset (str "\"" 
                          (map #(link/file-path 
                                 request 
                                 (str image "-" % ".jpg")) 
                               sizes)
                          "\"")}]])

---

This should generate something close to the above. But my main question is: Is there a way to hook in a .webp converter into transform-images and what should I pass into transform-images in order to have the naming convention and range of sizes above?

If including .webp is nontrivial at this point, then just the last part of the question applies.

Thank you for making Optimus and Stasis, it has made making static sites fun again!

[magnars]

Excellent idea!

I've pitched the idea of WebP support for collage, the image transformation library that this leans on. You can see the discussion here: https://github.com/karls/collage/issues/1

Basically, it boils down to distribution of Google's webp binaries. If you bundle them yourself, then writing some asset transformation middleware for Optimus should be definitely doable.

I'll be happy to help out with pointers if this is something you would like to tackle. :-)

[BorisKourt]

I am relatively new to Clojure but would like to try my hand at creating this. Any pointers that you can provide will be invaluable for me.

How should I get started with this? So far I have been using the webp utils provided by google manually from the terminal. Should I look at the SASS implementation for Optimus?

And thanks for your quick reply!

[magnars]

A few pointers:

• yes, I figure a webp middleware would look like a mix of optimus-img-transform and optimus-sass. It should transform images to webp, cache them on disk (like img-transform), and add itself as an asset with another name, pointing back to the original (like sass).
• from what I can tell, collage now does support webp, but you have to provide the binaries. Maybe check with @karls about that?

Best of luck :-) Feel free to ask anything else.