Zugegeben, das Thema Größe von Bildern für die verschiedensten Einsatzzwecke im Marketing ist nicht ganz easy. Weil dabei eine Menge Faktoren eine Rolle spielen. Und es geht schnell in die Technik. Die will ich mal außen vor lassen, sondern einige grundsätzliche Dinge über die Größe von Bildern erklären. Und zwar aus verschiedenen Blickrichtungen:

1. Bildbeschaffung
Grundsätzlich sollten Sie die Bilder immer im größtmöglichen Format fotografieren, einkaufen und abspeichern. Verkleinern kann man dann immer noch, aber kleine Bilder vergrößern - das wird schwierig bis unmöglich. Denken Sie an einen schönen kuschligen Wollpulli. Man braucht ihn nur zu heiß waschen und schon hat er Kindergröße. Rückgängig lässt sich das nicht mehr machen.

Beim Kauf von Bildern möglichst das größte Format wählen

Bleiben Sie so flexibel wie möglich, Sie wissen nie, wann Sie das Bild nochmal einsetzen. Bei den üblichen Stockarchiven wie iStock & Co. sind es oft nur wenige Euro, die den Unterschied ausmachen. Beim Kauf von Bildpaketen bzw. bei Abos kann man von Haus aus die größe angebote Version downloaden.

2. Einsatzzweck: Wo wird das Bild eingesetzt?
Soll das Bild für Webanwendungen, wie die Website, Newsletter, Social Media oder Blog verwendet werden? Hier sind kurze Ladezeiten wichtig. Heißt, wenn wenig Platz ist, lassen wir den dicken Wollpulli zuhause und packen einen Pulli mit weniger Volumen in den Koffer. Nur wenn wir ihn wirklich brauchen oder genug Platz ist, nehmen wir den dicken Pulli mit.

Oder sollen die Bilder für den Druck eingesetzt werden? Da müssen wir wieder unterscheiden zwischen dem Tintenstrahldrucker im Büro oder der Offset oder Digital-Druckerei. Faustregel: Für Flyer, Broschüren, Plakate, Rollup-Banner oder Messegrafik werden hochauflösende Bilder benötigt – minimal 300 dpi sollen diese haben. Doch dazu kommen wir noch. Für den Ausdruck im Büro oder Powerpoint-Folien reichen im Allgemeinen geringere Auflösungen (150 dpi oder weniger).

Smartphone Fotos für große Formate einsetzen?
Für große Formate, wie Plakate oder Messegrafiken ist die Qualiät des Fotos sehr wichtig. Auf riesigen Plakaten ist zur Zeit die Apple Kampagne "Fotografiert mit dem iPhone 6" zu sehen. Suggeriert uns, dass man eben mal mit dem Smartphone was knipst und es dann metergroß aufziehen kann. Das gelingt nur selten und nur bei absolut idealem Licht. Aber: Banner, Plakate und alle Motive, die für den Betrachter weit weg sind, haben ein relativ großes Raster (Pixeldichte). Sie wirken nur dann scharf, wenn die Motive aus einem gewissen Abstand heraus betrachtet werden. Würde man hier näher ran gehen können, würde man die Unschärfe deutlich erkennen. Zudem steht auf den Apple Plakaten "Für Großdruck optimiert". Heißt, hier wurde nachgearbeitet, wahrscheinlich ziemlich aufwändig interpoliert. Also: Je weiter weg der Betrachter vom Bildmotiv ist, desto geringer kann die Pixeldichte sein. Schauen Sie sich einfach mal ein ganz normales Straßenplakat aus 15 cm Entfernung an. Smartphonebilder eignen sich für Großformate in der Regel nicht.

Für verschiedene Einsatzzwecke Bilder mehrfach (Original und Kopien) speichern

Bilder immer in der Originalgröße/-format abspeichern und nach der Bearbeitung nicht überschreiben, sondern unter anderem Dateinamen abspeichern. (z.B. schoenes-bild-rgb-web-250x400px.jpg). Sie speichern ein und dasselbe Bild mehrfach, aber in unterschiedlichen Formaten (z.B. für Facebook, Twitter, Powerpoint, Flyer, etc.) und Auflösungen (Web, Druck, PPT, etc.).

3. Dateiformate
Je nach Einsatzzweck werden zum Teil unterschiedliche Formate genutzt, die auf die Dateigröße Einfluss haben. Ich stelle nur die wichtigsten vor, von klein nach groß.

GIF: Das Format für kleine Bilder im Web. Wird immer weniger eingesetzt und von PNG abgelöst. Denn Bilder im PNG-Format sind fast immer schärfer. Und Transparenz kann das PNG genauso wie das GIF-Format. GIF wird wohl irgendwann aussterben.

PNG: Löst GIF als Format für kleine Bilder im Web ab. Gerade kleine PNG-Dateien lassen sich verlustfrei komprimieren. Es gibt zwei Qualiätsstufen, die sich natürlich auf die Dateigröße (KB) auswirken. PNG wird vor allem für transparente Grafiken, wie Logos, Schriftzüge oder Icons verwendt.

JPG oder JPEG: Das Standardformat, das sowohl für Web als auch Print eingesetzt werden kann. Mit modernen Bildbearbeitungsprogrammen lassen sich Bilder sehr effizient komprimieren, ohne dabei große Abstriche hinsichtlich der Qualität gemacht werden.

TIF oder TIFF: Das Format, das Grafiker und Profifotografen lieben. Denn es hat die höchstmögliche Qualität. Aber dafür auch oft bombastische Dateigrößen, also nichts fürs Web.

EPS, SVG, AI: Alles Vektorformate – ausschließlich für Grafiken- die verlustfrei so groß aufgezogen werden können, dass sie problemlos auf Megabanner an einem Hochhaus gedruckt werden können und immer noch knackscharf sind. Das schaffen Fotos nie. Wir nehmen es nur als scharf wahr, weil wir so weit weg sind.

PDF: Ein Tausendsassa, das sowohl auf kleine Dateigrößen mit schlechter Auflösung aber auch Vektorformate abspeichern kann. Je nachdem, welche Vorgaben beim Erstellen der PDF-Dateien gemacht werden.

Die wichtigsten Dateiformate für Web und Print

PNG oder JPG für Bildschirmanwendungen, PNG und GIF für Bilder mit Transparenz, GIF für animierte Bilder, JPG oder TIFF für den Druck

4. Welche Auflösung?

Das schwierigste Thema, da toben sich gern die Männer aus, weil es im Detail nur technisch zu erklären ist. Aber so tief in die Technik müssen wir gar nicht einsteigen, um das Thema zu verstehen. Im Grunde genommen handelt es sich um die Anzahl von Bildpunkten und wie genau sie von Bildschirmen, Druckern, Scannern wieder gegeben werden. Je mehr Bildpunkte auf einer Fläche sind, desto besser ist die Qualitiät des Bildes. Als Faustregel für den Offset- oder Digitaldruck gilt: 300 dpi/dots per inch. 1 inch sind umgerechnet 2,54 cm, also sind 300 Bildpunkte auf 2,54 cm untergebracht. Sind es nur rund 100 Bildpunkte auf der gleichen Fläche, wirkt das Bild unscharf. Und sind es noch weniger, erkennt das Auge gar kein Bild mehr, sondern nur noch eine Art Mosaik. Wer tiefer in die Details einsteigen will, kann hier mehr lesen. Oder auch in diesem Artikel.

Lins bei geringer Auflösung ist das Bild noch scharf. In der Mitte wird die Unschärfe erkennbar. Rechts sind keine Bildinhalte mehr zu erkennen, nur noch einzelne Pixel. (Mit Photoshop für Web optimiert bei 100% Qualität = 317 KB.)

Zum Vergleich: Die gleiche Fotoserie, ebenfalls mit Photoshop für den Webeinsatz optimiert - aber hier nur mit 20% Qualität. Das Bild hat nun 35 KB. Erkennen Sie einen Unterschied?

Ich versuche es ohne Technik: Wir stellen uns wieder den Pulli vor. Er liegt in 100% Auflösung vor uns, so wie wir ihn gekauft haben. Dehnen wir das Material, entstehen Löcher zwischen den Maschen. Der Pulli wird ausgeleiert und unansehlich. So ungefähr ist das auch bei den Bildern. Je mehr wir die Bilder hochvergrößern, desto unschärfer werden sie. Die Kanten reißen aus und in extremen Vergrößerungen sehen wir sogar die einzelnen Pixel. Letztlich hängt die ideale Auflösung vom Endformat und vom Ausgabemedium ab (Drucker, Bildschirm, etc.). Mit Bildbearbeitungswerkzeugen lässt sich Sie die Auflösung nur reduzieren. Beim Vergrößern entsteht Unschärfe, wie die Bilderserie oben zeigt.

Welche Auflösung für welches Ausgabemedium?
Generell gilt: Für den hochwertigen Druck sollten die Bilder mininmal 300 dpi haben. Für den Bürodrucker, Powerpoint-Slides oder Handouts reichen schon 150 dpi oder weniger. Bei Großformaten kann ein größeres Raster eingesetzt werden, je nach Abmessungen reichen oft 100 dpi. Für Webanwendungen stehen nicht die Abmessungen und dpi im Verhältnis, sondern die Abmessungen zu der Dateigröße. Also wieviel KB darf mein Bild mit 1.600 x 650 Pixeln maximal haben? Das Foto wird in der entsprechenden Größe (1.600 x 650 px) zugeschnitten und dann mit Photoshop oder anderen Werkzeugen für das Web optimiert. Wir müssen uns keinen Kopf über dpi (dots per inch) oder ppi (pixel per inch) machen.

Perfekte Auflösung: 300 dpi für den Druck, Pixel für Webanwendungen

Für Druckprodukte mindestens 300dpi (dots per inch bzw. Zoll) - gern mehr. Hier sind die Kriterien Bildbreite und -höhe bei 300 dpi ausschlaggebend. Im Web spielen dpi im Prinzip keine Rolle, hier zählen allein die Pixel, bzw. das Verhältnis von Pixelbreite und -höhe im Verhältnis zur Dateigröße in KB.

5. Die optimale Dateigröße
Hier meine ich jetzt nicht die Abmessungen, also z.B. 2050 x 300 Pixel. Sondern es geht um die Größe der Bilddatei. Für den Druck spielt die Dateigröße keine Rolle. Selbst wenn später ein PDF geschrieben wird, werden große Bilder prima komprimiert. Im Web ist eine geringe Dateigröße wichtig - wegen der Ladezeiten. Die Datenleitungen werden zwar immer besser, gleichzeitig surfen wir mehr und mehr mobil. Also unterwegs, im Zug, im Restaurant, beim Warten auf den Bus. Hier sind kurze Ladezeiten total wichtig.

Dateigröße: Bilder für Websites auf kleine Dateigröße reduzieren bzw. optimieren

Als Faustregel für Bilder im Web gilt: Große Bilder – beispielsweise für den Seitenheader - sollten maximal 130 - 250 KB haben. Kleine Bilder ca. 50 KB. Icons oder Buttons müssen ganz schnell geladen werden und sollten 10 KB und weniger haben.

Das gleiche Bild in zwei Größen (10 x 7cm und 2 x 2,1 cm bei 300 dpi) für den Druck optimiert. Beide Bilder sind scharf. Würde man das bereits verkleinerte Bild wieder auf 10 x 7 cm aufziehen, wäre es unscharf.

6. Bildgröße (Breite mal Höhe)
Jetzt geht es endlich um die Abmessungen. Wie gesagt, für Webseiten werden die Angaben in Pixel gemacht. Im Printbereich ganz altmodisch in cm oder mm, bei mindestens 300dpi. Für Powerpoint reichen 150dpi oder weniger. Zurück zum Web. Leider gibt es hier keine festen Größen, weil jede Website andere Anforderungen hat. Idael ist es, wenn Bilder mit einer hohen Pixeldichte sehr gut komprimierbar sind. Beim Komprimieren kommt es auch auf die Bildinhalte an. Aber hier gibt es leider keine pauschalen Angaben, welche Auflösung nun ideal ist. Man muss jedes Bild einzeln betrachten.

Hinweis: Retina-Displays haben eine sehr hohe Pixeldichte. Mobile Endgeräte – allen voran von Apple - zeigen teilweise dreimal soviel Pixel auf der gleichen Fläche an, wie ein normaler Bildschirm. Das iPhone 6 hat wohl zur Zeit die beste Auflösung und kommt schon an einen HD-Fernseher heran. Sehen Sie sich also Ihre Website möglichst mit einem neuen iPhone oder iPad an, um zu erkennen, ob die Bilder scharf sind.

Wie finden Sie für Ihre Website das verwendete Bildformat heraus?

Bild auswählen und rechte Maustaste: In allen Browsern lässt sich die Grösse von Bildern auslesen. Links: Das Bild wird bei diesem Bildschirmausschnitt mit 677 x 275 pixel angezeigt. rechts sieht man, welche Abmessungen das Bild im Original hat. Es … — Bild auswählen und rechte Maustaste: In allen Browsern lässt sich die Grösse von Bildern auslesen. Links: Das Bild wird bei diesem Bildschirmausschnitt mit 677 x 275 pixel angezeigt. rechts sieht man, welche Abmessungen das Bild im Original hat. Es wurde mit 1.920 x 872 Pixel hochgeladen. *Foto: Simone Naumann.*

Gleiches Prinzip mit Safari. Die quadratischen Bilder wurden mit 350 x 350 Oixeln optimiert. (Fotos: Simone Naumann) — Gleiches Prinzip mit Safari. Die quadratischen Bilder wurden mit 350 x 350 Oixeln optimiert. *(Fotos: Simone Naumann)*

Bildinformationen im Browser auslesen: So können Sie herausfinden, welche Bildabmessungen auf Ihrer Website bereits verwendet werden. Lesen Sie Abmessungen mit dem Befehl Element untersuchen (Firefox), Elementinformationen für (Safari) durch die rechte Maustaste aus. Man muss sich allerdings ein wenig mit dem HTML-Code vertraut machen. Suchen Sie nach img, fahren Sie mit der Maus über die Bilddaten, dann poppt die Info auf.

Das Bild nicht tot optimieren
Auch wenn die Webprogrammierer jetzt aufschreien werden: Qualität geht vor Größe. Wieder der Vergleich mit dem Pulli. Ein Outfit aus edlem und gut sitzendem Kaschmir überzeugt im Vorstellungsgespräch sicher mehr aus ein ausgeleierter Pullover.

Bildgröße: Im Web ist die Pixelgröße ist ausschlaggebend

Achten Sie im Web darauf, dass die Bilder kleine Dateigrößen aber trotz gute Qualität haben. Wichtig: Bereiten Sie Bilder stets manuell für Ihre Website vor. Automatisierte Abläufe sind hier nicht empfehlenswert, da jedes Bild aufgrund der Bildinhalte (helle und dunkle Bildflächen, Kontraste, etc.) andere Ergebnisse erzielt.

Auch auf Social Media Plattformen einen guten Eindruck hinterlassen
Bildformate für Social Media Plattformen ändern sich ständig. Am besten googelt man die optimalen Bildgrößen, ehe man die Bilder im Profil austauscht. Hier >> geht es zu den aktuellen Anforderungen an Bildgrößen für Facebook, Twitter & Co .

7. Bildbearbeitung
Da mein Blogbeitrag schon ziemlich lang ist, werde ich das Thema nur kurz ansprechen und es in einem künftigen Beitrag näher beleuchten und dann auch verschiedene Werkzeuge zur Bildbearbeitung vorstellen.

Bilder für die website optimiern ist mit photoshop super einfach.

Photoshop ist wohl das komfortabelste Werkzeug für die Optimierung von Bildern für Print und Web. Es wurde für die Zielgruppe der Grafiker jahrelang immer wieder verbessert. Hat natürlich auch seinen Preis und ist seit 2014 nur noch im Abo erhältlich. Der kleine Bruder Photoshop Elements kann auch viel. Dann gibt es noch Gimp und Irfan View oder Onlinetools zur Bildkomprimierung.

Welche Software Sie auch einsetzen: Nutzen Sie zur Bildbearbeitung immer ein Werkzeug, das Bilder für Websites wirklich gut optimiert. Das alleinige Umrechnen wird nicht die gewünschte Qualität bringen. Ansonsten beauftragen Sie am besten Grafiker oder Fotografen mit der Bildbearbeitung. Die haben ihr Handwerkszeug gelernt und machen den Job tagtäglich. Ich schneide mir auch nicht meine Haare selbst.

Bei der Bearbeitung von Bildern auf gute Werkzeuge oder Profis setzen

Besucher Ihrer Website nerven lange Ladezeiten und auch unscharfe Bilder kommen nicht gut an. Das Unterbewußtsein meldet: Hallo, das ist aber recht unprofessionell. Schnell weg hier. Der Einsatz von günstigen Tools, die nicht das richtige Ergebnis bringen, ist nicht zielführend.

Fazit
Mit dem siebten und letzten Tipp schließe ich den Blogbeitrag ab. Den lege ich Ihnen besonders ans Herz. Wann immer es das Budget zulässt: Arbeiten Sie mit Profis, wenn es um die Aufbereitung von Bildern für Print und Web geht. Denn oft haben Sie bei der Kundengewinnung nur eine kurze Chance, den Interessenten durch Ihre Professionalität zu überzeugen. Vertun Sie diese nicht mit schlechtem Bildmaterial!