The following HTML code displays an image aligned to the right and enables text to flow to the left of it with a spacing of 20 pixels. This could be used, for example, for the question title.
Please look closely at the image on the right.
Afterwards, please evaluate the image in light of the statements that can be read below.
You can also fall back on the predefined CSS classes "left" and "right" for floating text.
Please look closely at the image on the right.
**Note:** Theoretically, you could also use images that stored on a different web server in the questionnaire with HTML code . However, the legal problems regarding the usage still remain -- and the image should be downloaded via encrypted HTTPS protocol, if the questionnaire is also transmitted in encrypted format. Otherwise, some internet browsers display a security warning.
**Tip:** If you want to display an image as a logo on each page in the questionnaire, do not upload it in the normal way. Instead, upload it in **Footer and Logo** in the tab //Logo//.
===== Prepare Images for the Internet =====
A few preparations are necessary to ensure an image can be displayed properly. Generally, the image has to be scaled to the right size and then saved in a file format suitable for the internet (e.g. GIF, PNG or JPG).
Image editing software is needed to process images for the internet. If you do not have this type of software to hand, download the open source software [[http://www.gimp.org/|GIMP]] for free.
==== Scale Images ====
The size of the image displayed in the questionnaire depends on the size of the pixel. One pixel (typically) corresponds to one pixel on the screen. Set the magnification/zoom in your image editing software to 100% in order to see the original size of the image.
* There is no point specificing another size in centimeters (or the like) in the image.
* In principle, you can also specify the size of an image when embedding it with HTML code -- however, using the browser to do the scaling tends to produce a worse quality (blurry). The questionnaire also loads for an unnecessarily large amount of time because the size of the file and, therefore, the transmission time, increases with the size of the pixel.
Scale the image as follows:
* Open the original image in the image editor.
* Convert the image to RGB mode (greyscale images to the greyscale mode), if it involves an indexed image ([[#farbtiefe|Color Depth]]).
* Scale the image with the image editor. Please ensure that the size is given in pixels (resolution or size specification in centimeters is irrelevant for online display).
* **Tip:** If your images are hard to read/recognize after resizing, you may change they questionnaire's width ([[:en:create:layout]]) to have more overall space.
* On small displays (e.g., on smartphones), the layout will shrink ([[:en:create:smartphones]]). Use ''%%
Text above the image.

Text below the image.
There are two CSS classes (''class'') defined in SoSci Survey, with which you can position an image so that the text runs around the outside: ''left'' and ''right''. Thus, if an image should appear to the right of the text, the class ''right'' will be added to the
Welcome
This example demonstrates how an image can be positioned to the right of the text.
{{:de:create:scr.images.image-right.gif?nolink|Wrap Text Around Images}}
HTML permits a variety of options when inserting images -- for more information please see [[http://de.selfhtml.org/html/grafiken/index.htm|SelfHTML: Graphics]] and [[http://de.selfhtml.org/css/eigenschaften/index.htm|SelfHTML: CSS Properties]].
===== Images as Answers =====
Images can also be integrated directly into questions and items. The HTML tag ''