Bilder und Grafiken

Gut gewählte Bilder und Grafiken machen deinen Lerninhalt schöner, ansprechender und bei richtigem Einsatz auch didaktisch wertvoller. 

In dieser Hilfeseite erfährst du daher

Bilder auf serlo.org einbinden

Erst einmal ganz praktisch: Auf Serlo kannst du Bilder und Grafiken im Editor entweder in voller Breite  oder rechts neben einem Text einbinden. Wie das genau funktioniert, erfährst du in unserer Anleitung zum Editor.

Um ein Bild einbinden zu können, muss es
  • kleiner als 2 MB sein
  • unter einer freien Lizenz stehen und
  • eines der folgenden Dateiformate haben: JPEG, PNG, SVG oder GIF.

Wie du frei lizensierte Bilder findest, erklären wir weiter unten.
Welches Dateiformat ist das Richtige?
Eins vorweg: Wenn es für die Grafik geeignet ist, ist uns SVG am liebsten.

JPEG

SVG

PNG

GIF

Dateiendungen

jpeg, jpg

svg

png

gif

Wofür zu empfehlen?

Fotos

Grafiken mit Formen und Flächen oder Text

kleine Bilder, Grafiken oder Logos

Animation von Einzelbildern

Vorteile

lässt sich aus vielen Programmen exportieren

Ohne Qualitätsverlust skalierbar, geringer Speicherplatz nötig und nachträglich gut zu bearbeiten

transparente Elemente möglich und verlustfreie Komprimierung

Format zur einfachen Animation von Bildern

Nachteile

Qualitätsverluste bei Komprimierung

Nicht für Bilder mit vielen Farbabstufungen (z.B. Fotos) geeignet

Auch nur bedingt für Fotos geeignet

nur für Animationen zu empfehlen
Für Profis: Das Dateiformat svg nimmt man für Vektorgrafiken und das Dateiformat png für Pixelgrafiken.
Nun weißt du, welche Bilder man auf serlo.org einbinden kann.

Aber was macht ein wirklich gutes Bild aus?

Inhaltlicher oder optischer Mehrwert: Eigentlich klar, aber wichtig!

So sieht zum Beispiel ein gutes Bild zum Satz des Pythagoras aus:
  • es ist inhaltlich korrekt
  • verdeutlicht die Flächengleichheit der jeweiligen Quadrate
  • arbeitet mit Farben
So kann es helfen, Schüler*innen den Satz des Pythagoras besser zu erklären.
Gute Lesbarkeit: Damit deine Bilder und Grafiken auch auf kleineren Bildschirmen gut zu erkennen sind, achte darauf, dass das Ergebnis nicht so wie in unserem Negativbeispiel aussieht.
Negativbeispiel zu guter Lesbarkeit
unleserliches Bild
Auf das Wesentliche beschränkt: Mehr ist nicht immer besser. Dem Prinzip der didaktischen Reduktion folgend: So viel wie nötig, so wenig wie möglich. 
Negativbeispiel zur Beschränkung auf das Wesentliche
zu überfülltes Bild
Keine Werbung: Auf Serlo haben Markenhinweise nichts zu suchen. Im Spoiler findest du dazu leckere Ritter, aber kein Musterbeispiel einer Grafik.
Negativbeispiel zu Werbung
Grafik mit Werbung
Quadratisch, praktisch, Pythagoras.

Bilder und Grafiken suchen

Nicht alle Bilder, die du online finden kannst, darfst du auf serlo.org hochladen. Hierbei muss immer die Lizenz der Bilder beachtet und Quellen korrekt genannt werden.

Mit einer Suchmaschine kannst du jedoch recht einfach Bilder mit einer freien Lizenz finden. Egal, ob du Google oder Ecosia benutzst, die Sucheinstellungen sind sehr ähnlich.

Such den Begriff, zu dem du ein Bild benötigst und gehe zur Rubrik “Bilder”. Dort kannst du auf Ecosia über Filter > Lizenz bzw. auf Google Suchfilter > Nutzungsrechte nur die Bilder anzeigen lassen, die auf serlo.org benutzt werden können. 
Nun hast du verschiedene Lizenzen zur Auswahl. Wähle am Besten 
  • kann kostenlos verwendet und geteilt werden oder
  • kostenlose Freigabe, Änderung & Verwendung, wenn du das Bild noch verändern möchtest
(In der Google Suche: zur Wiederverwendung gekennzeichnet bzw. zur Wiederverwendung mit Veränderung gekennzeichnet)

Lade das Bild nun herunter und dann ist es auch schon bereit auf serlo.org hochgeladen zu werden!
Weitere Suchmöglichkeiten für frei lizenzierte Bilder und Icons
  1. Creative Commons Bilder Suche: Eine Bildersuchmaschine, auf der nur Bilder unter einer CC-Lizenz angezeigt werden. Filtere links nach der passenden Lizenz und wähle CC0, Public Domain Mark, BY und BY-SA. Jedes, der nun angezeigten Bilder, darfst du für serlo.org verwenden.
  2. The Noun Project: Hier findest du über 2 Millionen Icons – alle unter einer freien Lizenz.
  3. Wikimedia Commons: Die Bilderdatenbank der Wikipedia. Du darfst alle Bilder (und andere Inhalte) für serlo.org verwenden.
  4. Public Domain Pictures: Eine Bildersuchmaschine, die nur Bilder unter der Lizenz Public Domain anzeigt. Auch hier kannst du alles verwenden.

Bildquellen richtig angeben

Um eine Bildquelle richtig anzugeben, musst du folgende Fragen beantworten können:
  1. Wer ist der Urheber? Nenne den Namen und verlinke, falls möglich, auch auf den Urheber.
  2. Welche Lizenz hat das Bild? Verlinke den Lizenztext dazu.
  3. Woher hast du das Bild? Verlinke hier die Seite, von der du das Bild heruntergeladen hast.
So sieht sowas dann beispielsweise aus:

Bilder und Grafiken erstellen

Oft kann man Bilder und Grafiken nicht so einfach im Internet finden und muss sie selbst erstellen.

Selbsterstellte Bilder und Grafiken, die du auf serlo.org hochlädst, stehen automatisch unter einer cc-by-sa Lizenz so wie alle unsere Inhalte. Wenn diese Bilder und Grafiken geteilt werden, wird serlo.org als Quelle angegeben. 
Du möchtest als Urheber*in namentlich genannt werden?
In diesem Fall nennst du dich als Quelle und verlinkst optional auf dein Serlo Profil. Das sieht dann zum Beispiel so aus:
Auch bei selbst erstellten Bildern und Grafiken ist es gut, wenn du kenntlich machst, dass die Grafik selbst erstellt ist. Notiere dafür unter dem Bild “eigene Darstellung” oder etwas Vergleichbares. Das sieht dann zum Beispiel so aus:
Abbildung selbst erstellt

Methoden und Programme, um Bilder und Grafiken zu erstellen

Fotografiere selbst
Erstelle Bilder und Grafiken selbst, indem du ein Foto davon machst. So kannst du beispielsweise selbstgeschossene Naturbilder in deinen Biologie-Artikel integrieren.

Aber auch Grafiken sind leicht selbst erstellbar: Nimm dir Stift und Papier und zeichne beispielsweise ein Diagramm. Das Foto davon kannst du dann auf serlo.org hochladen.
Präsentationssoftware
Mit einem Präsentationsprogramm deiner Wahl wie Impress von Libre Office (kostenfrei) oder Powerpoint kannst du sehr leicht Grafiken, Prozesse oder Bilder aus einfachen geometrischen Figuren erstellen.
Damit kannst du zum Beispiel solche Bilder erstellen:
Hier noch ein paar hilfreiche Tutorials, falls du diese Programme lernen möchtest:
GIMP
Mit GIMP kannst du Bilder bearbeiten oder auch GIFs erstellen. Auch das Erstellen komplexerer Bildcollagen ist hier möglich.
Hier ein Beispiele, die mit GIMP erstellt wurden:
Inkscape
Mit dem Programm Inkscape lassen sich mitunter komplexere Bilder und Grafiken erstellen. Aber auch Icons und Clip Arts sind hier gestaltbar. Zum Beispiel kannst du solche Bilder mit Inkscape erstellen:
Fachspezifische Programme

GeoGebra (Mathematik)

GeoGebra ist ein kostenloses Programm und eignet sich vor allem zur Erstellung von mathematischen Darstellungen. Hier lassen sich geometrische Objekte und Funktionsgraphen zeichnen und auch die Verwendung von Formeln mit LaTeX wird hier ermöglicht.
Beispiele
Hier ein paar Bilder, die mit GeoGebra erstellt wurden:
Auch interaktive Applets lassen sich damit erstellen:
GeoGebra
Mehr zu GeoGebra findest du in unserer Hilfeseite zu GeoGebra.

Avogadro (Chemie)

Avogadro ist ein kostenloser Molekular Editor. Er eignet sich sich zur Erstellung von 3D Strukturen wie Molekülen und Proteinen.
Beispiel

Chemsketch und Chemdraw (Chemie)

Zur Darstellung von Lewis-Strukturen sind die Programme Chemsketch (kostenlos) und Chemdraw (kostenpflichtig) empfehlenswert.
Beispiel

Bilder verändern

Manchmal ist es nötig die Speichergröße eines Bilds zu verändern oder man möchte einzelne Teile eines Bildes hervorheben, z.B. durch Beschriftungen oder Pfeile. Auch wenn du eine Bildcollage erstellen willst oder Bilder zuschneiden möchtest, brauchst du Bildbearbeitungsprogramme.

Für diese Fälle kannst du entweder so gut wie jedes der obigen Programme benutzen oder du nutzt, was bereits auf deinem Computer vorinstalliert ist. Fast jeder Rechner hat ein Programm installiert, um Bilder anzusehen und auch zu bearbeiten. Oft hat das Programm keinen festen Namen. Um es zu nutzen, mache einen Rechtsklick auf das zu bearbeitende Bild und wähle "Öffne mit" aus. Dann sollte es z.B. unter "Bild bearbeiten" oder "Ausschneiden und Skizzieren" oder "Fotos" oder unter einem anderen Namen als eines der Auswahlmäglichkeiten erscheinen.
Der Funktionsumfang ist unterschiedlich groß, aber reicht meist für einfache Bearbeitungen.

Für den Export von Bildern können sich auch Screenshots anbieten. Wie du diese erstellst ist von PC zu PC unterschiedlich.

Serlo-Farben

Damit serlo.org trotz der großen Anzahl an Autor*innen in unserer Community möglichst einheitlich aussieht, wäre es schön, wenn du in deinen Grafiken die Farben aus der folgenden Tabelle nutzen könntest.

Farbe

RGB-Farbcode

Hexcode

orange

orange

(255,102,0)

ff6600

rot

rot

(204,0,0)

cc0000

lila

lila

(102,0,153)

660099

tuerkis

türkis

(0,153,153)

009999

gruen

grün

(0,100,0)

006400
Hinweis: Nutze wenn möglich bitte kein rot und grün zur Unterscheidung! Menschen mit Rot-Grün-Schwäche können hier Probleme haben.
Dieses Werk steht unter der freien Lizenz CC BY-SA 4.0. Information
Kommentieren Kommentare
0
Zu article Bilder und Grafiken:
emkadys 2018-08-04 10:04:07+0200
Bei den Grafiken mit Koordinatensystem finden sich häufig kleine Kreise als Punktmarkierungen (wie standardmäßig von Geogebra verwendet). Wir weisen im Unterricht die Schüler ausdrücklich darauf hin, dass sie keine "Knödel malen" sollen, sondern (möglichst mit spitzem Bleistift) kleine Kreuze (x), deren Schnittpunkt eben exakt beim Punkt liegen. Ich wollte hier anregen, zumindest für Aufgaben/Lösungen, die SchülerInnen adressieren, als Standard eben das Kreuz (x) zu verwenden.
Nish 2018-08-06 22:45:57+0200
Vielen Dank für diesen Input! Sehr wertvoll! :)

Wie bereits bei der Antwort zu einem anderen Kommentar erwähnt, sollen noch weitere Meinungen eingeholt werden und dann gemeinsam entschieden werden, ob man diese Richtlinie entsprechend erweitert oder aus aus bestimmten Gründen nicht erweitert.

@Community/alle:
Gibt es Meinungen / Bedenken / Widerspruch / Zustimmung zum Vorschlag von emkadys?

LG,
Nish
wolfgang 2020-04-30 07:48:50+0200
Hallo emkadys,
vielen Dank für die guten Vorschläge! Wir haben deine Vorschläge jetzt im Absatz zu Geogebra eingefügt. Schau gerne mal rein, ob es so passt. :-)

Liebe Grüße
Wolfgang
Antwort abschicken
1
Zu article Bilder und Grafiken:
Eva 2017-12-07 07:26:39+0100
Hallo George_Serlo, in deiner Bearbeitung ist ein Schreibfehler Punkt 3. Die ID des Applets ....Mateteialien
Wichtiger:
Ich glaube, dass muss .ggb heißen und nicht ggt. Und muss der Code auch gändert werden?
Wie geht ihr mit der Version 6.0. um? Die sieht ein lolakes Abspeichern gar nicht mehr vor. Für Serlo sicher einfacher...
Ich hatt schon mal die Idee geäußert, dass die Geogebra Arbeitsblätter unter dem SerloAccount gesammelt werden, der dann nicht unbedingt öffentlich sein muss. Beim aktuellen Procedere werden auf der Geogebra-Plattform Materialien nur für Serlo unter verschiedenen Accounts erstellt und sind dann öffentlich, aber nicht wirklich für die Allgemeinheit außerhalb von Serlo nützlich. Wenn jedes Applet für Serlo unter dem Serlo- Account bei Geogebra abgelegt wird, muss das ggf. auch nicht öffentlich sein. Allerdings bräuchte jede(r) Applet-Ersreller(in) den Account von Serlo.
Alternativ: Wenn ich über meinen eigenen Account Material zur Verfügung stelle, reicht da nicht "mit link Teilen?".
peterjaumann 2017-12-07 12:57:48+0100
Hallo Eva,

ich bin mal so frei und bessere den Schreibfehler kurz aus.
Ebenso stimme ich dir bei der Endung der Geogebra Dateien zu. Jedenfalls zeigt mir mein PC auch .ggb als Dateiendung an. Das wird also schon stimmen, deshalb bessere ich das auch mit aus.
Bezüglich des Accounts für die Geogebra-Plattform: Einen solchen allgemeinen Serlo-Account gibt es bereits. Schreib mir doch einfach per E-Mail an peter@serlo.org. Dann kann ich dir die Zugangsdaten geben.

Viele Grüße
Peter
peterjaumann 2017-12-07 13:07:11+0100
@George_Serlo:
Ich habe auch gleich im Punkt "Geogebra einsetzen"/1. einen kurzen Erklärungssatz eingefügt. Macht es vielleicht noch etwas verständlicher?
Falls es dir nicht gefällt, kannst du es natürlich gern wieder ändern oder rausnehmen.
Eva 2017-12-08 11:37:24+0100
Hallo Peter, ich habe deine Bearbeitung noch mal um die Beschreibung der Verwendung des Buttons </> im Serlo Editor ergänzt. Es liegt ja nahe, dass Nutzer diesen Button auch nutzen. Leider sind die Bezeichnungen nicht mehr ganz aktuell "GeogebraTube" gibt es nicht mehr, und im zweiten Fenster -- das nach der Auswahl der "Injection" erscheint -- muss im zweiten Eingabefeld nur die schon erwähnte ID hin und kein Link. Ist ein bisschen verwirrend... ich habe bewusst noch keine screenshots eingefügt, weil ich meine, dass die Textbausteine der Fenster noch aktualisiert werden sollten. Gruß an die Entwickler :-/. Und dann müssen wir hier auch den Text anpassen.
Nish 2017-12-13 17:48:49+0100
@Eva, @peter:
Ich habe damals den Abschnitt "Geogebra einsetzen" geschrieben ;) ggt war schon richtig. Schaut euch einfach nach dem Einbinden einer Datei den Latex-Code an. Dort steht immer >[Text](ggt/ID)
Wir können aber Punkt 3 gleich löschen, da das ja mittlerweile wieder mit den </> funktioniert. D.h. ich habe den Abschnitt überhaupt so geschrieben und das mit ggt eingefügt, da es eine Zeit gab, wo man die Geogebra-Applets nicht einfach mit </> einfügen konnte. Dass Ihr Bescheid wisst.

@Eva:
Schön, dass du dich auch gleich einbringst und das gleich selber änderst! :) Ich übernehme es gleich noch und füge, wenn ich Zeit habe noch Änderungen hinzu. Danke auch für deine Hinweise im Kommentar. Ich bzw. wir kümmern uns um die Weiterleitung bzw. Lösung.
Nish 2017-12-13 18:06:30+0100
@Eva: Übrigens, ich habe immer einfach die URL genommen und bei Speichern hat der Editor automatisch es richtig gemacht und die Id verwendet.

Ich habe jetzt erst gesehen, dass ggt bei 1. falsch war, sry.

LG,
Nish
0
Zu article Bilder und Grafiken:
Simone_Heinrich 2018-11-02 15:37:34+0100
Hallo,
Könntet ihr bitte bei den Farben noch dazuschreiben, wie man sie in LaTeX im Text einbindet.
Viele Grüße,
Simone
wolfgang 2020-04-30 07:46:54+0200
Hallo Simone,
wir haben jetzt in der Latex-Richtlinie einen Absatz hierzu ergänzt. Schau gerne mal rein -> https://de.serlo.org/90410#farben

Liebe Grüße
Wolfgang