| Reference | Downloads | Github

Blurry / low resolution online

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!



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?


1 Like

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:

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.

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

Ok, no worries - thanks for the explanation!