Well-chosen images and graphics make your learning content more beautiful, more appealing and, if used correctly, also didactically more valuable.
In this help page you will learn therefore:
how you can embed images on serlo.org
what is a good image
how to find free licensed images
how to cite sources correctly
how to create your own images
which colors you should use for self-made images on serlo.org
Have fun!
Embedding images on serlo.org
Let's start very practical: On Serlo you can embed images and graphics in the editor either in full width or on the right side of the screen next to some text. You can find out exactly how this works in our editor guide.
To embed an image, it must be:
smaller than 2 MB,
available under a free license and
have one of the following file formats: JPEG, PNG, SVG or GIF
How to find free licensed images is explained below.
But what makes a really good image?
Somehow trivial, but really important: added value either visually or content-wise.
For example, this is what a good image on the Pythagorean Theorem looks like:
it is correct
it clarifies the equality of the areas of the respective squares
it works with colors
So it can help to better explain the Pythagorean theorem to students.
Good readability: To make sure your images and graphics are also easy to comprehend, viewed on smaller screens, make sure that the result does not look like our bad example below.
Limited on the essentials: More is not always better. Following the principle of didactic reduction: As much as necessary, as little as possible.
No advertising: Brand references have no place on serlo.org. In the spoiler you will find some Ritter Sport, but not a prime example of a graphic.
Search for images and graphics
Not all images that you can find online can be uploaded to serlo.org. The license of the images must always be respected and sources need to be named correctly.
However, with a search engine you can easily find images with a free license. No matter if you use Google or Ecosia, the search settings are very similar.
Search for the term you need an image for and go to the "Images" section. There you can use Filter > License on Ecosia or Tools > Usage Rights on Google, to display only the images that can be used on serlo.org.
Now you have several licenses to choose from. Choose best:
can be used and shared for free or
free sharing, modification & use if you still want to change the image.
(In Google search: marked for reuse or marked for reuse with modification).
Download the image and then it's ready to be uploaded to serlo.org!
Citing image sources correctly
To properly credit an image source, you must be able to answer the following questions:
Who is the author? Give the name and, if possible, link to the author.
What is the license of the image? Link to the license text.
Where did you get the image from? Link to the page from which you downloaded it.
This is what it looks like:
Source: Cooper, CC BY-SA 3.0, Wikimedia
Create images and graphics
Often you can't easily find images and graphics on the internet and have to create them yourself.
Self-created images and graphics, that you upload to serlo.org, are automatically licensed under a cc-by-sa license, as is all of our content. If these images and graphics are shared, serlo.org will be credited as the source.
Also for images and graphics, that you created yourself, it is good if you make it clear that you did so. Note "own representation" or something similar under the image. This looks like this, for example:
Image: own representation.
Methods and programms to create images and graphics yourself
Modify images
Sometimes it is necessary to change the storage size of an image or you want to emphasize individual parts of an image, e.g. with labels or arrows. Also if you want to create an image collage or crop images, you need image editing programs.
For these cases, you can either use just about any of the above programs or what is already pre-installed on your computer. Almost every computer has a program installed to view and also edit images. Often the program does not have a fixed name. To use it, right click on the image you want to edit and select "Open with". Then it should appear under "Edit Image" or "Cut and Sketch" or "Photos" or some other name.
The range of functions varies, but is usually sufficient for simple editing.
Screenshots can also be useful for exporting images. How you create them varies from PC to PC.
Serlo-Colors
To make serlo.org look as consistent as possible, despite the large number of authors in our community, it would be nice if you could use the colors from the following table in your graphics.
Color | RGB-code | Hexcode | |
|---|---|---|---|
 | orange | (255,102,0) | ff6600 |
 | red | (204,0,0) | cc0000 |
 | purple | (102,0,153) | 660099 |
 | turquoise | (0,153,153) | 009999 |
 | green | (0,100,0) | 006400 |
