Wie kann ich Bilder optimieren für die Website?

von

am

|

geschätzte Lesezeit:

7 Minuten

Disclaimer: Dieser Beitrag ist älter als zwei Jahre. Es könnte also sein, dass auch sein Inhalt in Teilen bereits veraltet ist.

Bilder optimieren: Größe und Qualität für das Internet anpassen
Bilder optimieren: 96 ppi, 1600 x 900 (Seitenverhältnis 16:9), 65% Komprimierung, Dateigröße: 495 KB

Als Betreiber einer Website stehen Sie nicht nur vor der Aufgabe, gute Texte zu verfassen. Sie sollten Ihre Seiten und Beiträge auf jeden Fall auch bebildern. Dabei sollten diese Bilder aber nicht nur gut aussehen. Sie sollten vor allem auch ihre gute Bildqualität bei möglichst kleiner Dateigröße zeigen. Die Dateigröße der Bilder, die Sie mit Ihrer Digitalkamera aufgenommen haben, sind für das Netz wahrscheinlich viel zu groß. Also müssen Sie die Bilder für Ihre Website erst einmal optimieren.

In diesem Beitrag erläutern wir die wichtigsten Begriffe und zeigen Ihnen, wie Sie Ihre Bilder bearbeiten können. Schließlich stellen wir Ihnen noch entsprechende Software sowohl für Windows als auch für Mac vor.

Bilddateiformate für das Web

Im Web gibt es drei Dateiformate für Bilder, die Verwendung finden:

  • .png für Bilder mit Transparenzen, also durchscheinenden Flächen
  • .gif für sehr einfache Graphiken oder simple Animation
  • .jpg oder .jpeg für Fotos und detailreiche Bilder

Die ersten zwei Formate sind für spezielle Zwecke gedacht, wir gehen hier nicht näher auf sie ein. Uns interessiert das .jpg Format, manchmal auch .jpeg genannt, denn die Abkürzung steht für Joint Pictures Expert Group. Eine Expertengruppe hatte sich im Jahre 1992 zusammengesetzt und das Format entwickelt. Ziel war es, ein Verfahren zu schaffen, das es möglich macht, Bilder mit möglichst geringer Dateigröße im Web (oder damals mit ISDN) zu übertragen. Das Verfahren arbeitet dabei mit einem Algorithmus, der die Bilder in der Dateigröße schrumpfen lässt. Es ist verlustbehaftet, das heißt nach dem Abspeichern als .jpg treten aufgrund der Kompression Einbußen in der Bildqualität auf. Das Verfahren arbeitet jedoch so gut, dass die Einbußen in den wenigsten Fällen wahrnehmbar sind. Näheres zum Format .jpg finden Sie bei jpg auf  Wikipedia.

Digitalkameras liefern für das Web viel zu große Bilder

Moderne Digitalkameras bieten (Stand: Oktober 2015) gern eine Auflösung von 20 Megapixeln und mehr. Dabei entstehen Dateien von etwa 16 Megabyte (MB) im .jpg Format pro Bild. Das ist gut, um Plakate zu drucken. Für die Veröffentlichung auf der Website sind derartige Dateien keineswegs sinnvoll. Im Internet geht um es möglichst kleine Dateigrößen, damit die Website schnell lädt. Nichts nervt mehr als eine Homepage, die sich quälend langsam aufbaut. Und Google belohnt Websites, die schnell laden, mit einem besseren Ranking. Es lohnt sich also in jedem Fall, die Bilder für die Veröffentlichung zu optimieren.

Pixel, Auflösung, Punktdichte DPI und PPI – was ist das eigentlich?

Pixel

ist die Maßeinheit von Bildern, vergleichbar mit der Angabe in Zentimetern. Die Einheit Pixel wird mit px abgekürzt: 1600 px. Üblicherweise steht die Breitenangabe an erster Stelle: 1600 x 900 px bedeutet, dass das Bild 1600 px breit und 900 px hoch ist. Ein Pixel an sich hat jedoch keine eindeutig definierte Größe.

Auflösung

ist ein Begriff, der umgangssprachlich vielfältig Anwendung findet. Grundsätzlich ist zu unterscheiden, ob nun von der Punktdichte (dpi oder ppi), der Gesamtanzahl der Pixel, der Benennung von Pixeln pro Breite und Höhe oder von einer rein rechnerischen Größe (meist mittels Interpolation) die Rede ist.
Kamerahersteller nutzen den Begriff gerne, um das Produkt von Höhe und Breite eines Bildes in Pixeln anzugeben und dies in Megapixeln zu benennen. Bei einem Bild mit der Größe 4608 x 3072 px ist das Produkt 14.155.776 Pixel, also rund 14,2 Megapixel. Diese Angabe sagt aber noch nichts über die Punktdichte aus.

Punktdichte

ist ein Maß für die Detailgenauigkeit, für das es unterschiedliche Maßeinheiten gibt. Wir stellen hier zwei Einheiten vor: dpi und ppi. Wenngleich sie tatsächlich zwei sehr unterschiedliche Zusammenhänge beschreiben, hat sich umgangssprachlich der Begriff dpi für die Beschreibung der Detailgenauigkeit eines Bildes durchgesetzt.

dpi

steht für dots per inch und meint die Anzahl von Druckpunkten (dots) pro Einheit Zoll (entspricht 2,54 cm). Diese Abkürzung findet Anwendung in Druckereibetrieben. 300 dpi ist der Standard für ein Bild, das gedruckt werden soll. Ein Dot ist eine Hardwareeinheit, die messbar ist: Wenn auf 2,54 cm 300 dots gedruckt werden sollen, ist das einzelne Dot ca. 0,0084834 cm groß.

ppi

bedeutet Pixel per Inch und bezeichnet die Anzahl der Pixel pro Zoll. Diese Einheit findet Anwendung bei Bildschirmen und digitalen Geräten wie Tablets und Smartphones. Auch Computerhersteller werben mit der Auflösung ihrer Geräte, benennen aber im Gegensatz zu den Kameraherstellern die Pixel pro Breite und Höhe. Einen 15,6-Zoll-Monitor können Sie kaufen mit zum Beispiel 1366 x 768 oder 1920 x 1080. Je mehr Pixel der Monitor anzeigt, umso kleiner stellt er das einzelne Pixel dar. Die Angabe ppi sagt im Gegensatz zu dpi nicht aus, wie groß das einzelne Pixel ist. Die Punktdichte eines Bildes, das für die Veröffentlichung im Internet gedacht ist, sollte nicht mehr als 72 oder 96 ppi betragen. Mehr können Bildschirmgeräte gar nicht darstellen – es sei denn, es handelt um eines mit Retina-Technologie.

Interpolation

(auch Resampling oder Bild neu berechnen) definiert, wie Ihr Bildbearbeitungsprogramm mit der Größenveränderung eines Bildes von – sagen wir – 3000 px Breite zu 1600 px Breite umgehen soll. Immerhin wollen Sie Ihr Bild fast um die Hälfte verkleinern. Da macht es schon Sinn, sich vorher Gedanken zu machen, was mit all den wegfallenden Pixeln passieren soll. Die Interpolation sollte also immer zugeschaltet sein. Die Art, wie das Programm Pixel wegrechnet, erfolgt dann nach einem komplexen Algorithmus. Sofern Ihr Bildbearbeitungsprogramm es Ihnen ermöglicht, hier eine Wahl zu treffen, empfiehlt sich die Einstellung Bikubisch oder Bikubisch glatter.

Qualitätsfaktor 

ist der Grad der Komprimierung beim Abspeichern als .jpg-Datei. In manchen Programmen finden Sie den Faktor auch unter dem Stichwort Kompression. Ein hoher Qualitätsfaktor bedeutet geringe Verluste in der Bildqualität im Vergleich zum Original, allerdings geht dies einher mit einer großen Dateigröße. Ein geringer Qualitätsfaktor führt zu kleineren Dateigrößen, kann aber auch bedeuten, dass Artefakte in Form von Schlieren, Treppen oder Klötzchen im Bild zu sehen sind. Unserer Erfahrung nach ist ein Qualitätsfaktor von 60 bis 70% in den meisten Fällen ein guter Kompromiss. Im Zweifel hilft auch hier Ausprobieren und Vergleichen.

Seitenverhältnis

drückt die Relation von Breite zu Höhe aus. Kameras liefern im Allgemeinen die Bilder in einem Verhältnis von 3:2 aus, oft gibt es auch 4:3. Computermonitore haben heutzutage ein Seitenverhältnis von 16:9 oder 16:10. Wenn Sie die Größe Ihres Bildes verändern, sollten Sie immer in Ihrer Bildbearbeitung das Häkchen für Seitenverhältnis erhalten setzen; bei einigen Programmen heißt es auch Proportionen erhalten. Wollen Sie aus einem Bild mit dem Seitenverhältnis 3:2 ein Bild im Verhältnis 16:9 machen, müssen Sie es zuschneiden. Es fallen also Teile des Bildes weg.

Original Seitenverhältnis: 3:2 im Vergleich zu Bearbeitung als 16:9
Original Seitenverhältnis: 3:2 im Vergleich zu Bearbeitung als 16:9

Kleiner immer, größer nimmer

Originalgröße: 24 x 24 px, stufenweise vergrößert
Originalgröße: 24 x 24 px, stufenweise vergrößert

Noch ein Wort zu den Möglichkeiten der Verkleinerung und Vergrößerung von Bildern: Verkleinern von Bildern ist immer machbar und bringt den Vorteil des schnelleren Ladens. Der Umkehrschluss, also kleine Bilder zu vergrößern, ist nicht zu empfehlen: Hier müssen die Programme Pixel neu hinzurechnen. Das klappt nur sehr bedingt gut: Die neu gerechneten Bilder erscheinen unscharf. Eine Vergrößerung eines Bildes um 10% ist aber machbar und bringt meist keine merklichen Verschlechterungen.

Header- oder Beitragsbilder im passenden Format erstellen

Ihr WordPress Theme arbeitet mit Header- oder Beitragsbildern in einem bestimmten Format? Das beliebte Theme TwentyTwelve arbeitet zum Beispiel mit Headerbildern im Format 950 x 260 px. Auch das Zuschneiden ist mit einfachen Grafikprogrammen möglich: In den meisten Programmen können Sie mit einem Werkzeug namens Freistellungswerkzeug oder Zuschneiden einen Teilausschnitt eines Bildes pixelgenau festlegen und so passende Bilder erzeugen.

Bilder optimieren Schritt für Schritt

Bilder pixelgenau zuschneiden

  1. Öffnen Sie das Bild
  2. Wählen Sie das Werkzeug zum Zuschneiden
  3. Geben Sie die gewünschte Breite und Höhe in Pixeln ein
  4. Geben Sie 96 als Punktdichte (pixel pro Zoll) ein
  5. Wählen Sie den passenden Ausschnitt
  6. Bestätigen den Dialog
  7. Speichern Sie Ihr Bild als .jpg mit einem Qualitätsfaktor von 60 bis 70 % ab

Seitenverhältnis eines Bildes ändern

  1. Öffnen Sie das Bild
  2. Wählen Sie das Auswahl-Werkzeug
  3. Legen Sie für die Auswahl das Seitenverhältnis fest
  4. Wählen Sie den passenden Bildausschnitt
  5. Wählen Sie im Menü Bild -> Freistellen
  6. Passen Sie über Bild -> Skalieren die Punktdichte (96 ppi) an
  7. Speichern Sie Ihr Bild als .jpg mit einem Qualitätsfaktor von 60 bis 70 % ab
Originalbild Seitenverhältnis 1:1, Verzerrung stufenweise
Originalbild Seitenverhältnis 1:1, Verzerrung stufenweise

Nun können Sie alle bearbeiteten und optimierten Bilder in die Mediathek von WordPress hochladen. Beim Hochladen erstellt WordPress noch automatisch die Vorschauen für Thumbnails sowie Darstellungen in mittelgoßer, großer und vollständiger Größe.

Nützliche Software

Eine einfache Software für die Optimierung von Bildern für das Internet ist das Programm Picasa von Google, das es sowohl für Windows als auch für Mac gibt. Unter Linux ist es immerhin in einer älteren Version verfügbar. Programme wie Paint.net für Windows oder Vorschau unter Mac OS X  bieten vergleichbare Möglichkeiten. Wer es professionell mag, investiert in das große Photoshop. Für die meisten Zwecke reicht aber auch völlig der kleine Bruder Photoshop Elements.


Beitragsbild: Thorsten Schiller

 

Schreibe einen Kommentar

Die im Rahmen der Kommentare angegebenen Daten werden von mir dauerhaft gespeichert. Cookies speichere ich nicht. Für weitere Informationen siehe bitte meine Datenschutzerklärung.

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