# Optimising loadImage, fitting image ratio

**URL:** <https://discourse.processing.org/t/optimising-loadimage-fitting-image-ratio/17200>\
**Category:** Coding Questions\
**Created:** [January 20, 2020, 12:58pm UTC](https://discourse.processing.org/t/optimising-loadimage-fitting-image-ratio/17200 "2020-01-20T12:58:02Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![nikodemd](https://avatars.discourse-cdn.com/v4/letter/n/e19adc/32.png) [@nikodemd](https://discourse.processing.org/u/nikodemd)\
**Post date:** [January 20, 2020, 12:58pm UTC](https://discourse.processing.org/t/optimising-loadimage-fitting-image-ratio/17200/1 "2020-01-20T12:58:02Z")

</div>

Hi guys, new here!

I am making this app where I load 2 images and 2 sliders, and each slider controls the level that the image blend with each other. Basically: image DAYLIGHT is a picture of a room only with light from the window, and picture NIGHTLIGHT is picture of the room taken at night, only with 1 lamp on. When I move the DL slider it becomes more dark (’‘the night’’), and when I move NL slider the lamp ‘‘turns on’’ (the image blends in gradually).

It seems to work OK, however it is super slow. Does anybody have an idea how to make it faster/performing better?

Second question - I want make images fit the screen with a saved ratio - Does anyone have an idea how to make it fit different sizes (depending if you open it on laptop or phone), while maintaining same ratio??

Looking forward to hearing from you!

```auto
let DAYLIGHT;
let NIGHTLIGHT;

function preload() {
  DAYLIGHT = loadImage('DL1.JPG');
  NIGHTLIGHT = loadImage('NL1.JPG');
}
function setup() {
  createCanvas(776, 500);
  DLslider = createSlider(0, 255, 100);
  DLslider.position(10, 400);
  DLslider.style('width', '200px');
  NLslider = createSlider(0, 255, 100);
  NLslider.position(10, 430);
  NLslider.style('width', '200px');

}

function draw() {
  background(0);
      blendMode(SCREEN);
const DLvalue = DLslider.value();
const NLvalue = NLslider.value();
  tint(255, 255-DLvalue);
  image(DAYLIGHT,0,0,776, 500);
  tint(255, NLvalue);
  image(NIGHTLIGHT,0,0,776, 500);
  blendMode(BLEND);

} 

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 20, 2020, 1:27pm UTC](https://discourse.processing.org/t/optimising-loadimage-fitting-image-ratio/17200/2 "2020-01-20T13:27:10Z")

</div>

**Speed**

image() with 5 parameters is much slower than with 3 parameters. It’s doing a _resize_ every single time…

So stick with 3 parameters and use `resize()` command in `setup()` instead. Only once. Should speed things up.

**Different displays question**

With resize() you can also do a aspect ratio neutral resize by leaving one parameter 0, see reference.

So for your display question, use `displayWidth` and `displayHeight` and then do a `resize()` with one parameter 0.

(It’s tricky when the image is portrait or landscape (or the screen is) - then you have to use „if“ and act accordingly 😉 )

Chrisir

---

<div class="post-metadata">

**Author:** ![nikodemd](https://avatars.discourse-cdn.com/v4/letter/n/e19adc/32.png) [@nikodemd](https://discourse.processing.org/u/nikodemd)\
**Post date:** [January 20, 2020, 2:00pm UTC](https://discourse.processing.org/t/optimising-loadimage-fitting-image-ratio/17200/3 "2020-01-20T14:00:29Z")

</div>

Amazing - it sped up the app dramatically - thanks man!!!