HDR file and webpack build


I am working on working a website, where the memories of my previous flat and flatmates can live on in the digital. This website includes a beautiful .hdr image of a landscape sitting in the “background”.

I am using three.js with webpack and everything works just fine on a local development server, but when I build the application with webpack I get the following error:

this happens when I load the HDR file normally like bellow:

following some threads on this, I tried to import the HDR file as you can see with the commented line. I added this to my webpack.config:

which simply ensures the use of the url-loader package to open the HDR file. This way, on the local server the HDR doesn’t seem to load at all as the website seems to buffer and becomes unresponsive. Trying to build the app, this one line (the HDR import) breaks the entire build procedure.

The HDR is 150MB big.

I have spent two days on this and searched through every discussion 5 pages deep into google searches. Does anyone know what might be happening or what is the best workaround?

Thank you!


I don’t think you want to use url-loader without a “limit” option for files this big. Converting them to Base64 URIs will increase the size even more. What’s the resolution of this image? You might want to try testing on a smaller image first.

if you do not import you don’t need loaders and the file must be inside /public. if it isn’t you can’t build. a 150mb file just for an envmap is way too much btw. importing that with url-loader will make it worse like don said, base64 will add ~30% to that?

  1. make sure the file is in /public
  2. compress it, even at 1-2mb envmaps can still look good

the file is currently in /static, as you can see. I don’t have a /public folder, only /src. On build webpack makes a /dist folder and it moves the sky.hdr file from static into that one.

I will try compressing it!

do you know any good compression software specifically for images?

.hdr is not really a compression-friendly format. I would try converting to .exr, using Imagemagick, then loading with THREE.EXRLoader. Probably something like this would do it:

convert input.hdr -alpha off -compress Piz output.exr

I would also check that the image resolution is no larger than 4096x4096.


just converting it to .exr and resizing it worked! thank you soooooo much!

1 Like