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.

Keine Neuigkeiten mehr verpassen mit dem medienkompass-Newsletter »

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, desto höher ihr dpi ist, umso höher ist die Ihre Bildqualität und damit Ihre 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 braucht 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“.

Mit diesem Format können Sie Ihre Dateien komprimieren, also kleiner machen, so dass die Dateigröße am Ende kleiner ist. So können Sie Bilder schneller hochladen und Ihre Seite braucht nicht so lange um zu laden.

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.

Beide Formate sind möglich einzusetzen. Ich würde Ihnen aber zum JPG/JPEG-Format raten, da dies am häufigsten genutzt wird und problemlos zu Händeln ist.

Autorin: Eva Rudolf


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

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


Seminartipps zur Bildbearbeitung und Gestaltung

Marie Neumann

Hallo, ich bin Volontärin in der Internet-Abteilung des Evangelischen Medienhauses in Stuttgart. Von mir erfahren Sie, wie Sie die digitalen Medien für sich nutzen können

Marie Neumann

Schreibe einen Kommentar

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