Include Picture/Photo in Survey

[saamos]

I want to add a picture to my survey, but I can’t find any recommendations for the ideal size and format of photos. Can someone help me, please?

[mictr]

I dont think that there is an ideal size (resolution?) for images/photos, that depends on your questionnaire layout/design and the clients your participants use.

If they dont use mobile devices (smartphone, tablet) and mainly desktop computers you can use a single image that fits the width of your questionnaire layout/design.

If your participants use mobile devices you do have two options:
a) stay with the single-size-image from the desktop version and let the browser scale it down for you.
advantage: simple solution.
disadvantage: depends on the image file size – slow page display time or long loading times for mobile devices
b) create one or two lower resolution images and deliver those to tablets and smartphones.
advantage: mobile devices can download smaller images and page loads faster
disadvantage: you have to create the other images.

example:
your real image is 1600x900px, has a file size of 2000kb and is named “realimage.jpg”. You upload the image to your media library.

solution a:
you create a question of type 998 and add the following code to it:
<img src="path/to/image/in/medialibrary/realimage.jpg" width="1600" height="900" style="width: 100%" />
All clients (pc, tablet smartphone) will get the same image and for all clients it will be scaled to 100% width of the questionnaire layout.

solution b:
you create a (75%) 1200x675px (realimage_medium.jpg) and (50%) 800x450px (realimage_small.jpg) from your original image and upload them to your media library as well.
you create a question of type 998 and add the following code to it:

<picture>
<source media="(min-width: 1200px)" width="1600" height="900" srcset="path/to/image/in/medialibrary/realimage_large.jpg">
<source media="(min-width: 800px)" width="1200" height="675" srcset="path/to/image/in/medialibrary/realimage_medium.jpg">
<source width="800" height="450" srcset="path/to/image/in/medialibrary/realimage_small.jpg">
<img src="path/to/image/in/medialibrary/realimage.jpg" width="1600" height="900" style="width: 100%" />
</picture>

That surely looks cryptic but is more or less easy to understand. The rows 2 till 4 describes the images availiable to the browser. Row 2 provides the largest image and recommends it to the browser if the screenwidth of the client is 1200px or more. A normal desktop pc with a screen resolution of 1920×1080 will most likeley get this image if the browser is maximized. Row 3 provides the medium size image and recommends it to the browser if the screenwidth is above 800px (but lower than 1200px as those would have got the first image). Row 4 provides the smallest image for devices where the screenwidth is lower than 800px (most likely smartphones in portrait-mode)

[Author]

Posts