Blurry / low resolution online

[Jamie]

Hi all,

For some reason, my online experiment is running at a much lower resolution than it is locally (see screenshots - if you expand the screenshots, then keep clicking back and forth, you should spot the drop in quality if you look at the same bit of text. You’ll also notice some of the button outlines disappear). I’m not sure why this is…has anyone else encountered this?

I use a lot of .pngs throughout my experiment (e.g. for buttons, backgrounds, stimuli etc.). They look great locally, so I’m sure the .pngs files themselves are fine. I’ve tried .jpgs instead, and also increasing the texture resolution in my PsychoPy Image components, but neither seem to help things look better online. I’ve checked the image files on Gitlab and they seem to be the same file size as they are locally, so it doesn’t look like this is the result of any compression via syncing.

This isn’t much of a problem on my instructions pages; a new user may not even notice that the text and buttons are a bit less sharp, and I could probably even fix that if I used text stim + shape stim within PsychoPy to make my instructions pages (rather than pre-made image files). However, the drop in quality is really important for the images I display throughout the trials of my experiment. I’ll be using the same images both online and in the lab, and ideally I’d like all participants to see the images at the same (high) resolution.

Any help appreciated!

Local:

Online:

[jon]

Interesting. My guess is that this is something to do with glitches in the rendering pipeline in Pixi.js which we use to draw everything. Probably it needs @apitiot to be involved who knows how the pixi code works.

Could you give us:

• a bit more info about the system where you see this (especially if it’s a hgih-res system like a retina display)
• a URL to the study for us to investigate it?

cheers,
jon

[Jamie]

Hi Jon,

I am indeed using a retina display on a Macbook Pro. Here’s some specs:

You can access the experiment here, just type “A” into the Order field:
https://run.pavlovia.org/j.adams/photonorms-2/html/

Note: It hadn’t occurred to me that my laptop screen might be the issue. Perhaps my experiment looks good online on non-retina screens. I’ll test this next time I get access to another screen and post an update.

[jon]

OK, so my guess about the blurry aspect is just that pixi.js doesn’t know how (or choose) to use retina displays. I think that isn’t a priority to support.

Why the line is mis-drawn on the button is a puzzle. I’ve seen this recently in the OpenGL (Python) version where I think it’s a slightly broken interpolation setting, but I don’t think Pixi should be using the same method to render

[Jamie]

Ok, no worries - thanks for the explanation!

[sijiazhao]

Hi, I understand that this is not a priority to support but actually it’s quite easy to solve.

In the core code: https://github.com/psychopy/psychojs/blob/master/js/core/Window.js
add “resolution: window.devicePixelRatio,” after line 395.

For those that want to fix it themselves, download and use a local copy of “core-2020.1.js”. Modify _setupPixi() like this (add the line “resolution: window.devicePixelRatio,” and don’t forget a comma after the previous line):

_setupPixi() {
    this._size[0] = window.innerWidth;
    this._size[1] = window.innerHeight;
    this._renderer = PIXI.autoDetectRenderer(this._size[0], this._size[1], {
      backgroundColor: this.color.int,
      resolution: window.devicePixelRatio,
    });
    this._renderer.view.style.transform = 'translatez(0)';
    this._renderer.view.style.position = 'absolute';
    document.body.appendChild(this._renderer.view);
    document.body.style.backgroundColor = this._color.hex;
    this._rootContainer = new PIXI.Container();
    this._rootContainer.interactive = true;
    Window._resizePixiRenderer(this);
    this.psychoJS.eventManager.addMouseListeners(this._renderer);
    this._resizeCallback = (e) => {
      Window._resizePixiRenderer(this, e);
      this._fullRefresh();
    };
    window.addEventListener('resize', this._resizeCallback);
    window.addEventListener('orientationchange', this._resizeCallback);
  }

I found this solution by reading Pixi.js documentation. It looks simple and obvious now, but took me an evening to figure out. Hope it’s helpful.

[wakecarter]

Is this something that can be added in a code component in Builder?

[dvbridges]

@wakecarter, no its part of the PsychoJS lib, so you need to change the PsychoJS lib and upload with your task (at least, I think so). Just looking into an explaination for users now.

[apitiot]

Well spotted!
I have just applied the fix and have back-ported it all the way to 3.2.0.
Thank you very much @sijiazhao!
@wakecarter: you do not need to do anything.

Alain

[Kassie]

I am currently facing the same problem. All images I use are in high resolution on my own device but appear somewhat blurry online (I use a scaling routine in the beginning and text appears sharp). However, I seem to be unable to solve this problem by myself, as the repository mentioned above is not available anymore. Does anyone know another solution for this problem?

[jameslc]

Hi,

The problem seems to remain - text, shapes, and images are of lower quality when experiments are run online. I am running Psychopy v2022.2.5.
Is there any fix for this?

Thanks,
James

[jameslc]

Any fixes for this yet?
If there is any easy fix it would be great to hear it! It sucks that all my experiments and tasks look incredibly grainy online when they look so crisp locally.

[gleisner-robot]

Has it still not have been solved? This is the only fix I was able to find and it doesn’t work (from all I can see here https://github.com/psychopy/psychojs/blob/main/src/core/Window.js, “resolution: window.devicePixelRatio” is there already and yet my text online in Pavlovia appears very blurry). I tried both Psychopy 2022.2.5 and 2023.2.3–no difference, everything still appears in very poor resolution online. I am running it on Windows 10. Photos from Pavlovia vs local PsychoPy for comparison.

I don’t know what to do, doing it like that is very tiresome for participants

[Leaeva]

Hi, I am curious, were you able to fix the problem? I am currently facing the same issue, and it seems to be even worse when the experiment is run on mobile phones…

[wakecarter]

What font are you using?

A text component or textbox?

This is what I get with Arial and a text component above a textbox using 2024.1.0.

Locally

Online

The colour is [-.8,-.8,-.8] on a [.8,.8,.8] background

It’s interesting to note the offline text size being narrower. What do you think about the relative sharpness?

[Leaeva]

Hi,
thanks for your reply! Regarding text, I am using textbox now and it works a lot better (in case someone reads this who wants to display Chinese characters: the font Noto Sans SC worked well with the textbox component in the PsychoPy builder, version 2023.2.3) However, I haven’t been able to find a solution for screenshots (png) showing up kind of blurry in the online version. I used the image component in the builder. Increasing the resolution did not work. Maybe this is caused by different screen sizes in the local version vs. online version? I saw that a fix for this has been introduced back in 2020, but the issue somehow seems to remain.

[wakecarter]

@Leaeva

I haven’t been able to find a solution for screenshots (png) showing up kind of blurry in the online version.

Please could you show a side by side comparison of this and upload the source png?

[Leaeva]

left: online version, right: local version

this is the source png

[wakecarter]

What size and units are you using?

Here is my test online at 512x512 pixels (top) and at .5x.5 height units (bottom)

[Leaeva]

I initially used the default setting in the image component (from exp settings). I tried your version with pixels (left) and height units (right). Pixels seem to work best, however then there will be the issue of having diverse user devices. Is there a possibility to keep image size constant online while using pixels as unit?