Bilder ins Netz stellen

Contents

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

    Xnview-image-resize.png

  3. gewünschte Zielgröße auswählen

    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

Besonderheiten der einzelnen Systeme

Piranha Website

Größenänderungen müssen hier nicht gemacht werden, das macht das System automatisch. Bilder einfach so groß, wie Ihr wollt, hochladen. Alles anderen oben Gesagte stimmt aber. Die Kompression und das Format vorher sinnvoll manuell auszuwählen, kann allerdings nicht schaden, die Auflösung des Bildes vorher zu verkleinern eventuell aber schon.

Piranha Shop

Cover müssen in zwei Größen und Formaten hochgeladen werden:

  1. Thumbnail, 80x80 Pixel groß, JPG
  2. Cover, 170x170 Pixel, JPG

Der Piranhashop macht nichts automatisch. Beide Bilder müssen von Euch wie oben beschrieben vorbereitet werden.

virtualWOMEX

Die virtualWOMEX macht alles automatisch. Bilder einfach hochladen. Die Kompression und das Format vorher sinnvoll manuell auszuwählen, kann allerdings nicht schaden, die Auflösung des Bildes vorher zu verkleinern eventuell aber schon.

Classical:NEXT und Piranha Events CMS

  • Größenänderungen könnt Ihr im iBrowser oder vorher manuell machen.
  • Bilder müssen vor dem Upload von CMYK in RGB umgewandelt werden.
  • Wenn Ihr die Kompression vorher manuell macht, könnt Ihr in der Regel bessere Ergebnisse erreichen als die Automatik des iBrowsers.
    • Wenn man im iBrowser ein Bild anklickt und dann mit dem Mauszeiger über dem kleinen Fragezeichen rechts schwebt, kann man die Größe des Bildes sehen, so kann man sein eigenes Ergebnis mit dem automatischem Ergebnis des iBrowsers vergleichen.

Facebook, Twitter, MySpace, What-ever-gerade-in-ist...

Alles oben Gesagte gilt genauso, bevor Ihr Bilder zu fremden Websites hochladet. Insbesondere Twitter nimmt Euer Profilbild zu 100% so, wie Ihr es hochladet und bettet es dann so auch in andere Websites ein.

Variants