OSWeb: Display a picture that has a transparent background

Comments

• Fab

  September 2022

  Hi @Pieter_,

  Did you mean that the display's background takes over the picture's background?

  If you're using a picture format that includes background transparency (e.g., png), you should be able to display a png over another picture and have the top picture's background let the bottom picture through, both in OS and in the browser (including as a JATOS experiment).

  I've just tried it and got it to work in OS, OSWeb and online (JATOS).

  I'm attaching my example:

  Overimposed_picture.osexp

  Maybe you're using a file format that allows transparency in OS but that the browser can't handle well, though I'm not sure why one would work and not the other. Try my example on your computer to see if it works.

  Hope this helps!

  Fabrice (sporadically connected while having some days off).

  
• Pieter_

  September 2022

  Thanks, Fabrice for extending my knowledge of picture formats.

  I did use a gif format for the picture with the transparent background (the default for this in e.g. IrfanView. This works offline in OpenSesame (the picture correctly takes over the background color of the underlying picture or sketchpad) but not online with OSWeb, in Firefox. There, the png format does work.
• Fab

  September 2022

  Hi @Pieter_,

  Glad I was helpful Many thanks for the coffees, that was very nice of you!

  From what I understand, PNG is superior to GIF in terms of quality and handling (for example, GIF is limited to 256 colors while PBG supports thousands). Nowadays, all browsers handle PNG well (see this list), hence I'd recommend always using PNG.

  One thing to note is that because PNG is a lossless format, PNG files usually take up more space than JPEGs. Hence, it can make your task a little longer to load up if you're using many pictures in the pool. If this is an issue, and if you have separate groups of images for the bottom and top layers, one option would be to use JEPG for the bottom image and PNG for the top one.

  In the improbable event of a participant using a very old and outdated browser not capable of handling PNG images, one thing you could do to screen such participants is to start your experiment with a little test: you show a bottom picture with, say a three-digit number, on top of which you put a transparent PNG, and ask participants to type the three digits or otherwise indicate that they do not see any digits. You could then only allow participants who get the digits right to proceed with the experiment.

  Good luck with your experiment!

  Fabrice.