Images online are in low-resolution

URL of experiment: project [PsychoPy] (the issue arises at the 3 slide, where the screenshot of a webpage is displayed, nevermind the errors after that)
Code: Alena Kim / page-target-detection · GitLab
PsychoJS 2023.1.0, PsychoPy 2023.1.0, tested on multiple browsers (Safari, Opera, Chrome, Yandex Browser)

Hello! I’m trying to set up an online experiment. The problem is, the images are getting “blurred” when run online - compared to what I see on my screen locally. The screenshot attached is how it looks like when I run it using PsychoPy locally, the screen recording is how it looks online using Pavlovia.

On the screen recording there is also a process of zooming in/out during the experiment - on 50% scale it looks exactly like I see it locally. I therefore assume that it is something that is related to downscaling of the images (i.e. it is full-scale locally, but when uploaded online it’s downscaled to match online resolution).

The questions are:

  1. Is there any way I can make the images seem in high-quality on any device?
  2. I use the same laptop for testing online and offline, I’ve tried both with and without the fullscr parameter set to be True. However in the browser the resolution is lower than the one I get in the desktop app - can I make it match the monitor resolution rather than the browser?

p.s. the image i’ve uploaded got downscaled to 1920x1200, its original size is 3584x2240. same for scaling in the video, but you could still see the issue when upscaled to 200% or you could test it manually in your browser

What units are you using for your image? if you use height that should ensure the aspect ratio etc is always maintained and scaled - the blurring could be due to running on different devices with different resolutions perhaps?

Hi, Becca!
The units are height, and the blurring is indeed due to running on different devices with different resolutions, however, the questions stands - is there any way I can make it seem unblurred without having a set of pictures for every resolution?

I did add several sets of pictures for different resolutions and switch them based on the monitor size. However, it now takes forever to load all of the resources and most of them are never used in an experiment run. Is there any way I can only load a subset of resources for every experiment run? I’ve seen a documentation page on Resource Manager, but it seems like it can’t take a variable inside?

Thank you for your response!