Wenn es um das Speichern von Bildern für das Web geht, sind wir ziemlich verwöhnt. Bekannte und oft genutzte Plattformen wie Facebook, Twitter, XING oder Google bieten dir die Möglichkeit, dein Bild in irgendeinem Format und meistens unabhängig von Auflösung und Dateigröße hochzuladen.

Da es ja nicht dein Server und deine Rechenleistung sind, die da verbraucht werden, kann dir das völlig zu recht vollkommen egal sein. Anders ist es jedoch, wenn du Bilder für deine eigene Website, dein Blog oder die Website eines Kunden speicherst. Gestaltungsraster sehen immer auch ein optimales Bildformat vor – und neben den Proportionen des Bildes sollte auch die Dateigröße möglichst gering sein, um kurze Ladezeiten zu erzielen und die Absprungrate zu verringern.

Da selbst viele Grafiker aus der Branche sehr wohl wissen, wie man ein Bild für den Druck optimiert, aber beim Speichern für’s Web noch Fragen haben, zeigen wir dir hier, wie du Bilder optimal für den Webeinsatz aus Photoshop speicherst.

Oft wird der Fehler begangen und das vorhandene Bild einfach geöffnet, etwas skaliert oder bearbeitet und dann wieder im selben, willkürlichen Format gespeichert. Das führt langfristig zu sehr vielen unterschiedlichen Bildgrößen, die einem stringenten Gestaltungsraster schnell Probleme bereiten können.

Aber was ist das richtige Format? Das kann ganz von deinem Webdesign oder zum Beispiel deinem WordPress-Theme abhängen. Am besten, du suchst dir ein großes Bild aus deiner bestehenden Seite raus, speicherst es und schaust nach den Maßen.

Falls du noch am Anfang deiner Webseite stehst, bietet sich ein Format im Verhältnis 9:6 an. Das ist ein gängiges Format für Online-Medien und passt von den Proportionen gut in die meisten Layouts. Auch beim Teilen auf Sozialen Netzwerken machst du mit diesem Format nichts falsch.

Aus den Proportionen 9:6 ergeben sich unterschiedliche Möglichkeiten. Wenn du weißt, dass du eher kleine Bilder zur Verfügung hast, empfiehlt es sich, 750 x 500 Pixel als Standard-Format zu verwenden. Der Trend geht jedoch in allen Medien aufgrund von immer schnelleren Internetverbindungen und besser auflösenden Retina-Displays zu eher größeren Bildformaten.

Wenn du mit imposanten Bildern überzeugen willst, wählst du ein Format von 900 x 600 oder 1200 x 800 Pixeln. Aber aufgepasst: Wenn du nicht gerade ein Fotografie-Portfolio veröffentlichst, solltest du das als Richtwert für deine Maximalgröße sehen. Alles andere wäre verschwendete Ladezeit.

Fangen wir an: Du öffnest Photoshop und wählst im Menü oben links „Datei“ und klickst dann auf „Neu“. In dem darauf folgenden Pop-up ist es wichtig, dass du dein Format in Pixeln hinterlegst und als Auflösung 72 Pixel/Zoll einstellst. Du kannst die Maße aus dem hier aufgeführten Screenshot entnehmen.

Wenn du danach auf „Ok“ klickst, werden deine Werte übernommen und eine neue Arbeitsfläche erstellt. Sie dient dir jetzt als Basis für alle Bilder, die du in den nächsten Minuten speichern wirst.

Um deine Bilder im richtigen Format zu speichern, musst du es jetzt per Drag & Drop auf deiner Arbeitsfläche platzieren. Das heißt, du ziehst das Bild mit der Maus direkt auf den Photoshop-Hintergrund und lässt die Maus wieder los.

Wenn du das getan hast, bietet dir Photoshop direkt die Möglichkeit, das Bild zu transformieren. Dafür kannst du in der oberen Leiste die Eingabefelder nutzen oder du ziehst direkt mit der Maus an den seitlichen Kanten des Bildes.

Egal welche Variante du nutzt: Wichtig ist dabei immer, dass die Proportionen des Bildes erhalten bleiben. Beim Skalieren mit Eingabefeld stellst du das sicher, indem du das kleine Schloss anhakst. Beim Skalieren mit der Maus solltest du die Shift-Taste gedrückt halten. Wenn du deinen Bildausschnitt passend gewählt hast, drückst du die Enter-Taste.

Auf diese Weise kannst du nun noch weitere Bilder platzieren oder direkt mit dem Speichern beginnen.

Mit Photoshop richtig für’s Web speichern

Im Gegensatz zum normalen „Speichern-unter“-Prozess, wie man ihn von vielen Programmen kennt, bietet Photoshop die Möglichkeit, Bilder für das Web zu speichern. Den Befehl dazu findest du unter dem Menüpunkt „Datei“ und „Für Web speichern“.

Sobald du darauf klickst, wird das Bild für das Speichern für’s Web vorbereitet. Es erscheint ein Dialog-Fenster mit einer Vielfalt an Informationen. Für dich sind drei Dateiarten interessant:

1. JPEG: Für die meisten deiner Bilder wird dieses Dateiformat die optimale Wahl sein. JPEG überzeugt durch eine sehr gute Komprimierung, Ladezeit und Bildqualität im Verhältnis zur Dateigröße.
2. PNG: Dieses Format wählst du ausschließlich, wenn du transparente Bereiche in deinem Bild erhalten willst, wie zum Beispiel bei einem Freisteller oder einem Screenshot, der filigranen Text enthält.
3. GIF: Auch dieses Dateiformat unterstützt Transparenzen, liegt in der Darstellung, was Schärfe und Farbechtheit angeht, aber deutlich hinter dem PNG. GIFs sind besonders für Animationen und kleine Grafiken in Newslettern geeignet.

Wenn du ein Bild speicherst, kannst du gerne die Vorgaben von Photoshop nutzen. „JPEG hoch“ ist für das Web zum Beispiel gut geeignet. Bei Qualität solltest du „Hoch“ und „60“ wählen. Die weiteren Einstellungen kannst du aus der Grafik entnehmen.

Dateien richtig für das Web zu speichern, bedeutet auch, die Datei webkonform zu benennen. Das bedeutet konkret:

• keine Umlaute wie ä,ö,ü
• keine Sonderzeichen wie ß,‘,?
• keine Leerzeichen

Am besten, du schreibst klein, so können keine Verknüpfungsfehler entstehen. Ein optimaler Dateiname sieht zum Beispiel so aus: ein-schoener-dateiname.jpg.

Gestalter und Fotografen legen oft Wert auf Feinheiten und drehen die Qualität dann schnell mal unbewusst hoch. Hierbei darf man nicht vergessen, dass die Webseite kein Buch ist, in dem man einfach weiterblättern kann.

Jeder Klick und selbst jedes Preview-Bild bedeutet Ladezeit – und die mag niemand. Ein für den Laien marginaler und fast nicht erkennbarer Unterschied in der Bildqualität kann die Dateigröße und somit die Ladezeit der kompletten Webseite fast halbieren.

Vielleicht auch interessant: Hier findet ihr eine Auswahl von Tools für den perfekten Screenshot auf eurem Mac.