This was originally posted on the company blog here
In this blog post, we’ll cover how to convert images into WebP format and create blur hash images to store in your database to show as placeholders. WebP is used to create images that only need to be used in web and mobile applications.
Resizing to Fit WebP
First, there’s an important thing to note when using WebP. There is a maximum width and height of 16383 (according to Google, the creators of WebP — documented here).
If you don’t implement resizing you’ll most likely see this error message from Sharp:
Processed image is too large for the WebP format
So we need to implement code to resize this if necessary before converting:
This code just does a quick check to see if it needs resizing and returns the resized sharp instance.
Notice that width and height are optional on the metadata. I haven’t seen these values returned, but in the event the image is…
