# P5.js WEBGL how to deal with big image files?

**URL:** <https://discourse.processing.org/t/p5-js-webgl-how-to-deal-with-big-image-files/14972>\
**Category:** Coding Questions\
**Created:** [October 27, 2019, 6:36pm UTC](https://discourse.processing.org/t/p5-js-webgl-how-to-deal-with-big-image-files/14972 "2019-10-27T18:36:17Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![hilkeros](https://avatars.discourse-cdn.com/v4/letter/h/f17d59/32.png) [@hilkeros](https://discourse.processing.org/u/hilkeros)\
**Post date:** [October 27, 2019, 6:36pm UTC](https://discourse.processing.org/t/p5-js-webgl-how-to-deal-with-big-image-files/14972/1 "2019-10-27T18:36:17Z")

</div>

_disclaimer_: the links to my work in progress contain nudity. I consider the images as art, but I want to inform you about that before you click.

I am working on an audiovisual project. First, I was doing everything with a normal canvas and with `loadpixels()`. You can see a prototype over here:[http://hilk.eu/packungsbeilage/paradoxes6/](http://hilk.eu/packungsbeilage/paradoxes6/).

The visuals are based on a huge image (1920x20,000px) of which only a small portion is shown. Although the image is huge, this is working quite well if it is loaded in the `preload()` block.  
The project is quite heavy on CPU, but it is doing quite ok, if you consider that I also recalculate every pixel on a full screen canvas to do some color effects.

Now, I had the idea to optimise the concept with a WebGL Shader, which would it also make easier to ad some distortions, etc.

However, the website crashes with an `WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost` error when I put this big image file in the `preload` block (even without using the image in the processing afterwards), although this was not a problem at all with a normal canvas.

[Here](http://hilk.eu/packungsbeilage/shader3/) is an example of what I try to do with the shader, but with a much smaller file.

Any ideas which approach I could take?

---

<div class="post-metadata">

**Author:** ![hilkeros](https://avatars.discourse-cdn.com/v4/letter/h/f17d59/32.png) [@hilkeros](https://discourse.processing.org/u/hilkeros)\
**Post date:** [November 3, 2019, 1:36pm UTC](https://discourse.processing.org/t/p5-js-webgl-how-to-deal-with-big-image-files/14972/2 "2019-11-03T13:36:15Z")

</div>

Here is an example in the p5 editor:  
[https://editor.p5js.org/hilkeros/sketches/XRi\_YeRcq](https://editor.p5js.org/hilkeros/sketches/XRi_YeRcq)