Optimization of Rails Web Site using webp
We all know google loves webp images and even gives them a higher ranking, but how do you upload webp images when all you have uploaded are jpg and png’s, one thing is to convert all the images that you had in your buckets, move to webp for the supported browsers.
But how do you do that?
In my case I was using paperclip gem for uploading files to s3, and had png’s and jpeg’s in my bucket. The requirement was to have webp for each image too, show webp in the browsers supporting webp and show jpg’s or png’s in non supporting browsers.
Now there are two things to keep in mind
- How do you convert images from one format to another?
- How do you ensure web browsers pick webp f they support it and pick different format if not supported.
How do you convert images from one format to another?
If you have worked with paperclip before, you can recognize the below given file
So nothing different much in the post class except we have a
:processors => [:webp]
option, which basically tells it to pick up the defined processor, now we want that to apply the processing to happen only in case of images where we want webp.
only_process: [:webp]
We also want to store the original files, so nothing in styles there
original: []
Now coming to the webp processor, it is getting initialized using super, so which in turns is calling this:
Read the comments in the procecssor.rb to understand what we did in our custom webp processor.
How do you ensure web browsers pick webp f they support it and pick different format if not supported.
This code basically tells the browser to pick the webp format(first source element), if the browser supports it, if not just go ahead and pick the image from the second source element.
So, that’s about it, by this process you can definitely convert image to any format, you can just change this line:
“convert #{fromfile} -quality 50 #{tofile(temp_file)}” in webp class.
Thanks.
If you are a Ruby Developer, do register on https://jobemon.com for getting access to awesome jobs
