Ein echter Hingucker: Bilder für’s Web richtig bearbeiten

Zu groß, zu klein, verschwommen – so bringen Sie Ihr Web-Foto in die richtigen Maße.

Hier behalten Sie einen Überblick wie Sie Bilder am besten fürs Internet bearbeiten

Bilder für’s Internet bearbeiten: Hier bekommen Sie einen Überblick

Sie haben ein schönes Bild gemacht und möchten das auf Ihre Internetseite stellen? Dazu sollten Sie das Bild vorher bearbeiten. Einheitliche Bildgrößen auf Ihrer Internetseite sorgen für Struktur. Außerdem ist die Größe der Bilddatei wichtig, denn je größer das Bild, desto länger lädt die Seite. Auch das Dateiformat und der Bildausschnitt sollten Sie beachten. Hier bekommen Sie einen Überblick, wie Sie Ihre Bilder für Ihre Internetseite optimal bearbeiten können.

 

Überblick: Wie bearbeite ich Bilder für's Web?

Kurz und kompakt für Sie zusammengefasst: Bildbearbeitung für’s Web.

Die optimale Bildgröße für das Internet

Der aktuelle Trend geht dahin: je mehr Bilder und je größer sie sind, desto schöner wird die Internetseite. Allerdings gilt auch, je größer das Bild, desto länger dauert die Ladezeit. Bei einer schlechten Internetverbindung und ungeduldigen LeserInnen, kann eine lange Wartezeit dafür sorgen, dass sie Ihre Webseite schnell wieder wegklicken. Auch für Ihre Auffindbarkeit im Netz ist eine kurze Ladezeit wichtig: je schneller Ihre Seite lädt, desto höher werden Sie im Suchmaschinenranking einsortiert. Wenn Sie mehr zum Thema Suchmaschinenoptimierung (SEO) erfahren möchten, empfehle ich Ihnen diesen Artikel.

Die Bildgröße beschreibt das Volumen des Bildes. Dabei sind die Bildgröße und die Dateigröße miteinander verknüpft. Schauen wir uns das ganze doch im Detail an:

Was sagt die Dateigröße aus?

Die Dateigröße sagt aus, über wie viele Bytes (Kilobyte oder Megabyte) ein Bild verfügt. Kurzum: wie viel Speicherplatz braucht das Bild?Aber was heißen diese Einheiten überhaupt? Damit Sie nicht in Schleudern kommen, hier eine kleine Übersicht:

Wie groß ist ein Bit? Wie viele Bit sind ein Byte? Hier finden Sie eine Übersicht über die Dateigrößen

Hier bekommen Sie eine Übersicht über die verschiedenen Dateigrößen.

Wenn Sie diese ganzen Zahlen jetzt auch mehr verwirren als weiterbringen, dann wären wir im Mathe-Unterricht die besten Freunde geworden. Ich versuche es etwas anschaulicher.

  • Kilobyte: Websites, E-Mails und Textdokumente bewegen sich (im Idealfall) in diesem Bereich. Eine Diskette kann bis zu 1440 KB speichern
  • Megabyte: Fotos von Digitalkameras oder zum Beispiel digitale Musik werden in dieser Größe abgespeichert. Auf eine CD passen ca. 700 MB
  • Gigabyte: in dieser Größenordnung befinden sich digitale Videos oder zum Beispiel die Datensicherung Ihres PCs. Auf eine DVD passen bis zu 4,7 GB

In diesem Fall heißt die Devise: weniger ist mehr. Möchten Sie ein Bild innerhalb Ihres Textes einbinden, sollte Ihr Bild eine Größe von 200 KB nicht überschreiten.

Diese Bildmaße sind ideal für Ihre Website

Die Bildgröße beschreibt die Anzahl der Pixel. Je mehr Pixel, desto größer ist Ihr Bild. Je mehr Pixel pro Zoll, desto höher die Auflösung.

Als Maximalgröße für Ihr Bild im Netz sollten Sie 2000px nicht überschreiten.  Die ideale Größe liegt zwischen 600px und 2000px.

Hier einige Beispiele:

  • Soll das Bild neben einem Text stehen und nicht vergrößert angesehen werden, empfiehlt sich eine Bildlänge von 200 bis 300 Pixeln
  • Wenn das Bild durch einen Klick vergrößert werden soll, sollten Sie die Breite zwischen 600 und 2000 Pixel auswählen.
  • Wenn ein freistehendes Bild über die gesamte Breite einer Webseite angezeigt werden soll, wählen Sie zwischen 600 und 2000 Pixel aus.

Dieses Bild zum Beispiel hat die Maße 640px x 400px:

Die Kilianskirche mit den Maßen 640x400 Pixeln. Die Datengröße beträgt 41KB.

Beispielbild: Kilianskirche in Heilbronn.

Zum Vergleich: Dasselbe Bild mit den Maßen 320px x 200px:

Die Heilbronner Kilianskirche als Beispielbild in den Maßen 320x200 Pixel. Dateigröße 14KB.

Beispielbild 2: Kilianskirche in Heilbronn mit den Maßen 320×200 Pixel.

Wenn Sie diese Vorgaben einhalten, können Sie garantieren, dass die Seite zügig lädt. Auch, wenn Sie mobil vom Smartphone aufgerufen wird.

Sie können Bilder mit allen gängigen Fotobearbeitungsprogrammen komprimieren, zuschneiden oder verändern. Eine kostenlose Bildbearbeitungssoftware ist zum Beispiel IrfanView. Eine Anleitung zu dem Programm können Sie hier finden.

Tipp: Wenn Sie sich jetzt fragen, woher weiß ich denn wie groß mein Bild ist und welche Dateigröße es hat – ganz leicht. Sie klicken mit Ihrer rechten Maustaste auf das Bild, dass Sie gerne bearbeiten möchten. Unter dem Reiter „Eigenschaften“ wird Ihnen die Größe angezeigt. Wenn Sie jetzt im oberen Reiter des neu geöffneten Fenster auf „Details“ klicken, sehen Sie auch die Pixel-Angaben.

Die Bildauflösung fürs Web anpassen

Die Auflösung eines digitalen Bildes wird in dpi oder ppi gemessen. Das steht für dots per inch bzw. pixels per inch. Je höher die Auflösung Ihres Bildes, desto höher auch die Anzahl der Punkte auf Ihrem Bild. Heißt auch, je höher die dpi-Zahl ist, umso höher ist die Bildqualität und damit die Bildgröße.

Wenn Sie ein Foto von Ihrer Digitalkamera auf den PC laden, ist in der Regel die Bildauflösung bei 72dpi.  Das heißt, pro 2,54cm (1 inch = 2,54cm) sind 72 einzelne Bildpunkte auf Ihrem Foto. Diesen Wert können Sie auch verändern. Wenn Sie das Bild auf Ihrer Website oder in einem sozialen Netzwerk einsetzen möchten, ist ein Wert von 120 dpi/ppi ausreichend. Auch das können Sie zum Beispiel über das Bearbeitungsprogramm IrfanView machen.

Zum Vergleich: wenn Sie ein Bild in einer Modezeitschrift abdrucken möchten, brauchen Sie mindestens eine Auflösung von 300dpi. Für ein Bild in einer Tageszeitung genügt die Auflösung von 120dpi.

Im richtigen Dateiformat abspeichern

Wenn Sie Ihr Bild abspeichern möchten, zeigt Ihnen Ihr Bildbearbeitungsprogramm vermutlich unzählige Dateiformate an. Für das Abspeichern im Web sind für Sie vor allem JPG oder PNG Dateien wichtig.

JPG oder auch JPEG

Dieses Format ist das bekannteste Fotoformat. Wenn Sie zum Beispiel eine Digitalkamera haben, dann hat diese Ihre Bilder bereits im JPG-Format abgespeichert. Die Abkürzung JPG steht übrigens für „Joint Photographic Experts Group“.

JPG-Bilder eignen sich für Online-Anwendungen, wenn Fotos z. B. im Web zum Einsatz kommen. Die Dateigröße fällt gering aus, ohne dass Sie dabei zu hohen Qualitätsverlust verzeichnen müsst. Auch für Vorschaubilder, die per E-Mail versandt werden, eignet sich das Format oder – in hoher Auflösung abgespeichert – für den Druck. Hierbei aber nie ein kleines Bild hochrechnen. Die Bildinformationen werden bei JPGs während der Komprimierung gelöscht und können beim Vergrößern nicht mehr hergestellt werden.

Tipp: Bei einem JPG-Format empfehlen wir eine Komprimierung von circa 60 bis 75 Prozent. Aber achten Sie darauf, dass ihr Bild keine „Schlieren“ bekommt.

Die Bilder zeigen einen Vergleich: oben im Bild zieht es Schlieren, weil es zu niedrig komprimiert abgespeichert ist, unten ist die Darstellung weitaus klarer.

Das Bild oben zeigt eine niedrigere Qualität beim Abspeichern des Bildes – Achtung hier sind Schlieren entstanden. Das Bild unten ist das Originalbild.

PNG

Vielleicht ist Ihnen auch schon mal die Formatendung .png aufgefallen? Das ist neben JPG das zweithäufigste Bildformat, das im Netz verwendet wird. Auch dieses Format kommt aus dem Englischen und steht für „Portable Network Graphic“. Genau wie das JPG-Bild kann es in Maßen komprimiert (verkleinert) werden, ohne sichtbaren Qualitätsverlust. Das Format löst den Verkleinerungsvorgang dadurch, dass dem Bild Farbanteile entnommen werden. Das merken Sie, wenn Sie ein Bild sehr stark komprimieren, dadurch verliert es an Farbelementen und es wirkt unnatürlich.

PNG-Bilder eigenen sich für Webdesigns, Logos, Illustrationen und für Grafiken. Man kann sie sehr stark komprimieren und dann mit geringen Dateigrößen hantieren. Wenn man mit Bildern arbeitet, in denen weniger detailreiche Farben und Elemente vorkommen, eignet sich dieses Format ebenfalls gut. Der größte Vorteil von PNGs ist, dass solche Bilder mit transparentem Hintergrund eingesetzt werden können. Als PNG abgespeicherte Illustrationen und Designs lassen sich ohne Probleme über Hintergründe legen. Fotos lassen sich besser und mit kleinerer Dateigröße als JPG speichern.

Autorin: Eva Rudolf


Keine Tipps mehr verpassen und bequem per E-Mail zugeschickt bekommen:

⊗ 1 x pro Monat ⊗ jederzeit kündbar ⊗ Keine Datenweitergabe an Dritte

Newsletter-Anmeldung

  • Dieses Feld dient zur Validierung und sollte nicht verändert werden.
Der Newsletter wird über den Versanddienstleister CleverReach versendet, bei dem Ihre Daten nach Ihrer bestätigten Anmeldung gespeichert werden. Hinweise zum Anmeldeverfahren, Versanddienstleister, zur statistischen Auswertung und zum Widerruf finden Sie in unserer Datenschutzerklärung.

Mehr zum Thema „Bilder im Web“ finden Sie hier:

Bilder für die Website – woher nehmen, wenn nicht stehlen?


Seminartipps zur Bildbearbeitung und Gestaltung

2 Kommentare zu Ein echter Hingucker: Bilder für’s Web richtig bearbeiten

  1. Avatar RiskIt sagt:

    Bitte überarbeitet den den kompletten Abschnitt „Im richtigen Dateiformat abspeichern“. Ich lese dort kaum etwas richtiges, bzw. nur halb-wahres. Wichtig ist hierbei die Nennung des Alphakanals bei PNG. Auch die verlustfreie und verlustbehaftete Kompression sollten erklärt werden.
    Ein blindes Raten zum JPG-Format zeugt von mangelndem Verständnis der beiden Formate und sollte bitte nicht an Leser weitergegeben werden.

    • Lieber Herr RiskIt,

      danke für Ihre Rückmeldung. Für unsere Leserinnen und Leser ist es einfach nur wichtig zu erfahren, wie sie Ihre Fotos von ihrer Digitalkamera webtauglich bekommen. Deshalb ist die Erläuterung der Bildformate sehr reduziert. Auch wären hier Ausführungen zu Kompressionsalgorithmen, den verschiedenen Farbtiefen usw. nur verwirrend. Es ist etwas übertrieben zu sagen, der Abschnitt enthält kaum richtige Informationen. Sie haben jedoch recht, dass ein paar Punkte ergänzt werden können, was wir bei den beiden Bildformaten getan haben.

      Beste Grüße aus dem Medienhaus

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.