# HDR file and webpack build

**URL:** <https://discourse.threejs.org/t/hdr-file-and-webpack-build/43963>\
**Category:** Questions\
**Tags:** webpack, hdr\
**Created:** [October 24, 2022, 9:35pm UTC](https://discourse.threejs.org/t/hdr-file-and-webpack-build/43963 "2022-10-24T21:35:12Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tian\_Breznik](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tian_breznik/32/27533_2.png) [@Tian\_Breznik](https://discourse.threejs.org/u/Tian_Breznik)\
**Post date:** [October 24, 2022, 9:35pm UTC](https://discourse.threejs.org/t/hdr-file-and-webpack-build/43963/1 "2022-10-24T21:35:12Z")

</div>

Hi!

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:

 ![Screenshot 2022-10-24 at 23.26.57](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/b/2b517f4bf24e863ae52e5675a65327fa9e8caecb.png)

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

 ![Screenshot 2022-10-24 at 22.51.54](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/5/b5a80fd6151e5b2259893b8503929f36cbf99c2c.png)  
 ![Screenshot 2022-10-24 at 23.28.55](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/5/658c6e9a68e927c198c6f59c968e3bc82b52bd27.png)

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:

 ![Screenshot 2022-10-24 at 23.30.47](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/0/b00910a01baaa8b4bd9808ac6576bbb4b7573d73.png)

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!

Tian

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [October 25, 2022, 1:54am UTC](https://discourse.threejs.org/t/hdr-file-and-webpack-build/43963/2 "2022-10-25T01:54:55Z")

</div>

I don’t think you want to use `url-loader` without a [“limit” option](https://v4.webpack.js.org/loaders/url-loader/#limit) 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.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [October 25, 2022, 10:11am UTC](https://discourse.threejs.org/t/hdr-file-and-webpack-build/43963/3 "2022-10-25T10:11:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Tian\_Breznik](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tian_breznik/32/27533_2.png) [@Tian\_Breznik](https://discourse.threejs.org/u/Tian_Breznik)\
**Post date:** [October 25, 2022, 11:05am UTC](https://discourse.threejs.org/t/hdr-file-and-webpack-build/43963/4 "2022-10-25T11:05:42Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Tian\_Breznik](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tian_breznik/32/27533_2.png) [@Tian\_Breznik](https://discourse.threejs.org/u/Tian_Breznik)\
**Post date:** [October 25, 2022, 3:21pm UTC](https://discourse.threejs.org/t/hdr-file-and-webpack-build/43963/5 "2022-10-25T15:21:13Z")

</div>

do you know any good compression software specifically for images?

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [October 25, 2022, 6:19pm UTC](https://discourse.threejs.org/t/hdr-file-and-webpack-build/43963/6 "2022-10-25T18:19:23Z")

</div>

.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:

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

```

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

---

<div class="post-metadata">

**Author:** ![Tian\_Breznik](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tian_breznik/32/27533_2.png) [@Tian\_Breznik](https://discourse.threejs.org/u/Tian_Breznik)\
**Post date:** [October 26, 2022, 1:40pm UTC](https://discourse.threejs.org/t/hdr-file-and-webpack-build/43963/7 "2022-10-26T13:40:06Z")

</div>

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