Formatting images in SurveyEngine surveys
Examples of different ways of laying out images in your survey.
A step-by-step interactive tutorial on formatting images in surveyengine surveys in SurveyEngine. Preview the live tutorial, then download and upload it to your account to examine the construction.
Ben White, 08.07.2026
What this tutorial covers
Examples of different ways of laying out images in your survey.
Each page of the tutorial demonstrates a specific technique. Work through it as a respondent first, then open the editor to see how it was built.
What you will learn
After completing this tutorial you will be able to implement formatting images in surveyengine surveys in your own SurveyEngine surveys.
Download the tutorial ZIP and upload it to your account to use it as a starting point or template for your own work.
TLDR Quick links
Step-by-step walkthrough
Step 1: Float images left or right. Position images alongside text using float CSS or the built-in image alignment options.
Step 2: Set image dimensions. Control image width and height to ensure consistent display across screen sizes.
Step 3: Add image captions. Insert caption text below images to provide context or instructions.
Step 4: Create image grids. Use table or CSS grid layouts to display multiple images in a structured grid.
Step 5: Optimise for mobile. Use percentage-based widths and test image display on small screens before deployment.
Try the live tutorial
The live tutorial is a working SurveyEngine survey. Click through it as a respondent to see the finished result.
Then download the tutorial ZIP file and upload it to your SurveyEngine account to examine how it was built.
Preview the live tutorial or download the ZIP file to load it into your account.
References
Ready to try it? Open a free SurveyEngine account, download the tutorial ZIP and upload it to your account.
Or Contact us at support@surveyengine.com — we're glad to help.