Resolved - How to use webp image with Aurelia and Webpack

Help Requests
#1

I have a background image in jpg format that I’ve been using via css for a background image. I’ve converted the image to webp format. I now want to use that image for the background. I changed my css to point to the new image.

However, webpack crashes when trying to build my app. It would appear it doesn’t know what to do with the webp image reference. And I don’t know what to do with Webpack to tell it how to handle the image.

Has anyone done this? Can someone help me with the code to tell Webpack what to do with webp images?

1 Like
#2

Why don’t you convert it to a data URL and save it as text in your css or as a constant in your code?

1 Like
#3

To be honest, I’m not sure I follow what you’re saying. I have this in my css

.signin {
   background-image: url("../../static/justice.webp");
   ...
}

I’m not sure I understand what you mean by “save it as text in your css or as a constant in your code”.

1 Like
#4

Check here for more info:

3 Likes
#5

Awesome! Thanks. That worked great!

1 Like
#6

Just adding this for anyone else who may run across this thread. The suggested solution here does take away some of the benefit of using webp. The idea of webp images is that they save space over jpeg. However, converting webp to base64 inflates the image some. In my case the original jpeg image as 1,200K. The webp version was 560K and the base64 text was 780K. Still a savings over jpeg but not as much as if I could’ve just loaded the webp image directly.

2 Likes
#8

Hello @roddharris

I am not sure how Webpack would handle packing your webp images. I assume that Webpack can be configured with various plugins that either pack such images into its resulting code chunks (thus probably also converting them to base64) or keeping them as separate images.

An embedded base64-encoded image in a data URI is somewhat larger indeed, but when the browser loads your webpage, it does not have to perform an additional HTTP request for downloading the separate image. So it may be (a lot) faster anyway.

In the end, I guess it depends on what you actually want. Do you want the image to be smaller due to space limitations on your clients? Or do you want it to be faster (and simply assume that smaller is also always faster)?

#9

Webpack can be configured to treat webp assets similar to PNG or any other image. Depending on file size url-loader can either replace the url with base64 string or copy the asset along with other bundles. Just add webp extension next to other image extensions in a cli generated webpack.config

1 Like