- This topic has 1 reply, 2 voices, and was last updated 5 months ago by mictr.
-
AuthorPosts
-
4. April 2024 at 8:40 #1970saamosParticipant
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?
6. April 2024 at 13:30 #1972mictrParticipantI 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)
-
AuthorPosts
- You must be logged in to reply to this topic.