19.09.17

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.

 
 
Hingucker_Titelbild.jpg

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.

     

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:

Wenn Sie diese ganzen Zahlen jetzt auch mehr verwirren als weiterbringen, dann wären wir im Mathematik-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 Bildinnerhalb 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 von der Kilianskirche Heilbronn zum Beispiel hat in der Version oben die Maße 640px x 400px unten in klein 320px x 200px:

     

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.

Im richtigen Dateiformat abspeichern

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

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.

 

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

Das könnte Sie auch interessieren: