How to post pictures online
Basics
Grob gesagt gibt es zwei Möglichkeiten Bilder ins Internet zu stellen: Als GIF/PNG oder als JPG. Andere Formate sind für diesen Zweck in der Regel nicht geeignet.
JPG
JPG ist ideal um Fotos ins Internet zu stellen. Es verwendet eine verlustbehaftete Kompression, die man so wählen sollte, dass sie für das menschliche Auge nicht wahrzunehmen ist. Dazu später mehr.

GIF und PNG
GIF und PNG sind ideal um zum Beispiel Logos, Screenshots oder Fotos mit mit starken Kontrasten bzw harten Kanten zu speichern. Das gilt auch für Bilder mit großen einfarbigen Flächen oder mit wenigen Farben. Beide Formate nutzen eine nicht verlustbehaftete Kompression. Es ist wichtig zu wissen, das GIF maximal 256 Farben und PNG maximal 16,7 Mio Farben unterstützt. In GIF-Bildern können Animationen gespeichert werden, in PNG nicht. Im Zweifelsfalle sind PNG-Bilder GIF-Bildern vorzuziehen, da es das modernere Format ist.
How to
Alle folgenden Erklärungen werden anhand des Programms XnView MP gemacht, da es für alle Plattformen verfügbar ist. Falls Ihr es nicht auf Eurem Rechner habt wendet Euch bitte an die Admins oder übertragt die Erklärungen auf ein Programm Eurer Wahl. In fast allen Bildverarbeitungsprogrammen (z.B. Photoshop) sind die Schritte analog und heißen nur ein wenig anders. In IrfanView funktioniert unten Genanntes auch, ist aber nicht so komfortabel.
Bildgröße ändern
Um die Bildgröße eines Bildes zu ändern, geht man wie folgt vor:
-
Bild in XnView MP laden
Sollte es sich um ein CMYK-Bild handeln, informiert XnView gleich, das es dieses in RGB umwandeln möchte und das ist für das Web genau das richtige, also einfach auf OK klicken. -
Im Menü Image => Resize wählen
-
gewünschte Zielgröße auswählen
Datei speichern
Das Ziel dieses Schrittes ist das abspeichern der Datei mit einer so kleinen Größe wie möglich. Dabei gilt es einen akzeptablen Kompromiss aus Dateigröße und Qualität zu finden.
-
File => Export (Photoshop: Für Web und Geräte speichern)
-
Fenster möglichst groß machen und das Bild vergrößern
Links seht Ihr Euer Originalbild und rechts wie sich das Bild durch die Einstellungen die Ihr macht verändert. Unter den beiden Bildern seht Ihr jeweils die Dateigröße - links die des Originals, rechts die Dateigröße in Abhängigkeit von Euren Einstellungen. - Auto refresh sollte angeschaltet sein
-
je nachdem, ob JPG oder GIF/PNG das geeignete Format ist,
ist das Vorgehen unterschiedlich:
-
JPG
- Progressive aktivieren
- Remove all Metadata aktivieren
-
Den Quality-Slider soweit wie möglich nach links
schieben. Dabei darauf achten, das die Qualität
noch akzeptabel ist. Das sieht man besonders gut,
wenn man eine Stelle mit einem starken Kontrast
stark vergrößert, z.B. die Kante eines schwarzen
Hauses vor hellblauem Himmel. Sind die
Kompressionartekfakte nun nicht zuviele, also
nicht störend und trotzdem die Datei möglichst
klein, dann hat man einen guten Kompromiss gefunden.
Beispiel für zu starke Kompression (zu niedrige Qualität)Beispiel für einen guten Kompromiss aus Dateigröße und Qualität.
- GIF/PNG
- Compression level möglichst hoch einstellen
- Unter Mode die Farbanzahl so weit wie möglich reduzieren. Dabei darauf achten, das die Qualität noch akzeptabel ist und schauen, wie sich durch die Farbanzahl die Größe des Bildes ändert (Wert unter der Vorschau). Nicht immer bringen weniger Farben auch kleinere Dateien.
Beispiel für die optimale niedrige FarbanzahlBeispiel für zu wenig Farben
-
JPG
- Ist man mit dem Ergebnis der Vorschau und der erzielten Dateigröße zufrieden "Save..." anklicken.
Nun ist es wichtig einen "web-sicheren" Namen auszuwählen.- Dieser enthält nur...
- Kleinbuchstaben
- die 26 Buchstaben von a bis z
- Zahlen von 0 bis 9
- Bindestriche und
- Unterstriche.
- Nicht verwendet werden sollten...
- Großbuchstaben
- Umlaute
- Buchstaben mit Akzent oder ähnlichem
- Sonderzeichen
- Satzzeichen und
- Leerzeichen!
- Beispiele für "gute" Namen:
- haus_am_meer.jpg
- israeli_chamber_project_by_avshalom_levi_small_200x200.jpg
- Dieser enthält nur...