Podcast: Download (Duration: 27:49 — 17.4MB)

Hast Du auch manchmal das Gefühl, die Bilder auf deiner Webseite entwickeln ein Eigenleben, z.B. wenn sie scheinbar willkürlich ihre Größe verändern oder plötzlich gestaucht aussehen? Dann bist Du in dieser Episode genau richtig! Heute wollen wir die technische Seite Deiner Bilder näher beleuchten und uns die Hintergründe anschauen, die zu solchen Phänomenen führen können. Dazu schauen wir uns zunächst die Grundlagen an: Was macht meine Website mit den Bildern? Es geht also diesmal nicht um die Motive, die Du auswählst, sondern nur um das technische Handling, die Formate, Auflösung, Dateigröße, Optimierung und Skalierung Deiner Bilder.

Die drei Formate: jpg, gif und png

Es gibt vor allem drei relevante Bildformate:

  • jpg; sozusagen das Standardformat für Fotos
  • gif; wird üblicherweise für Icons u.ä. verwendet
  • png; empfehlenswert für Zeichnungen und Dinge mit klaren Linien und wenig Farben. Dieses Format hat die Besonderheit, dass deine Bilder einen transparenten Hintergrund haben können. Möchtest du beispielsweise ein freigestelltes Bild von dir haben, musst du es zwangsläufig in png speichern.

Darüber hinaus gibt es noch das sogenannte RAW-Format. Das sind dann sehr große Dateien, die Fotografen in der ersten Bearbeitungsstufe nutzen.

Auflösung, Dateigröße und Optimierung

Zu unterscheiden sind zunächst die Begriffe Auflösung und Dateigröße, die jeweils unterschiedliche Werte deines Bildes angeben.

  • Die Auflösung gibt die Anzahl der Punkte deines Bildes an, also x mal y . Die Punktdichte, die sich daraus ergibt, zeigt die Qualität des Bildes an.
  • Die Dateigröße ist gleich die Größe. Ich optimiere auf meinen Standardwebseiten meist auf 1920, z.B. alle Bilder im Header etc.

Bei der Webseitenoptimierung ist die Bildoptimierung grundsätzlich ein wichtiger Punkt. Werden z.B. Bilder mit sehr großen Datenmengen eingefügt, kann es schnell passieren, dass die Seite insgesamt sehr langsam wird. Schau deshalb genau, wofür du die Bilder brauchst und schneide sie entsprechend zu. Versuche dabei, die Dateigröße so klein wie möglich zu halten.

Um das zu tun gibt es zwei Möglichkeiten:

  • Die automatische Optimierung, zum Beispiel mit plugins, wie dem EWWW Image Optimizer.  Diese optimieren sehr gut, ohne dass du eine Verschlechterung der Qualität sehen kannst.
  • Wenn du die Datei noch kleiner haben willst, gibt es außerdem Online-Services, die du dafür nutzen kannst. Was diese tun ist , dass sie die x mal y Auflösung gleich lassen, aber die Qualität etwas runterechnen, in einem Bereich, den man nicht erkennen kann. Schau dir dazu beispielsweise diese Seite an, dir ein Bild pro Session kostenlos optimiert. Auch dieser Dienst lässt sich gut dafür nutzen.

Auf der Seite https://podcast-machen.de/bilder-optimieren/ siehst du Beispiele dafür, wie sich die Bilder nach unterschiedlicher Bearbeitung verändern können.

Das Eigenleben der Webservers

Wenn sich plötzlich die Skalierung deiner Bilder verändert und dein Blogbeitragsbild in der Blogübersicht nicht mehr aussieht, wie es aussehen soll, kann das verschiedene Gründe haben. Die Bilder können vom Webserver per CSS auf fünf verschiedene Arten dargestell werden:

  • "contain"

Du hast grundsätzlich nur einen gewissen Platz zur Verfügung. Das Theme deiner Website packt nun das Beitragsbild rein und bestimmt, das es die gesamte Breite nutzt, die es zur Verfügung hat. Aus der x- und y-Komponente ergibt sich dann, wie groß das Beitragbild ist. Dieser Vorgang nennt sich “contain”, das heißt die Höhe passt sich dem Bild an. Es ist das Standardverhalten von Themes, das das Verhältnis von Höhe zu Breite gleichhält.

  • "fill"

Mit dem Kommando “fill” komprimiert der Browser das Bild in die zur Verfügung stehende Fläche und behält dabei nicht das bestehende x mal y Verhältnis bei. Das Ergebnis kann ein gestauchtes Bild sein. Wenn das passiert, achte auf diese Einstellung. Besonders Sidebar-Plugins und Themes sind hier verdächtig.

  • "cover"

Eei der Funktion “cover”, wird das Bild hochgerechnet, um die zur Verfügung stehende Fläche zu füllen. Das Verhältnis wird dabei beibehalten. Es kann außerdem zwischen einer rechts-, mittel- und linksbündigen Darstellung gewählt werden.

  • "none"

Bei der Einstellung “none” bleibt das Bild so, wie es ist dargestellt wird. Die Größe wird nicht verändert.

  • scale down

Bei “scale down” wird eine zusätzliche x oder y Eigenschaft angegeben. Das führt dann zu einer Veränderung der Bildgröße.

Hier lohnt es, sich die Widget Optionen genauer anschauen. Die Skalierung der Bilder folgt einem System, das sich leicht durchschauen lässt. Hör in die aktuelle Episode und erfahre mehr darüber!

OLAF out!