[[Images in the Questionnaire]]
You are here: start » Overview » Creating and Designing the Questionnaire » Images in the Questionnaire
 
Trace:

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
en:create:images [03.02.2015 14:37] – adminen:create:images [27.01.2021 14:54] (current) – sophia.schauer
Line 21: Line 21:
   - Afterwards, the image has to be embedded into the questionnaire. There are several ways of doing so - depending on the intended use.    - Afterwards, the image has to be embedded into the questionnaire. There are several ways of doing so - depending on the intended use. 
     * The image appears in **Compose Questionnaire** on the bottom right. You can simply drag & drop the image into the questionnaire here.      * The image appears in **Compose Questionnaire** on the bottom right. You can simply drag & drop the image into the questionnaire here. 
-    * If you click on the image in **Image and Media Files**, the file name will be shown as well as an HTML code to embed the image. This HTML code can be used in text elements, questions, items etc. +    * If you click on the image in **Image and Media Files**, the file name will be shown as well as an HTML code to embed the image. You can enter this HTML code anywhere you can enter text. For example, in text modules (if "HTML code" has been selected for the display mode), in the text or instructions of a question, or in the text of an item. You can also use an element "HTML code" under "Compose Questionnaire" and enter HTML code there. 
          
 If an image is embedded using HTML code, the position of the image can be adjusted more precisely. The HTML code displays the image ''image.jpg'' in the center and leaves a spacing of 40 pixels above/below for other content.  If an image is embedded using HTML code, the position of the image can be adjusted more precisely. The HTML code displays the image ''image.jpg'' in the center and leaves a spacing of 40 pixels above/below for other content. 
Line 71: Line 71:
   * Convert the image to RGB mode (greyscale images to the greyscale mode), if it involves an indexed image ([[#farbtiefe|Color Depth]]).   * 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).   * 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 ''%%<img src="..." style="max-width: 100%">%%'' to automatically resize an image as well.
   * Use the feature //Unsharp Mask//  (or //Sharpen//) if the image seems muddy after scaling.   * Use the feature //Unsharp Mask//  (or //Sharpen//) if the image seems muddy after scaling.
   * Reduce color depth if it involves a graphic. The fewer colors you need (units are counted in powers of 2, i.e. 255, 127, 63, 31, 15, 7, 3 or 2 colors), the smaller the file and thus the quicker the questionnaire will load. Leave the color depth unchanged for photos.   * Reduce color depth if it involves a graphic. The fewer colors you need (units are counted in powers of 2, i.e. 255, 127, 63, 31, 15, 7, 3 or 2 colors), the smaller the file and thus the quicker the questionnaire will load. Leave the color depth unchanged for photos.
Line 96: Line 98:
 |Photo (JPG)\\ 85% Quality|Photo (JPG)\\ 15% Quality|Reduced to 8 Colors\\ (PNG)|Graphic (PNG)\\  8 Colors|Graphic (PNG)\\ 8 Colors| |Photo (JPG)\\ 85% Quality|Photo (JPG)\\ 15% Quality|Reduced to 8 Colors\\ (PNG)|Graphic (PNG)\\  8 Colors|Graphic (PNG)\\ 8 Colors|
  
 +
 +==== File Name ====
 +
 +The widely used plug-in "uBlock Origin" identifies certain file names as advertisements. Avoid file names that start with an "AD" (for example, "AD1_new.jpeg"). Test your questionnaire in different browsers and with active ad blockers.
  
  
en/create/images.1422970631.txt.gz · Last modified: 03.02.2015 14:37 by admin
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki