# AVIF images as equirectangular background

**URL:** <https://discourse.threejs.org/t/avif-images-as-equirectangular-background/74351>\
**Category:** Discussion\
**Tags:** jpg, exr, avif, hdr\
**Created:** [November 24, 2024, 6:20am UTC](https://discourse.threejs.org/t/avif-images-as-equirectangular-background/74351 "2024-11-24T06:20:29Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [November 24, 2024, 6:20am UTC](https://discourse.threejs.org/t/avif-images-as-equirectangular-background/74351/1 "2024-11-24T06:20:29Z")

</div>

For those who might be interested then definitely try using AVIF files as equirectangular background.

It is rather small file size and the effect appears to be rather good. Some HD image files might look as good as originals.

You could consider converting your EXR or HDR files to separate files by using free `@monogrid gainmap-js` online [encoder](https://gainmap-creator.monogrid.com/) to obtain JPEG file with gainmap, which you could then convert to AVIF by using either [ezgif](https://ezgif.com/) or even try my [Image to 3D Mesh](https://githubdragonfly.github.io/viewers/templates/IMG2MESH.html) viewer / converter (whichever gives you a better result - just keep in mind that encoder in my viewer is limited to max 4k resolution).

As an initial test, maybe try using ezgif to convert [spruit\_sunrise\_4k.hdr.jpg](https://github.com/mrdoob/three.js/blob/34ba5129de62d538c17616f50cd00e36fdb98398/examples/textures/equirectangular/spruit_sunrise_4k.hdr.jpg) file from three.js repository - the AVIF should be approximately 1/4 of the original size.

`THREE.TextureLoader` should be able to load AVIF files but also try any other HDRJPGLoader like the one from `@monogrid`.

Cannot really suggest any memory or GPU wise comparison.