Bilder im Web richtig ausrichten, mit CSS manipulieren und für Suchmaschinen wie Google optimieren

Bilder im Web haben ein gewisses Verhalten, das dem von Text-Containern abweicht. Egal, ob Sie nun ein Background-Image responsive benötigen, sodass der daraufliegende Text nie über das Bild hinausragt oder ob Sie einfach nur Performance und SEO optimieren möchten, wir zeigen Ihnen wie Sie img-Tags und background-images in CSS3 und HTML5 definieren.

Wir zeigen Ihnen was Sie alles mit Bildern machen können, welche Dinge unmöglich sind und welche Tricks es in HTML und CSS gibt

// navigation

Blog


// content

22. Feb 2018

Das Ausgangsbild - Format, Auflösung, Kompression und Dateiname

Das Ausgangsbild ist ein Foto von Booten am Meer. Es besitzt eine Auflösung von 1620x1080 Pixeln. Das bedeutet, dass es in der Breite aus 1620 einzelnen Bildpunkten und in der Höhe aus 1080 Bildpunkten besteht. Dies können Sie nun herunterskalieren, um Speicherplatz also Bandbreite zu sparen - ein nach oben skaliertes Bild macht keinen Sinn, da die Qualität sich hiermit nicht verbessert! Das liegt daran, dass zusätzliche Informationen nicht zum Bild hinzugefügt werden, aber sehr wohl entfernt werden können. Sollten Sie Ihre Seite zum Beispiel für Mobilgeräte optimieren wollen und den Breakpoint im Bootstrap-Standard verwenden (767px Breite ist die maximale Auflösung für Mobilgeräte), könnten Sie das Bild ausschneiden und zum Beispiel eine neue Breite von 767px mit derselben Höhe von 1080px erhalten. Hierbei verlieren Sie aber einen Teil des Bildes, da Sie es ausschneiden. Beim skalierten verkleinern wird hingegen das gesamte Bild in Anbetracht der Dimension (zum Beispiel 16:9 bei Bluray Filmen) verkleinert.

Diese zwei unterschiedlichen Methoden zur Bildverkleinerung sollten Sie je nach Fall abwägen und entsprechend die richtige Methode wählen. Wenn Sie zum Beispiel die Variante 767x1080px gewählt haben, dann wird Ihr Bild im Landscape-Modus (wenn Sie Ihr Handy auf die Seite kippen) nicht komplett sichtbar sein, da die meisten Mobilgeräte ca. 300 - 500px an der kürzeren  Seite besitzen. Selbst im Portrait-Modus würde Ihr Bild nur durch zusätzliches Scrollen des Benutzers komplett zu sehen sein, da auch die längere Seite der meisten Mobilgeräte maximal 800px lang ist. Hierbei können Sie die Unterscheidung zu Retina-Displays mit doppelter Auflösung ignorieren, da dies lediglich die Qualität der einzelnen Pixel erhöht, aber nichts an der o.g. Berechnung ändert.

Der Dateiname ist boats-at-the-sea.jpg und es ist sinnvollerweise im JPG-Format gespeichert. Diesen wählen Sie bei Fotos bzw. wenn sich sehr viele unterschiedliche Farben im Bild befinden. Bei großen einfarbigen Flächen mit etwas Text oder einem kleinen Icon darauf, wählen Sie stattdessen PNG. Wenn Sie state-of-the-art Ihre Bilder präsentieren möchten, können Sie auch das brandneue WEBP-Format wählen, welches eine bessere Komprimierung bei Erhalt der Bildqualität liefert und extra für das Web entwickelt wurde (daher der Name).

Die Ergebnisse der Bilder im Original und auf 767px Breite begrenzt (iPhone 7, Portrait und Landscape)

Wie Sie sehen erhalten Sie völlig unterschiedliche Ansichten der Bilder. Funktioniert das Original gut im Landscape, ist es im Portrait-Modus sehr klein. Das neu zugeschnittene Bild mit 767px Breite funktioniert dabei gut auf Portrait, allerdings ist hier bei Landscape nur ein Teil des Bildes sichtbar. Diese zwei Möglichkeiten kann man nun mit Media-Querys oder mit srcset entsprechend kombinieren, sodass Ihr Bild immer optimal dargestellt wird, aber dazu später mehr.

Bild Dimension richtig berechnen

Ein wichtiger Indikator für optimale Bilder und deren Darstellung ist die Bilddimension. Wenn Sie zum Beispiel ins Kino gehen, sind die einzelnen Bilder dort im Format 21:9, sprich die Breite des Bildes ist ca. 2,33 mal länger als die Höhe. Bei den meisten Fernsehern ist das Format 16:9, bei einigen Computermonitoren 16:10. Früher waren Fernseher und Monitor beinahe quadratisch und hatten ein Format von 5:4 oder gar 4:3.

Nehmen wir wieder unser Beispielfoto mit 1620x1080px dann erhalten wir für dieses Bild eine Dimension von 3:2. Die breite Seite ist also 1,5 mal so lang wie die kürzere. Sie sollten also für Ihren jeweiligen Anwendungsfall die richtige Bildgröße, Dimension und Kompression herausfinden, aber wie funktioniert das?

Die richtige Auflösung der Bilder auf Ihrer Webseite wählen

Hier kommen wir nun zum wichtigsten Teil dieses Guides: Die richtige Größe Ihrer Bilder bestimmen. Dabei gibt es zahlreiche Faktoren wie zum Beispiel, ob Sie die Bilder in einer Lightbox darstellen und so das Originalbild auf der Webseite noch einmal vergrößert darstellen möchten. Hierbei empfiehlt es sich auf jeden Fall dieses vergrößerte Bild einzeln zu speichern und eben nicht die vollaufgelöste Variante beim ersten Laden der Seite anzuzeigen.

Die Auswahl der richtigen Bildgröße hängt stark von Ihrer Webseite und Ihrem Frontend-Framework ab. Wenn Sie zum Beispiel Bootstrap verwenden, besitzen Sie Container, die mit Klassen von 1/12 bis zu 100% der Seite bzw. des äußeren Containers in der Breite verwenden. Hier nun ein relativ einfaches Beispiel: Sie haben einen Container, der den halben Bildschirm auf Desktop ausfüllt (col-lg-6). Stand heute ist trotz den ersten 4k-Monitoren, dass man Bilder für Full-HD Bildschirme optimiert, da diese immer noch am weitesten verbreitet sind. Full HD bedeutet 1920px in der Breite, wovon Sie mit Ihrem Framework die Hälfte verwenden: 1920 / 2 = 960. Folgerichtig sollte Ihr Bild genau 960px in der Breite besitzen, um auf Desktop perfekt auszusehen und keine Ressourcen zu verschwenden (Ladezeit, Traffic, Input Lag etc.). Für Mobilgeräte verwenden Sie allerdings die volle Breite (col-xs-12). In diesem Fall reicht es das Bild auf 767px Breite zu begrenzen. Ob Sie dies nun machen wie oben beschrieben und das Bild abschneiden oder ob Sie es skaliert verkleinern (die Dimension bleibt exakt erhalten), bleibt dabei Ihrem jeweiligen Anwendungsfall überlassen.

Im Prinzip gehen Sie also je Bild und Container Ihre Breakpoints durch und schauen sich an wie groß der Container maximal wird. Dies sollte auf jeden Fall für Ihre maximale Auflösung ausreichen. Wenn Sie das Bild dann per Klick vergrößert darstellen wollen, können Sie hierfür die Originalquelle angeben. Bilder sollten aber nur in Ausnahmefällen (Fotostudio, Druckerei, Wallpaper für 4k-Monitore) in einer größeren Auflösung als 1920x1080px angeboten werden!

Bilder komprimieren

Sie können Bilder natürlich über die Größe wie oben beschrieben verkleinern. Jeder Pixel benötigt etwas Speicherplatz und die Auflösung wird dabei multipliziert (Mathematik: Flächenberechnung). Ein Bild mit 100x100 Pixeln hat also insgesamt 10.000 Pixel. Daher auch die Bezeichnung 5M, 8M, 12M bei Digitalkameras - dies steht jeweils für Millionen Pixel.

Besser ist es hierbei aber Tools wie kraken.io oder Google Pagespeed Insights zu verwenden. Sie sollten also beim erstmaligen Veröffentlichen neuer Bilder überprüfen, ob Google diese aufgrund Ihrer Größe ankreidet. Dazu gehen Sie einfach in die Google Pagespeed Insights und geben oben Ihre Webseiten-URL ein. Wenn bei Bildern keine Optimierungsmöglichkeit auftaucht, haben Sie alles richtig gemacht. Erscheint eine Meldung, können Sie sowohl für Mobilgeräte als auch für Desktop die entsprechenden Ressourcen (inkl. JS und CSS) ganz unten auf der Seite herunterladen und diese Assets entsprechend austauschen. Achten Sie dabei aber darauf, dass Google teilweise auch Ihre Auflösung dynamisch anpasst und es so auf anderen Geräten zu matschigen Bildern kommen kann. Besser Sie nutzen also kraken.io und stellen dort selbst ein wie Sie Ihre Bilder optimieren möchten.

Suchmaschinenoptimierung (SEO) für Bilder

Bildnamen sollten grundsätzlich sprechend angelegt werden. Vermeiden Sie unbedingt Bezeichnungen wie DSC902339894.jpg o. ä.! Vermeiden Sie Unterstriche und verwenden Sie stattdessen normale Bindestriche. Ändern Sie Bilder nicht mehr, wenn Sie einmal bei Google gerankt sind. Selbst ein Ändern der Dateigröße führt zum sofortigen Rauswurf Ihres Bildes. Ändern Sie also den kompletten Bildpfad nicht und vermeiden Sie Redirects!

Geben Sie zu jedem Bild einen sprechenden alt-Tag an, der das Bild für Screenreader und Suchmaschinen wie Google oder Bing beschreibt. Der alt-Tag zu unserem Bild ist zum Beispiel "Boote am Meer". Sie können hierbei auch expliziter werden und "Holzboote am Atlantischen Ozean" schreiben. Ebenso können Sie die alt-Tags nach Ihren Keywords optimieren, insofern das Bild auch zu diesen Schlüsselwörtern passt.

Bilder mit srcset-Attributen responsive austauschen

Hier zeigen wir am Beispiel bootstrap_package für Typo3 wie man mehrere Bildpfade je nach Auflösung des Benutzergerätes austauschen kann. Dabei wird im data-src die Originalquelle angegeben, damit Google diesen Pfad indexiert. Die anderen data-large, data-medium und data-small Attribute legen dabei die jeweilige dynamisch erstellte Variante für verschiedene Geräte bzw. Auflösungen fest. Nahezu alle modernen Browser unterstützen dies bereits und falls nicht wird als Fallback die Variante im src-Attribut ausgespielt:

html


<img src="/fileadmin/_processed_/a/e/csm_haustuer-alu_1bd483258f.jpg"
data-src="/fileadmin/user_upload/eingangsbereich-alu-haustueren-gelb.jpg"
data-large="/fileadmin/user_upload/eingangsbereich-alu-haustueren-gelb.jpg"
data-medium="/fileadmin/_processed_/a/e/csm_haustuer-alu_f10906ab51.jpg"
data-small="/fileadmin/_processed_/a/e/csm_haustuer-alu_75e6584fc1.jpg"
data-extrasmall="/fileadmin/_processed_/a/e/csm_haustuer-alu_1bd483258f.jpg"
title="Haustüre aus Aluminium jetzt günstig kaufen"
alt="Haustüre aus Aluminium"
class="lazyload" data-preload="false" style="opacity: 1;">

Sie können und sollten hier natürlich eine dynamische Variante Ihrer Bilder ausspielen. Das heißt, dass Sie eben nicht jedes Bild einzeln anpassen und dann hochladen und einbinden, sondern zum Beispiel über den Fluid-Image-Viewhelper entsprechend Varianten ausschneiden oder verkleinern. Dies funktioniert tadellos über Image Magick, die PHP Library, die Bildbearbeitung on the fly ermöglicht.

Das richtige CSS für optimal funktionierende Bilder im Web

Jetzt werden wir technisch und definieren die Standards für die Darstellung unserer Bilder. Im Prinzip gibt es zwei Möglichkeiten:

  1. Bilder immer so breit darstellen wie der Container ist und im Einzelfall diese Breite anpassen
  2. Bilder maximal so breit darstellen wie der Container es vorgibt

css


/* 1. immer 100% Breite */
img {
width: 100%;
height: auto;
}

/* 2. maximale Breite */
img {
max-width: 100%;
height: auto;
}

Wir wollen in 99% der Fälle natürlich nicht, dass unsere Bilder über Container hinausschießen, falls deren Auflösung größer ist als das jeweilige Gerät oder der äußere Wrapper. Die Unterschiede zwischen den beiden Varianten liegen auf der Hand: Wenn Sie viele kleine Bilder (zum Beispiel Icons, Firmenlogos etc.) besitzen, sollten Sie Variante zwei wählen, da ansonsten all diese Bilder in der Breite auf die Größe des äußeren Elementes gezogen werden und Sie dann an vielen Stellen mit einer weiteren Klasse Überschreibungen vornehmen müssten.

In allen anderen Fällen empfehlen wir die erste Variante.

Mit "height: auto" legen Sie dann fest, dass die Höhe sich dynamisch aus der jeweiligen Dimension ergibt. Hierzu wieder ein kurzes Beispiel: Ihr Bild besitzt die Auflösung 1500x1000px und wird nun auf einem Mobilgerät mit 400x700px angezeigt. Da Sie es nicht optimiert haben, also immer noch das Originalbild dargestellt wird, Sie aber zumindest unsere CSS Anweisungen implementiert haben, wird dieses Bild nun (bei col-xs-12 oder außerhalb aller Bootstrap-Klassen, da es sich dann an der Gerätebreite orientiert) in 400px Breite angezeigt. Es wird also knapp viermal kleiner dargestellt als es egtl. in der Breite ist. Dabei wird es nun in der Höhe skaliert verkleinert (height: auto) und ist somit ca. 250px hoch.

Wenn Sie height: auto nicht definieren oder es durch fixe Werte ersetzen, kann es passieren, dass Ihre Bilder gestaucht oder gezerrt dargestellt werden. Das sollten Sie in jedem Fall vermeiden, da diese Art der Darstellung bereits in den 1990ern ausgestorben ist!

Unser Beispielbild mit fixer Höhe von 150px aber 100% Breite

Boote am Meer

Background Images per CSS einrücken bzw. zuschneiden

Viele der o.g. Punkte gelten nicht für Hintergrundbilder. Diese werden zum Beispiel von Suchmaschinen ignoriert und so benötigen sie keinen alt-Tag. Es sind außerdem keine block-Elemente, sondern benötigen einen Container, der ihre Höhe und Breite vorgibt. Dabei kann man auch die Textlänge verwenden und dann entsprechend das Hintergrundbild über Cover oder Contain den kompletten Container ausfüllen oder das Bild vollständig im Container anzeigen.

Was viele nicht wissen, ist, dass man per CSS auch Hintergrundbilder einrücken kann. Wenn Sie sich zum beispiel unseren Banner ganz oben unter der Navigation ansehen, werden Sie feststellen, dass bei kleineren Auflösungen eben nicht der Bildmittelpunkt dargestellt wird, sondern der rechte Teil mit den Booten.

Dies erreicht man über folgende Anweisung:

css


element.style {
background-image: url(/fileadmin/user_upload/renoi/article/img/boats-at-the-sea.jpg);
background-position: 80% 50%; /* rücke das Bild horizontal auf 80% und vertikal zentriert */
height: 700px; /* ein Hintegrundbild benötigt eine Höhe */
background-size: cover; /* das Bild soll den Container komplett ausfüllen, es kann dabei etwas vom Bild abgeschnitten werden */
margin-bottom: 80px;
padding: 5%;
margin: 0px auto;
font-size: 200%;
text-align: center;
color: white!important;
}

/* Weitere Beispiele für background-position */
.left {
background-position: 0% 50%
}
.right {
background-position: 100% 50%
}
.bottom-left {
background-position: 0% 0%
}
.top-right {
background-position: 100% 100%
}

Bildbearbeitung per CSS Filter-Eigenschaft

Möchten Sie nun noch weitere Anpassungen an Ihren Bildern vornehmen, können Sie dies natürlich über Photoshop machen. Es empfiehlt sich aber aus zwei Gründen CSS vorzuziehen. Zum einen sparen Sie dadurch Speicherplatz und Bandbreite, da Sie die selbe Datei nicht mehrfach zur Verfügung stellen müssen. Und zum anderen bieten CSS Filter den Vorteil Animationen nutzen zu können.

In unserem Beispiel drehen wir beim Hover den Farbwert um 90 Grad. Hierdurch ist beispielsweise für eine Shopseite das Wählen der Produktfarbe möglich, obwohl man das Bild nur in einer einzigen Farbe vorliegen hat. Dabei sollten Sie alle Produkte zum Beispiel im selben Grauton hinterlegen, um so über die immer gleiche Farbauswahl die Farben gleichermaßen wählen zu können.

Boote am Meer

hmtl


<style>
.filterImg {
transition: 1.5s;
}
.filterImg:hover {
filter: hue-rotate(90deg);
}
</style>

<img src="/fileadmin/user_upload/renoi/article/img/boats-at-the-sea.jpg" class="filterImg" alt="Boote am Meer">
Rating: 4.0. 1 Bewertung(en).
1 anonyme Bewertungen
No rating done at all.
Dein Voting war (0 von 5) Du bist nicht eingeloggt.
Um persönliche Votings abzugeben, kannst du dich einloggen.
Click the rating bar to rate this item Please log on to do ratings

Kommentare

comments powered by Disqus