IT Kraut

IT Kraut

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.

Bei starker Vergrößerung und übertriebener Kompression sieht man gut, warum JPG kein Format ist, das für Bilder mit harten Kanten ist geeignet ist. An den harten Kanten entstehen sogenannte Kompressionartefakte.

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:

  1. 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.
  2. Im Menü Image => Resize wählen
    how-to/post-pictures-online/Xnview-image-resize.png
  3. gewünschte Zielgröße auswählen
    how-to/post-pictures-online/Xnview-resize.png

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.

  1. File => Export (Photoshop: Für Web und Geräte speichern)
    Xnview-export.png
  2. Fenster möglichst groß machen und das Bild vergrößern
    Xnview-export-2.png
    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.
  3. Auto refresh sollte angeschaltet sein
  4. je nachdem, ob JPG oder GIF/PNG das geeignete Format ist, ist das Vorgehen unterschiedlich:
    • JPG
      1. Progressive aktivieren
      2. Remove all Metadata aktivieren
      3. 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
      1. Compression level möglichst hoch einstellen
      2. 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 Farbanzahl
        Beispiel für zu wenig Farben
  5. 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.
    1. Dieser enthält nur...
      • Kleinbuchstaben
      • die 26 Buchstaben von a bis z
      • Zahlen von 0 bis 9
      • Bindestriche und
      • Unterstriche.
    2. Nicht verwendet werden sollten...
      • Großbuchstaben
      • Umlaute
      • Buchstaben mit Akzent oder ähnlichem
      • Sonderzeichen
      • Satzzeichen und
      • Leerzeichen!
    3. Beispiele für "gute" Namen:
      • haus_am_meer.jpg
      • israeli_chamber_project_by_avshalom_levi_small_200x200.jpg