Website-optimierte Bilder sind keine gewöhnlichen „weboptimierten“ Bilder. Es sind Fotos und Grafiken, die auf Your Website passen, weil sie genau dafür erstellt wurden.
Dir ist das sicher schon aufgefallen: Deine Website funktioniert rein visuell, sowohl durch Formen und Bilder als auch durch Deine Kommunikation mit Texten. Du kannst sie nicht riechen, schmecken, ertasten, und in den wenigsten Fällen hören.
Deshalb spielen Bilder eine besonders wichtige Rolle auf Deiner Website. Sie lenken die Aufmerksamkeit Deiner Besucher*innen in die richtige Richtung, helfen Ihnen, Deine Inhalte zuzuordnen und besser zu verstehen, und bleiben länger im Gedächtnis.
Doch nicht jedes fantastische, x-beliebige Bild ist dazu in der Lage. Darum erkläre und zeige ich Dir in diesem Blogbeitrag, wie Du zu Website-optimierten Bildern gelangst.
Schon irgendwelche Ideen oder Fragen? 🙂
Dann lass uns mit der grundlegenden Weboptimierung beginnen!
Website- oder weboptimierte Bilder?
Wenn ich von Website-optimierten Bildern spreche, meine ich nur zur Hälfte weboptimierte Bilder. Lass mich das kurz erklären.
Weboptimierte Bilder erhältst Du für gewöhnlich von Profi-Fotograf*innen in verschiedenen Standardauflösungen, zum Beispiel 900 Pixel breit und 600 Pixel hoch.
Diese sind, sofern im Preispaket vorhanden, bildbearbeitet und in ihrer Dateigröße komprimiert. Du kannst sie danach verwenden, wie auch immer Du willst.
Weboptimierte Bilder wirken sich in erster Linie positiv auf die Suchmaschinenergebnisse aus, indem sie die Ladegeschwindigkeit Deiner Webseiten auf verschiedenen Geräten verbessern.
Du selbst kannst die Auffindbarkeit in Bild-Suchmaschinen dann steigern, indem Du Dir Dateinamen mit einschlägigen Schlüsselwörtern ausdenkst und in WordPress Alternativtexte hinzufügt. Auch das fällt mittlerweile unter „weboptimierte“ Bilder.
Im Vergleich dazu beginnt die Optimierung von Website-optimierten Bildern schon blog posts systematically der Bilderstellung, damit Deine Bilder (ganz im Sinne Deiner Marke) positiv auf Deine Traumkund*innen wirken werden.
Doch nicht alles auf einmal! Erfahre zuerst, wann Deine Bilder weboptimiert sind.
Zweckentsprechende Dateiformate (JPG oder PNG)
Das Dateiformat erkennst Du an der Endung Deiner Bilddatei. Für die Beispieldatei „marienkäfer.jpg“ wäre also JPG das Dateiformat Deines Bildes.
Jedes Dateiformat hat seine Vor- und Nachteile und eignet sich für bestimmte Bildinhalte. Hier sind die gängigsten, die im Internet dargestellt werden können:
- JPG/JPEG: Das JPG-Format eignet sich am besten für Fotos. Es sind generell kleinere, aber verlustbehaftete Dateien. Das bedeutet, dass beim Speichern allerlei Informationen (und damit die Originalqualität) des Bildes verloren gehen. Je nach Bildauflösung und Dateikomprimierung erkennst Du dann ungerade Kanten oder andere Bildstörungen, vor allem auf größeren Farbflächen.
- PNG: PNG-Dateien sind stattdessen verlustfrei und deshalb größer. Mit diesem Format stellst Du in erster Linie Bilder mit teils transparentem Hintergrund dar oder Du verwendest es, wenn Du eine höhere Auflösung brauchst. Das macht das PNG-Format perfekt für Dein Logo und andere Grafiken, denn gerade hier zeigen sich Bildstörungen am deutlichsten.
- WebP:
WebP ist ein relativ neues Format von
Google, das die
Vorteile von JPG- und PNG- Dateien vereinen soll.
- GIF: Für Animationen benötigst Du das GIF-Format. Alternativ kannst Du Animationen per CSS oder Elementor einbetten oder Dich Lotties zuwenden, die Elementor PRO ebenfalls unterstützt.
- SVG: Bei SVG-Dateien handelt es sich um kleinere, verlustfreie Vektordateien. Das bedeutet, dass sie nicht aus Pixeln bestehen, sondern aus mathematisch verknüpften Punkten, Linien und Kurven. Sie sind daher nicht von einer Auflösung abhängig und können leicht skaliert werden. Du brauchst diese Dateien zum Beispiel, wenn Du über Elementor eigene Icons einbinden willst.
Von Fotograf*innen bekommst Du in der Regel JPG-Dateien in einigen gängigen oder gewünschten Auflösungen (Breite und Höhe in Pixel). Bei Grafikdesigner*innen erhältst Du PNG-Dateien und manchmal (meist für Logo oder Icons) SVG-Dateien.
Niedrige Dateigrößen bei hoher Bildqualität
Mit der Bild- oder Dateiauflösung ist die Breite und Höhe in Pixeln gemeint. Sie sorgt dafür, dass Dein Bild einen bestimmten Bereich Deines Bildschirms einnimmt. Vergrößerst Du Dein Bild, erscheint es (im allgemeinen Sprachgebrauch) „verpixelt“.
Die Dateigröße (oder auch Dateimenge) bezeichnet stattdessen den Informationsgehalt, der „unsichtbar“ in Deiner Bilddatei gespeichert ist.
Legst Du eine geringere Dateiauflösung fest, reduzierst Du gleichzeitig die Dateigröße.
Während die Pixelauflösung die „sichtbare“ Größe Deines Bildes auf dem Bildschirm darstellt, zeigt sich die Dateigröße höchstens in ihrer Ladegeschwindigkeit. Die Dateigröße wird in Bytes (hier „kB“ für Kilobyte) gezählt.
Als
Richtwert kannst Du versuchen, Deine Dateigrößen
unter 250 kB zu halten. Doch die richtige Bildgröße hängt vom Bild selbst und Deiner Verwendung dafür ab.
Grundsätzlich gilt: Wähle Deine Bildgröße so klein wie möglich und so groß wie nötig.
Das kannst Du tun:
- In Bildbearbeitungsprogrammen wie Affinity Photo kannst Du Auflösung und Dateigröße anpassen, und die Qualität reduzieren, bis sie sich sichtbar verändert. In meinem Test konnte schon die Qualität von 95 % ein 348,60 kB großes Bild auf 136,97 kB reduzieren.
- Du kannst Dich WordPress and Elementor anvertrauen. WordPress erstellt von Deinem Bild automatisch beim Hochladen verschiedene Größen, die Du beim Einbetten auswählen kannst. Allerdings belastet das weiterhin Deinen Server.
- Um dem entgegenzuwirken, kannst Du zum Beispiel das WordPress-Plugin Smush installieren, das Deine hochgeladenen Bilder nachträglich und danach automatisch komprimiert. (Vielleicht tut das aber schon Dein Caching-Plugin.)
- Ein solches Plugin verfügt meist auch über eine Lazy-Load-Option, die Du aktivieren hast. Diese Option zum „faulen Laden“ lädt Dein Bild erst, wenn Deine Besucher*innen dessen Position auf Deiner Webseite erreicht haben.
- Oder Du ziehst Deine Fotos gleich welchen Formats auf die Webseite von TinyPNG. Es lädt ein paar Sekunden und schon kannst Du eine 110-kB-Version Deines ursprünglich 2-MB-großen Bildes herunterladen.
- Eine Alternative dazu wäre Website Planet. Die Komprimierung fällt drastischer aus als bei TinyPNG und es können bis zu 50 MB auf einmal hochgeladen werden. Wähle dieses Tool, wenn Deine Bilder unbedingt klein sein müssen (Stichwort „Infinite Scroll“ o. Ä.) oder sie 5 MB grundsätzlich überschreiten.
Deine Bilder sind natürlich nicht das einzige Kriterium für die Ladegeschwindigkeit Deiner Webseiten. Um weiterzuforschen, kannst Du zum Beispiel einen Google-Schnelligkeitstest durchführen.
Responsive Bilder für alle Bildschirmgrößen
Bis zu diesem Punkt ging es um die Optimierung am Bild selbst. Den nächsten drei Optimierungsbereichen begegnest Du jetzt beim Einbetten Deines Bildes.
Zuvor erwähnte ich bereits, dass WordPress verschiedene Dateiauflösungen für jedes Deiner Bilder anlegt, ganz automatisch:
- Vollständige Größe bzw. Originalgröße
- 2560 Pixelbreite
- 2048 Pixelbreite
- 1536 Pixelbreite
- 1024 Pixelbreite (groß)
- 768 Pixelbreite (mittelgroß)
- 300 Pixelbreite (mittel)
- 150 x 150 Pixel in Breite und Höhe (Vorschaubild „Thumbnail“)
WordPress tut das deshalb, weil Deine Website von verschiedenen Geräten mit unterschiedlichen Bildschirmgrößen erreicht werden kann.
Das bedeutet, dass je nach Art des Bildschirms oder dessen Größe Dein Bild kleiner, größer oder anders dargestellt werden muss, um seinen Zweck zu erfüllen.
Diese Anpassungsfähigkeit nennt sich Responsivität. Nicht nur Bildgrößen verändern sich dabei auf verschiedenen Bildschirmen, auch ganze Sektionen und Inhalte passen sich an die Größe des Browser-Fensters an.
Der Position Deines Bildes werden daher nicht nur eine, sondern gleich mehrere Dimensionen Deines Bildes zugeordnet.
Leider reicht das in den seltensten Fällen aus. Etwas mehr Kontrolle erhältst Du daher über manche Themes im WordPress-Customizer oder mit Elementor.
Mit den verschiedenen responsiven Anpassungsmöglichkeiten kannst Du dann Deine Bilder für verschiedene Geräte auswählen und optimieren.
Fantastisch! 👍
Bilderklärende Dateinamen
Wenn Du Deine Datei so umbenennst, dass Du den Bildinhalt auch in der Listenansicht nachvollziehen kannst, hilft das gleichermaßen Suchmaschinen wie Google.
Stelle es Dir vor: Der wahre Name meines Lieblingsbildes auf dieser Website lautet so ähnlich wie „DSC03552“. Genau! Ich erinnere mich selbst nicht daran.
Du kannst Dir sicher schon denken, dass Google solche Bilddateien links liegen lässt. Dabei gibt es eine ganze Suchmaschinensektion nur für Bilder!
Damit Du auch hier von Deinen Möglichkeiten Gebrauch machst, rate ich Dir, Deine Dateien umzubenennen. Gib ihnen inhaltsgemäße Dateinamen und trenne die einzelnen Wörter mit einem Bindestrich ab.
Alternativtexte statt Fragezeichen
Ein Fragezeichen kann beim Bild auf zwei Arten entstehen: als visueller Berechtigungs- oder Anzeigefehler, oder in den Gedanken einer bzw. eines Blinden.
Wenn Dein Bild aus irgendeinem Grund nicht dargestellt werden kann, soll stattdessen ein Text ausgegeben werden, der das Bild beschreibt. Dadurch bleibt der Textfluss und der Kontext des Textes intakt.
Wenn Du Dein Bild in der Mediengalerie in WordPress auswählst, hast Du auf der rechten Seite des Pop-ups die Möglichkeit, einen Alternativtext hinzuzufügen.
Dieser sollte nach Möglichkeit den visuellen Bildinhalt beschreiben, ohne ins Abstrakte überzugehen, und das wichtigste Schlüsselwort enthalten.
Wie sieht es mit Deinen Fragezeichen aus?
So viel zu weboptimierten Bildern. Lass uns jetzt den Schritt zu den Website-optimierten Bildern wagen!
Meine besten Tipps für Website-optimierte Bilder
Deine Website ist nicht wie jede andere: Du verkaufst einzigartige Werke oder Leistungen, hast einzigartige Geschichten zu erzählen und tust beides mit Deiner einzigartigen Persönlichkeit.
Dir schwant jetzt wahrscheinlich schon, dass diese Einzigartigkeit next einzigartige Bilder verlangt, um Einzigartiges zu erreichen.
Deshalb empfehle ich Dir nicht nur, mit passenden Profi-Fotograf*innen und ‑Grafikdesigner*innen zusammenzuarbeiten (sofern Du das nicht selbst schon bist). Ich empfehle Dir auch, sie richtig zu briefen!
Die Entstehung von einzigartigen, Website-optimierten Bildern beginnt nämlich noch vor der Bilderstellung.
Die folgenden 7 Tipps werden Dir beim Briefing helfen und dabei, mit den richtigen Bildern den Blick Deiner Traumkund*innen einzufangen.
Entwickle einen Bildstil für Deine Marke.
Ein starker Website-Auftritt ist in sich stimmig und lässt einen bleibenden Eindruck Deiner Marke zurück. Dafür müssen alle Kommunikationsebenen zusammenarbeiten.
Indem Du Dich mit den Grundlagen Deiner Markenbildung beschäftigst, schaffst Du eine Richtlinie für dieses Ziel. Natürlich betrifft das auch die Gestaltung Deiner Website.
Die Richtlinie für Deine visuellen Inhalte nenne ich „Style-Guide“. Er beschreibt Dein Webdesign, dessen Farbpalette, Formen und Effekte, sowie Schriftarten und Bildstil.
Auf Deine Bilder wirkt sich das wie folgt aus:
- Die Farbpalette bestimmt zum Beispiel die Kleidung, die Du auf den Fotos trägst, oder den Farbton der Hintergründe, vor denen Du posierst. Natürlich kommt die Farbpalette auch größtenteils in Deinen Grafiken zur Anwendung.
- Der Bildstil legt stattdessen die Art der Motive und Hintergründe fest, den Aufnahmetyp (Makro, Landschaft, Panorama etc.) und ggf. Fotofilter.
Sofern Deine Marke keine Schwarz-und Weiß-Töne vorsieht, empfehle ich Dir zudem, grundsätzlich farbige Bilder ins Auge zu fassen. Sie wirken präsenter und lebendiger.
Denke daran: Eine Marke bleibt sich treu, auch was den Bildstil angeht.
Wie sieht der Bildstil Deiner Marke aus?
Setze Deine Bilder in einen sinnvollen Kontext.
In anderen Worten: Dein Bild muss auf seiner Position einen bestimmten Zweck erfüllen oder wenigstens anhand des Kontexts Sinn ergeben.
Der Purpose besteht jedoch nicht nur darin, ein ansprechendes Gesamtbild zu formen; was natürlich auch wichtig ist.
Der Zweck des Bildes besteht in erster Linie darin, auf den Kontext des ihm zugeordneten Textes vorzubereiten und diesen so zu unterstützen, dass er richtig gedeutet wird.
Entsprechend kannst Du Dir das Bild als leichteren Einstiegspunkt in den Text vorstellen oder auch als Filter, mit dem der Text gelesen wird.
Du beginnst also nicht damit, Bilder zu sammeln und Dir dann zu überlegen, wie Du sie auf Deiner Website am besten einsetzt. Stattdessen …
- erarbeitest Du anhand Deiner Markengrundlagen ein Website-Konzept, das Dein Ziel unterstützt. Dieses enthält unter anderem die Inhaltstruktur von jeder einzelnen Webseite.
- bestimmst Du den Informationsfluss jeder Seite und erstellst passende Texte.
- definierst Du die Positionen auf jeder Webseite, die durch Bilder unterstützt werden müssen oder sollen.
- legst Du fest, welcher Bildinhalt das vermag.
Wenn Du so vorgehst, kommt nicht nur jeder Text richtig zur Geltung, sondern auch jedes Deiner Bilder.
Welches sind die wichtigsten Bilder auf Deiner Website und warum?
Schränke die Anzahl Deiner Bilder ein.
Dass jedes Bild zur Geltung kommt, ist jedoch nicht Dein einziges Anliegen. Es gibt mehrere Gründe dafür, nicht zu viele Bilder zu verwenden:
- Viele Bilder verlangsamen die Ladegeschwindigkeit Deiner Webseiten. Schon hier gilt, nur so viele Bilder zu verwenden wie nötig.
- Wenn viele Bilder im Spiel sind, leidet meist auch die Fotoqualität darunter. Es sei denn, Du investierst entsprechend viel Zeit oder Geld in sie.
- Doch noch viel wichtiger sind Deine Dich besuchenden Traumkund*innen: Keine*r von ihnen wird die Zeit oder Muße haben, sich durch x Galerie-Seiten zu klicken – auch wenn sie dadurch Deine besten Werke verpassen sollten!
Viel nützlicher ist euch beiden, ein paar ausgewählte Werke oder Projekte vorzustellen und den Bestand regelmäßig zu aktualisieren.
Falls Du trotzdem mehrere Fotos desselben Werks oder Projekts präsentieren willst, eignet sich das Format der Fallstudie.
Welche Werke oder Projekte am ehesten für diese Auswahl in Frage kommen, bestimmst Du anhand Deines Website-Ziels sowie anhand der Wünsche und Bedürfnisse Deiner Traumkund*innen.
Eigentlich stellst Du nur Deine besten Werke zur Schau bzw. jene, die Dein heutiges, eigentliches Angebot widerspiegeln. Du zeigst also nur, was Du gerne wieder schaffen willst, nicht alles Mögliche, das Du mal geschaffen hast und schaffen kannst.
Was ist mit Dir? Stehst Du gerade vor der Qual der Wahl?
Lege die Position und Größe Deiner Bilder fest.
Wenn Du weißt, warum Du welche Bilder brauchst, fehlt nur noch das wo und wie. Damit meine ich die Platzierung des Bildes auf der Webseite und dessen Auflösung.
Überlege Dir für die Platzierung, …
- ob Dein Bild im Vorder- oder Hintergrund steht.
- wie es dem entsprechenden Text zugeordnet wird und welche Proportionen es daher braucht.
- ob es teilweise verdeckt wird, wo und in welchem Ausmaß.
- welche Abstände Du zum Hauptmotiv benötigst.
Für die Bildauflösung misst Du die Bereiche auf Deiner Website am besten selbst ab.
Ich benutze dafür gerne Greenshot. Mit dem Programm kannst Du Bereiche Deines Bildschirms frei abfotografieren und Dir dabei Pixelbreite und -höhe anzeigen lassen.
Falls Du mit dem Mac arbeitest, reicht auch das Standardprogramm „Bildschirmfoto“.
Womit arbeitest Du am liebsten?
Suche Dir spezialisierte Hilfe für Deine Branche.
Deshalb würde ich Stock-Bilder vermeiden:
Sofern Du nicht regelmäßig Blogbeiträge schreibst, rate ich Dir grundsätzlich von Stock-Bildern ab. Zunächst einmal ersetzen sie keine Fotos von Dir und Deinen Werken.
Darüber hinaus müsstest Du schon über ein zahlungspflichtiges Abonnement nachdenken, je nachdem woher Du die Stock-Bilder beziehst.
Ich erkläre Dir auch warum: Du kannst davon ausgehen, dass all die kostenlosen Bilder bereits mehrfach eingesetzt werden, und dass Deine Besucher*innen diese kennen.
Wenn sie dieselben Bilder auch bei Dir sehen, ist es nicht einmal eine Frage der Authentizität. Viel dringlicher ist die Frage, ob Deine Besucher*innen dann auch etwas Neues von Deinen Textinhalten erwarten dürfen.
Finde die richtigen Spezialist*innen.
Deshalb rate ich Dir grundsätzlich zu professionellen Fotograf*innen und Grafikdesigner*innen. Schaue in ihr Portfolio und halte Ausschau nach Proben, die zu Deiner Branche und zu Dir persönlich passen.
Wenn Du Fotos von Räumlichkeiten brauchst, kannst Du bspw. mit einem reinen Portrait-Portfolio nichts anfangen.
Welches sind Deine wichtigsten Kriterien?
Sei genau beim Briefing.
Einmal entschieden, solltest Du übrigens davon absehen, sie damit zu beauftragen, „ihrer Kreativität freien Lauf zu lassen“.
Das ist nett gemeint, ersetzt jedoch nicht das nötige Briefing. Es sorgt höchstens für etliche Fragezeichen und nachträglichen, meist kostenpflichtigen Mehraufwand.
Du musst Dir bewusst sein, dass Deine Website nicht nur informiert. Sie ist auch eine wichtige Grundlage für Dein Business und dessen Erfolg.
Deine Website kann also nur ihr Ziel verfolgen, wenn Du das benötigte Material kommunizierst. Dazu gehören:
- der Purpose des Bildes auf der Webseite (das Sektionsthema)
- das Hauptmotiv und dessen Hintergrund
- der Ausdruck und die Botschaft des Bildes
- der Bildstil
- ggf. die Farbpalette
- ggf. der Aufnahmetyp und das Fotoformat
- die Proportionen der Bildinhalte (inkl. Abstände)
- die Bildgröße (in Pixel)
Ob beim Foto-Shooting alles umgesetzt werden kann, ist zwar situations- und ortsabhängig, doch es hilft den Dienstleister*innen ungemein.
Nicht nur können sie dann zielgerichtet arbeiten und ihre Zeit effektiv nutzen. Sie werden Dir auch genau sagen können, was machbar ist und was nicht.
Buche Bildbearbeitung oder Revisionen hinzu.
Du kennst das vielleicht: ein Fleck auf der Linse, das Stativ im Spiegel oder die offene Tür im Bild, die die Sicht auf private Räumlichkeiten und Objekte preisgibt.
Was hast Du schon in Deinen Bildern vorgefunden?
Damit das nicht zum Problem wird, hier das Wichtigste in Kürze:
- In den meisten Fällen ist im Fotopreis bereits die Bildbearbeitung enthalten oder wenigstens eine Revisionsrunde bei Grafiken. Manchmal aber auch nicht. Sofern Du die Bilder nicht selbst bearbeiten willst, solltest Du das in Erfahrung bringen.
- Prüfe vor einem Foto-Shooting unbedingt den Wetterbericht, denn gute Bilder brauchen gute Lichtverhältnisse. Dadurch vermeidest Du körnige Strukturen und die Farben wirken nachher nicht matt. Nicht alles lässt sich mit Fotobearbeitungsprogrammen regeln.
- Außerdem solltest Du Dir die Bilder bei der Übergabe genauestens anschauen, insbesondere Spiegelungen und scharf eingefangene Motive oder Bereiche (zum Beispiel auf Unsauberkeiten).
- Dabei hilft es übrigens, selbst einen sauberen Bildschirm zu haben, denn Deine Bilder tragen nicht die Schuld an jeder Fluse. 😊
Worauf achtest Du ganz besonders bei Bildern?
Verzichte auf Texte in Bildern.
Stative oder Flusen auf Fotos fallen beim Skalieren nicht so leicht auf, denn sie waren zum Zeitpunkt der Aufnahme ja wirklich da.
Anders ist das jedoch mit Text, der dem Bild selbst hinzugefügt wird.
Im Vergleich zu Webschriften (oder „websicheren“ Schriften) werden Texte in Bildern beim Skalieren sofort unscharf.
Das liegt daran, dass Webschriften so entwickelt wurden, dass sie sich an die Auflösung des Bildschirms und die Größe des Browser-Fensters anpassen.
Du kannst sie zusätzlich für mobile Geräte optimieren. Die Texte in Bildern wären auf mobilen Geräten allenfalls zu klein.
Die einzige Ausnahme bilden kleinere Grafiken wie Logos, die Du bereits in hoher Auflösung erhältst. Hier nimmt die Schrift proportional zur Auflösung mehr Platz ein.
Ein zweites Argument gegen Texte in Bildern ist Deine Suchmaschinenoptimierung. Google kann nichts mit vermeintlich optimierten Texten in Bildern anfangen, denn es erkennt sie nicht.
Verzichte also auf Texte in Bildern. Sowohl die Suchmaschinen als auch die Augen Deiner Besucher*innen werden sich darüber freuen!
Beispiele für Website-optimierte Bilder
Damit Dir Website-optimierte Bilder nicht als abstraktes Konzept in Erinnerung bleiben, habe ich Dir ein paar Anwendungsbeispiele für Dein Website Marketing zusammengestellt:
- Website-optimierter Sektionshintergrund
- Zielgerichtete Bild-Widgets
- Optimierung webseitenübergreifender Bilder
- Scharfe Grafiken (u. a. Dein Logo)
Was ich dabei nicht behandeln werde, sind Portfolio-Bilder. Das sind vermutlich die einzigen Bilder, bei denen eine reine Weboptimierung ausreicht.
Schließlich soll sich Deine Website nach Deinen Werken richten und nicht umgekehrt. Das gilt insbesondere dann, wenn Du Fotograf*in oder Grafiker*in bist.
Liegt Dein
Skizzenblock für die Planung Deiner Website-Bilder bereit?
Website-optimierter Sektionshintergrund
Wenn Du ein Bild in voller Bildschirmauflösung darstellen willst, handelt es sich dabei meist um einen Sektionshintergrund. Diese Bilder können die Seitenenden des Browser-Fensters erreichen, ohne durch die eingestellte Inhaltsbreite eingeschränkt zu werden.
Above-the-Fold-Sektion einer Webseite
Bestes Beispiel dafür ist ein Sektionshintergrundbild für die Above-the-Fold-Sektion. Das ist die erste, sichtbare Sektion, die Deine Besucher*innen noch vor dem ersten Scrollen sehen werden, übersetzt „oberhalb der Falte“.
Das Bild befindet sich im schraffierten Bereich hinter den verschiedenen Inhaltselementen.
In der Grafik siehst Du die maximal sichtbare Pixelauflösung einer solchen Sektion. Während die Höhe im vollständig erweiterten Browser-Fenster bis zu 970 Pixel erreicht, sind im Vollbildmodus alle 1080 Pixel Deiner Bildschirmauflösung sichtbar.
👉 In Deinen Systemeinstellungen unter „Bildschirm“ kannst Du die eingestellte Bildschirmauflösung Deines Geräts ausfindig machen.
Doch lasse Dich von Deiner Bildschirmauflösung nicht in die Irre führen. Mittlerweile gibt es ganz schicke Effekte, mit denen Du bspw. eine hintergründige Bildgalerie animieren kannst. Wenn sich das Bild dabei vergrößert, benötigst Du eine etwas höhere Pixelbreite (2048 statt 1920 Pixel).
Platzierung des Hauptmotivs im Hintergrund
Wenden wir uns nun den Inhalten zu, die Dein Bild verdecken werden.
Der wichtigste Inhalt Deines Bildes, Dein Hauptmotiv, muss schon bei der Foto-Aufnahme richtig platziert werden.
Damit das Hauptmotiv Deines Bildes sichtbar ist, musst Du wissen, wie Du Deine Sektion gestalten und deren Inhalte anordnen willst.
In unserem Beispiel sollte sich das Hauptmotiv daher nicht hinter dem Text oder genau in der Mitte befinden, sondern auf der rechten Seite.
Zusätzlich solltest Du beim Fotografieren auf Abstände über, unter und neben dem Motiv achten. Da sich das responsive Webdesign an die Größe des Browser-Fensters anpasst, könnte Dein Bild trotzdem zugeschnitten oder von Text verdeckt werden.
Vielleicht erkennst Du das besser am Beispiel eines Fotos:
Das Gesicht der Figur ist im Beispiel das Hauptmotiv und wird nicht verdeckt.
Doch es geht nicht nur um das Hauptmotiv.
Umgebung des Motivs als Texthintergrund
Auch dessen Umgebung bzw. der Texthintergrund ist wichtig. Dieser sollte für die Lesbarkeit Deines Textes entweder sehr hell oder sehr dunkel sein, und möglichst „still“ wirken.
Damit meine ich, dass nicht zu viele sekundäre Motive oder Farben mitmischen sollten. Ggf. kannst Du mit einer Feldunschärfe oder einem einfarbigem Overlay nachhelfen.
Hast Du Fragen zum Sektionshintergrund?
Zielgerichtete Bild-Widgets
Wenn Du Dein Bild dagegen in den Vordergrund stellen willst, greifst Du für gewöhnlich zum Bild-Widget; neben dem es natürlich noch weitere Möglichkeiten gibt.
Solche Möglichkeiten zur Einbindung Deines Bildes wären eine Masonry-Bildergalerie oder eine Bilderbox, die zusätzlich Text und Button enthält.
Fallbeispiel: einfaches Bild-Widget mit Portrait
Beginnen wir mit dem ersten Fallbeispiel.
Die Grafik zeigt eine zweispaltige Sektion mit einem Bild-Widget auf der rechten Seite.
Eine Person wirkt zugänglicher und das Foto selbst natürlicher, wenn sich vor ihr mehr Bild-Innenabstand befindet als hinter ihr.
Deshalb sollte sich die Person nach Möglichkeit auch der Webseitenmitte (und damit den Inhalten) zuwenden. Du fändest es sicher seltsam, wenn sie sich von ihren eigenen Inhalten abwendet oder gar von Dir als Besucher*in.
Kleiner Zusatztipp: Denke also bei Deiner Planung daran, welche Gesichtshälfte Du als Deine „Schokoladenseite“ bezeichnen würdest.
Motiv- und Format-Alternativen
Das Bild-Widget muss übrigens kein ganzes Foto enthalten, sondern könnte auch das ausgeschnittene Hauptmotiv vor transparentem Hintergrund (echtes Beispiel) zeigen oder eine Grafik.
Es darf sowohl im Landschafts- als auch im Portraitformat abgebildet werden. Das hängt ganz von dem Inhalt ab, den es begleiten soll.
Es zeigt sich jedoch immer wieder, dass Fotos im Landschaftsformat leichter an verschiedene Verwendungszwecke angepasst werden können.
Wenn Du also nach dem Foto-Shooting die Qual der Wahl hast, wähle das Landschaftsformat.
Im folgenden Bild finden die ersten beiden Tipps bereits Anwendung:
Dein Bild sollte sich auf das Hauptmotiv konzentrieren und das Hauptmotiv sollte sich der Seitenmitte zuwenden, auch wenn diese Neigung kaum wahrnehmbar ist.
Das führt mich zum nächsten Tipp und gleichzeitig zum nächsten Fallbeispiel.
Fallbeispiel: kleine Bildergalerie
Jetzt geht es nicht mehr nur um die Position, die das Hauptmotiv auf dem Bild einnimmt. Desto kleiner Deine Bilder dargestellt werden (insbesondere ohne Zoom-Option), umso weniger Hintergrund sollte zu sehen sein.
In diesem Beispiel befindet sich eine Bildergalerie in der rechten Sektionsspalte.
Wie Du siehst, konzentrieren sich die Bilder in der Galerie auf ihr jeweiliges Hauptmotiv, damit dieses leicht zu sehen ist. Das hängt jedoch nicht nur mit der Bildgröße zusammen.
Ein weiterer Grund für diese Aufteilung ist der Purpose dieser Galerie: Während ein Sektionshintergrundbild unter anderem die Funktion hat, eine bestimmte Atmosphäre zu erzeugen, sollen hier die Motive inhaltlich den Text unterstützen.
Es geht also mehr darum, Beispiele oder Symbole darzustellen, und nicht darum, die Besucher*innen mit einer neuen Umgebung vertraut zu machen.
Fallbeispiel: Avatare unter Testimonials
Ähnlich verhält es sich mit einem Avatar. Das ist ein Profilbild, auf dem in der Regel das Gesicht einer Person abgebildet ist.
Avatare kommen meist in Testimonial-Sektionen zum Einsatz. Testimonials sind positive Kund*innenstimmen.
Wahrscheinlich sind nur Icons auf Deiner Website kleiner als Avatar-Bilder. Deshalb ist es besonders wichtig, dass sich diese auf das Gesicht der Person konzentrieren.
Du hast vielleicht selbst schon Avatare mit Ganzkörpermotiven gesehen. Da ist nichts zu erkennen, oder?
Hast Du Fragen zu den Bild-Widgets?
Optimierung webseitenübergreifender Bilder
Nicht überall kannst Du die Darstellung Deiner Bilder individuell kontrollieren. Es gibt Bilder, die gleichzeitig für verschiedene Seiten herangezogen und daher unterschiedlich dargestellt werden.
Das beste Beispiel dafür sind Deine Blogbeitragsbilder. Du solltest Dir die entsprechenden Seiten vor der Bilderstellung daher gut anschauen.
Die Ansicht Deines Blogbeitrags (Single) wird durch Dein Theme bestimmt oder dadurch, wie Du die Vorlage dieser Seite in Elementor angelegt hast.
Das bedeutet, dass diese Seite für alle Blogbeiträge gleich angeordnet wird. Das gilt für die Platzierung Deiner Bilder und auch für alle anderen Einstellungen, Effekte und Stile, die Du für sie ausgewählt hast.
Dabei werden Deine Bilder manchmal durch das Design von anderen Inhaltselementen überdeckt. Wie auch beim Sektionshintergrund solltest Du eruieren, an welcher Stelle im Bild das Hauptmotiv sichtbar bleibt.
Typischerweise werden Deine Blogbeitragsbilder zudem auf Archivseiten angezeigt.
Die Archivseite gestaltest Du ebenfalls nur einmal. Im Vergleich zur Blogbeitragsseite werden die Beitragsbilder hier deutlich kleiner dargestellt und die Bildhöhe weicht ab.
Was daher auf Deiner Blogbeitragsseite funktioniert, muss noch lange nicht auf der Archivseite funktionieren. Es gilt daher, ein akzeptables Mittelmaß zu finden – und das geht in erster Linie durch eigenes Ausprobieren.
Dasselbe gilt für alle anderen Vorlagen (Templates), die Du verwendest.
Hast Du Fragen zu webseitenübergreifenden Bildern?
Scharfe Grafiken (u. a. Dein Logo)
Wenn Du einer unscharfen Grafik begegnest, geschieht das meistens auf mobilen Geräten. Doch auch auf dem Desktop hast Du vielleicht schon versucht, die Größe Deiner Grafiken anzupassen, bis sie scharf erschienen.
Und vielleicht waren sie auf Deinem Smartphone trotzdem noch verschwommen …
Besonders auffällig ist dieses Phänomen bei Grafiken, die Schriften enthalten, oder die generell kleiner dargestellt werden.
Das beste Beispiel dafür ist Dein Logo:
Dein Ziel ist es, aus einem verschwommenen Logo ein scharfes Logo zu machen.
Das Problem tritt in der Regel auf Retina-Bildschirmen auf, die über eine höhere Punktdichte (Pixel pro Zoll) verfügen. Das bedeutet, dass die Auflösung Deiner Grafiken doppelt so hoch sein muss wie auf anderen Bildschirmen.
Wenn Deine Grafik also 200 Pixel breit und 65 Pixel hoch sichtbar dargestellt werden soll, muss die Grafik eigentlich 400 Pixel breit und 130 Pixel hoch sein.
Und das ist auch schon der Trick: Du wählst ein 400-Pixel-breites Bild mit dem Bild-Widget aus und stellst dort die Größe von 200 Pixeln ein; dasselbe für die Höhe.
Schon eine Abweichung von 1 Pixel kann Deine Grafik unscharf erscheinen lassen.
Diesen Trick kannst Du übrigens auch auf alle anderen Grafiken anwenden, die Du auf Deinen Webseiten einsetzt.
Hast Du Fragen zur Schärfung Deiner Grafiken?
Summary and conclusion
Ein Website-optimiertes Bild ist nicht nur ein fantastisches Foto oder ein weboptimiertes Bild. Fantastisch kann jedes Bild sein, das einen künstlerischen Wert bereithält. Weboptimiert kann jedes Bild sein, das komprimiert und für Suchmaschinen funktionalisiert wurde.
Ein Website-optimiertes Bild wurde schon vor dem Foto-Shooting bzw. vor der Grafikgestaltung für seinen Zweck inhaltlich festgelegt.
Schließlich willst Du das volle Potenzial Deiner Website ausschöpfen und Deine Bilder auf Dein Website-Ziel hin ausrichten. Deshalb solltest Du Dich zuerst mit den Grundlagen Deiner Markenbildung beschäftigen.
Das sorgt für all die wichtigen Hinweise, die Du für Dein Website-Konzept brauchst.
Mit diesem Website-Konzept legst Du dann die Struktur und Inhalte Deiner Webseiten fest und weißt ganz genau, womit Du welche Fotograf*innen bzw. Grafikdesigner*innen beauftragst.
Verstehe mich nicht falsch: Es ist möglich, eine Website auf Basis des vorhandenen Bildmaterials zu gestalten – auch schön.
Doch Du wirst mit inhaltlichen Abstrichen rechnen müssen oder damit, für einige fantastische Bilder keine Verwendung zu haben.
P.S.: Zu meinen Text-Paketen (*) gehört die Bildplanung immer mit dazu und eine Kooperation mit entsprechenden Dienstleister*innen ist nach Absprache selbstverständlich möglich.
Your thoughts on the topic
Vor welche Herausforderungen stellen Dich Deine Bilder?
Erstellst Du Deine Bilder selbst oder lagerst Du das aus?
Welche Tipps kannst Du hinzufügen?
I am looking foward to reading from you! 😊
