Das richtige Bildformat für deine Webseite

Es gibt so viele Bildformate, aber was zum Teufel ist der Unterschied und welches Format soll ich verwenden? Auf dieser Seite zeige ich dir die grundlegenden Unterschiede zwischen den gängigen Bildformaten. Und noch wichtiger ist, dass du am Schluss weisst, welche du verwenden musst. Egal ob du das Bild für ein Word-Dokument, für deine Webseite oder zum Druck verwenden willst.

JPG, PNG, PDF, EPS, GIF, AI, SVG, PSD oh mann…

Zunächst einmal ist es wichtig zu verstehen, dass es viele unterschiedliche Datei-Formate gibt. Einige davon sind Textdokumente (DOCX), Tabellenkalkulationen (XSLX), Programmiercode (CS), Bilder (wie oben), Musik (MP3), Videos (MOV), usw. Auf dieser Seite konzentrieren wir uns auf grafische und Bild-bezogene Datei-Formate, die wir alle wissentlich (oder unwissentlich) verwenden.

Einfach ausgedrückt – Grafik- und Bildformate sind in eine von zwei Kategorien unterteilt:

  • Bitmap– oder „Raster„-Formate, die für das Web oder ein Textdokument genutzt werden
  • Vektor-Formate, die für den Druck sind.

Alle Bild-Formate, ob JPG, PNG, PDF, EPS, usw., sind entweder eine Bitmap- oder ein Vektor-Format, und es gibt einen grossen Unterschied zwischen den beiden.

Bitmap-Formate sind die, die als Raster aufgebaut sind. Also zum Beispiel 800 x 600 Pixel. Diese sehen grossartig aus, bis sie skaliert (vergrössert oder verkleinert) werden. Den beim skalieren werden sie pixelig und unscharf.

Vektor-Formate sind die Formate, die ohne Qualitätsverlust skaliert werden können. Vektor-Formate werden innerhalb mathematischer Linien statt in Pixeln erstellt, dass sie, wie das Bild in diesem Abschnitt zeigt, immer scharf bleiben und nicht wie Bitmap-Formate auf eine bestimmte Breite oder Höhe beschränkt sind. Somit sehen Vektor-Grafiken immer optimal aus.

Hattest du schon einmal ein Bild oder ein Design, das im Web grossartig aussah, aber schrecklich aussah, wenn du es vergrössert oder gedruckt hast? Genau das ist der Unterschied. Wichtig zu wissen ist, dass Programme wie Adobe Photoshop „Bitmap“- oder „Raster“-Programme sind, während Adobe Illustrator, In-Design und einige weitere Anwendungen „vektorbasierte“ Programme sind.

Bitmap-Formate

Bitmap-Formate sind auf eine bestimmte Grösse eingestellt und «pixelig», wenn sie skaliert werden.

Dateiformat: Bitmap (oder Raster)
Farbraum: RGB (Rot, Grün, Blau)
Auflösung: Zum Beispiel 800 x 600 Pixel
Dateigrösse: Je mehr Pixel ein Bild hat, desto mehr Speicherplatz braucht das Bild. (Einfach ausgedrückt)

Beliebte Bitmap-Formate sind:

JPEG oder JPG – Joint Photographic Experts Group

Das wohl häufigste verwendete Bildformat. Es kann für das Web sehr klein oder für den Druck sehr hochauflösend gespeichert werden.

PNG – Portable Network Graphics

Dieses Bildformat kann einen transparenten Hintergrund haben. Es ist ideal für das Web, aber nicht für den Druck.

GIF – Graphics Interchange Format

GIF’s sind animierte Bildformate, die häufig über soziale Medien oder Messaging-Systeme wie WhatsApp versendet werden.

PSD – Photoshop File

Bei einem PSD handelt es sich um eine Datei die von Photoshop erstellt wird. Dieses Format sollte im Photoshop zu einem JPG oder PNG exportiert werden, bevor du es online stellst.

RAW – Bildformat von einer Kamera

Beliebtes Bildformat von Fotografen. Im Gegensatz zu JPG sind im RAW-Bildformat Daten der Kamera, wie z.B. Informationen zur verwendeten Kamera-Linse oder Kamera-Sensor, gespeichert. Ausserdem werden in diesem Format mehr Informationen zum Farbraum gespeichert.

Es gibt weitere Bildformate wie z.B. TIFF und BMP, aber die oben beschriebenen Formate sind die, die am häufigsten verwendet werden, und mit denen du vertraut sein solltest.

Vektor-Formate

Vektor-Formate wurden erstellt, um ohne Qualitätsverlust skaliert zu werden. Sie werden mithilfe von mathematischen Linien berechnet. Vektor-Formate lassen sich einfach in Bitmap-Formate exportieren. Umgekehrt funktioniert dies aber nicht!

Dateiformat: Vektor
Farbraum: CMYK (Cyan, Magenta, Yellow, Black)
Auflösung: Wird automatisch auf die richtige Grösse skaliert
Dateigrösse: Dies ist stark von dem jeweiligen Dateityp abhängig. Ausserdem spielt es eine grosse Rolle wie viel Inhalt eine solche Datei beinhaltet

Beliebte Vektor-Formate sind:

PDF – Portable Document Format

PDF ist wohl der beliebteste Dateityp zum Drucken und versenden. Ein grosser Vorteil an diesem Format ist, dass die Dokumente nach der Erstellung nicht einfach abgeändert werden können.

EPS – Encapsulated Postscript

Ideal für Logos. Oft handelt es bei den Grafiken die in EPS erstellt werden um Grafiken die ein- oder zweifarbig sind, oder, die eine oder mehrere Verläufe haben.

AI – Adobe Illustrator file

Kann für den Druck verwendet werden, sollte aber vor dem Druck in der Regel als PDF oder EPS exportiert werden. Kann auch als JPG oder PNG exportiert werden.

INDD – Adobe Indesign file

Dieses Bildformat wird meistens für Broschüren und Dokumente die zum Druck gedacht sind, verwendet.

SVG – Scalable Vector Graphics

Das SVG-Format eignet sich perfekt für Logos im Web. Da dieses Dateiformat von allen Web-Browsern unterstützt wird, ohne das man dies zuerst in eine andere Datei umformatieren muss.

Auch hier gibt es weitere Vektorbasierte-Formate. Aber die, die hier aufgeführt sind, sind die, mit denen am häufigsten gearbeitet wird und mit denen du vertraut sein solltest.

Farbkreis

Der Farbraum

Den meisten Menschen ist nicht bewusst, dass es zwei verschiedene Farbräume gibt. Zum einen ist das der RGB-Farbraum (Rot, Grün, Blau) und zum anderen ist das der CMYK-Farbraum (Cyan, Magenta, Yellow, Black). Der Hauptunterschied ist der Anwendungszweck.

Monitoren wie bei PC’s, Notebooks und Smartphones bauen auf dem RGB-Farbraum auf. Das heisst, diese Monitore besitzen für jeden Pixel, den sie darstellen, drei kleine LED’s (oder eine andere Technologie) die Rot, Grün oder Blau sind. Durch das Einschalten oder das Dimmen der jeweiligen LED’s und das Verstärken durch eine Hintergrundbeleuchtung (Backlight), lassen sich Farben beliebig mischen.

Ein Drucker baut hingegen auf dem CMYK-Farbraum auf. Der grosse Unterschied ist, dass ein Blatt Papier ja keine Hintergrundbeleuchtung hat! Um eine Farbe darzustellen, müssen Farben aus dem jeweiligen Toner oder Tinten zusammengemischt werden. Der Nachteil dieser Methode ist, dass nicht so viele Farben wie auf einem Monitor dargestellt werden können. Daher können Bilder die du online gesehen und danach ausgedruckt hast, auf dem Papier ganz anders aussehen.

Stelle also immer sicher, dass du den richtigen Farbraum für den richtigen Anwendungszweck verwendest.

Die Auflösung

Ein sehr wichtiger Aspekt einer Grafik ist die Auflösung. Besonders bei einem Bitmap-Format, da es sich dabei ja um ein Raster-Format handelt. Dieses Raster ist dann in Pixel angegeben. Zum Beispiel 800 x 600 Pixel. Das heisst, es befinden sich 800 Pixel in der Breite und 600 Pixel in der Höhe.

Ein weiterer wichtiger Aspekt der Auflösung ist, auf was für eine Fläche die jeweilige Auflösung dargestellt wird. Der Unterschied siehst du, wenn du zwei PC-Monitore miteinander vergleichst. Ein Monitor mit Full-HD-Auflösung (1920 x 1280 Pixel) und ein Monitor mit 4K-Auflösung (3840 x 2160 Pixel), die Beide eine Bildschirm-Diagonale von 27 Zoll haben, sind von der Qualität ganz anders. Auf dem 4K-Monitor ist die Schrift viel klarer, da im Gegensatz zum Full-HD-Monitor, auf der gleichen Fläche 4 Mal so viel Inhalt angezeigt wird!

Beleg mit Ausrufezeichen

Die Dateigrösse

Die Dateigrösse ist sehr stark mit der Auflösung verknüpft. Bei einer Grafik im Vektor-Format spielt dies aber keine grosse Rolle. Hast du die Datei einmal, verändert sich die Dateigrösse nicht, wenn du die Grafik auf einer grösseren Auflösung darstellen möchtest. Bei Bitmap-Formaten ist dies jedoch anders. Wenn du die Auflösung einer Grafik änderst, wird sich die Dateigrösse automatisch anpassen.

Im Normalfall heisst das, dass eine Grafik mit mehr Pixel automatisch mehr Speicherplatz benötigt. Mehr Speicherplatz heisst, es dauert länger bis diese Grafik über das Internet geladen ist.

In den meisten Fällen müssen Bitmap-Bilder nicht grösser als 1920 Pixel (Breit) sein. Diese 1920 Pixel sind schon sehr hoch. Besonders für die Mobile-Ansicht. Da diese ja auch auf einer kleineren Fläche dargestellt wird! Grafiken für den Druck können hingegen 3000, 5000 oder noch mehr Pixel haben. Wenn du z.B. mit deinem Smartphone oder einer Digitalkamera fotografierst, sind die RAW- oder JPG-Dateien sehr gross. Manchmal sind diese Bilder tausende von Pixeln breit und hoch. Und das Gleiche gilt für Webseiten, die dir Bilder verkaufen. Wenn du ein Foto kaufst, ist es oft sehr gross, mit einer tatsächlichen Dateigrösse von mehreren MB (Megabytes).

Dateigrössen werden in KB (Kilobyte), MB (Megabyte), GB (Gigabyte) oder TB (Terabyte) angegeben. Es gibt auch niedrigere und höhere Dateigrössen, aber diese vier sind die häufigsten, die du sehen wirst. Bitmap-Formate sollten IMMER so klein wie möglich sein (KB). Bei Grafiken für den Druck und hochauflösende Bilder wirst du meistens Dateigrössen in MB sehen.

Wenn du zum Beispiel ein Bild mit deiner Digitalkamera aufnimmst und auf deinen Computer lädst, um es auf deiner Webseite zu veröffentlichen, könnte es 4000 Pixel breit und 6,5 MB gross sein. Das ist eine riesige Datei, die deine Webseite dramatisch verlangsamt und die vor der Veröffentlichung oder dem Versand per E-Mail optimiert werden muss. Hier gilt also: Stelle sicher, dass du deine Bilder „optimierst“ und „für das Web speicherst“, bevor du sie versendest, als E-Mail anhängst oder irgendetwas damit online machst.

Zur Erinnerung:

  • Stelle sicher, dass dein Logo als Vektordatei erstellt wurde. (Denke daran, dass Vektordateien als Bitmap / Raster-Formate wie JPG, PNG usw. gespeichert werden können, aber nicht umgekehrt!)
  • Alle Bilder, die von einer Kamera aufgenommen werden, werden riesig sein und müssen für das Web optimiert werden, BEVOR du sie auf deiner Webseite veröffentlichst oder an eine E-Mail anhängst.
  • Wenn du Bilder anhängst oder Dateien versendest, achte auf den Dateityp, die Grösse und die Auflösung, um zu sehen, ob sie vor dem Versenden optimiert werden müssen.
  • Schicke kein kleines JPG-Logo an einen Drucker, da es sich um ein Bitmap-Format handelt, das verpixelt und verzerrt wird, wenn es skaliert wird. Sende es im Vektor-Format.

Zusammenfassung

 Dieses ganze Thema um Bildformate und Dateitypen kann sehr verwirrend sein. Das verstehe ich. Aber für die Ladezeit von Webseiten spielt es eine zentrale Rolle. Ausserdem werden einige Bildformate nicht gleich gut dargestellt wie andere. Als Faustregel gilt also: «Wenn du mit Logos arbeitest, solltest du Vektor-Formate wie das SGV-Format verwenden. Wenn du mit «normalen» Bilder arbeitest, solltest du JPG, PNG oder GIF verwenden.» PNG verwendest du, wenn du Bilder mit transparentem Hintergrund verwenden möchtest und GIF’s verwendest du, wenn du animierte Bilder hast. Falls du noch Fragen hast, setze dich bitte mit mir in Verbindung. Nutze dazu das Kontaktformular. 🙂

Preise für Webseiten

Die Frage: «Was kostet eine Webseite», kann erst dann beantwortet werden, wenn der Umfang und damit der Aufwand geklärt ist. Lese hier nach, was das genau bedeutet.

Wordpress Logo

Servicepläne

Deine Investition schützt du durch Pflege und Sicherheit. Damit du aber mehr Zeit für dein Unternehmen hast, nehme ich dir diese Aufgaben gerne ab. Lese hier nach, was ich dir bieten kann.

Notebook-Arbeitsplatz mit Text

SEO-Deinstleistungen

SEO bedeutet Content Marketing. Und Content Marketing erreicht man mit Zeit oder Geld. Hier findest du alle Angaben, wie ich dich bei deinem SEO-Ziel unterstützen kann.

Ähnlich Artikel

Wieso ich Webseiten mit WordPress erstelle

Das WordPress das meistverwendete CMS (Content-Management-System) ist, liegt nicht nur daran das es kostenlos ist, mit WordPress kann man einfach (fast) alles erstellen. Egal ob du einen Blog, einen Web-Shop, eine Fan-Page oder ob du einen Membership-Bereich möchtest,...

DSGVO einfach und verständlich erklärt

An allen Ecken und Enden des Internets sehe ich immer mehr Cookie oder Datenschutz-Banner. Dies kommt nicht von ungefähr, denn die DSGVO (Datenschutz Grundverordnung) ist nun fest im europäischen Gesetz verankert. Aber was fällt unter den Datenschutz und was...

5 einfache Tipps um deine Webseite bekannt zu machen

Nachdem die neue Webseite online ist, fängt die Vermarktung an! Aber welche Möglichkeiten hast du überhaupt? Ich zeige dir hier was du mit deiner neuen Webseite machen kannst und wie du eine grossartige Online-Präsenz aufbauen kannst. 1) Verbreite die Nachricht Wenn...

Datenschutz
Suter Software, Besitzer: Rico Suter (Firmensitz: Schweiz), verarbeitet zum Betrieb dieser Website personenbezogene Daten nur im technisch unbedingt notwendigen Umfang. Alle Details dazu in der Datenschutzerklärung.
Datenschutz
Suter Software, Besitzer: Rico Suter (Firmensitz: Schweiz), verarbeitet zum Betrieb dieser Website personenbezogene Daten nur im technisch unbedingt notwendigen Umfang. Alle Details dazu in der Datenschutzerklärung.