Hero-Images – Große Bilder als Blickfang
- 30min
- mittel
- Kenntnisse in
Hero-Bilder (engl. hero images)[1] sind großflächige Bilder, die sich über einen wesentlichen Teil des Viewports erstrecken und die Aufmerksamkeit auf sich ziehen.
Hero-Bilder finden sich häufig auf Startseiten und Landing Pages. Sie können als Rastergrafik, SVG oder Video eingebunden werden. Entscheidend ist dabei nicht nur eine ansprechende Gestaltung, sondern auch ein klarer Bezug zum Inhalt der Webseite.
Mittlerweile surft eine Mehrheit mit Mobilgeräten und möchte die gleichen Inhalte – und Bilder – wie Desktop-Nutzer sehen. Dem stehen aber immer noch geringere Übertragungsraten in Mobilfunknetzen gegenüber. So stellt sich die Frage, wie man Nutzern von Mobilgeräten leichtgewichtige Bilder zur Verfügung stellt, während für den Desktop durchaus hochauflösende Bilder mit mehreren MB Speichergröße abgerufen werden können.
Inhaltsverzeichnis
Was ist ein Hero-Image?
Ein Hero-Image ist ein großflächiges Bild, das meist einen wesentlichen Teil des Viewports einnimmt und häufig als Hintergrund für eine Überschrift und weitere Inhalte dient.
Rastergrafiken sollten in unterschiedlichen Bildgrößen vorhanden sein, von denen der Browser dann die passende Version auswählt. Bei unterschiedlichen Proportionen oder Bildausschnitten können mit Art Direction auch verschiedene Bildvarianten bereitgestellt werden.
Früher galt als Faustregel, dass ein Bild ungefähr so viele Pixel breit sein sollte, wie der dafür vorgesehene Bereich auf dem Bildschirm. Mit hochauflösenden Displays hat sich dieses Verhältnis verändert: Ein CSS-Pixel entspricht nicht notwendigerweise einem physikalischen Pixel. Auf Displays mit hoher Pixeldichte können Bilder mit geringer Auflösung deshalb unscharf oder verpixelt erscheinen.
Für Hero-Images sollten Sie daher ausreichend große Bilddateien bereitstellen. Gleichzeitig wäre es jedoch unnötig, jedem Besucher das größte verfügbare Bild zu übertragen. Mit srcset, picture und – bei CSS-Hintergrundbildern – image-set() kann der Browser eine passende Variante auswählen.
Auf Bildschirmen mit einer hohen Pixeldichte sehen Grafiken besser aus, wenn sie größere Abmessungen haben. Damit die Dateigröße nicht ins Unermessliche steigt, ist es möglich und völlig unproblematisch, die Kompression eines .jpgs auf 25% oder weniger zu reduzieren.
Hero-Images mit HTML
Grundsätzlich sollte man sich bei jedem Bild immer fragen, ob es Verzierung oder Inhalt ist?
In unserem Fall wollen wir davon ausgehen, dass es Teil des Inhalts ist. Es soll also nicht nur den Hintergrund schmücken, sondern eine inhaltliche Aussage vermitteln.
img mit srcset
In diesem Fall ist das klassische img-Element die passende Wahl. Dadurch kann das Bild mit einem Alternativtext versehen und mit den Möglichkeiten für responsive Bilder an unterschiedliche Bildschirmgrößen und Pixeldichten angepasst werden.
<img src="Monumentvalley-1920.jpg"
srcset="Monumentvalley-1200.jpg 1x,
Monumentvalley-1920.jpg 2x"
alt="Panorama Monument Valley - Quelle Wikipedia"
>
Mittels des srcset-Attributs kann man dem Browser mehrere Versionen der Grafik zur Verfügung stellen:
Da der Browser die referenzierten Grafiken nur im Bedarfsfall laden soll, wird mit dem dazugehörigen x-Wert übermittelt, welches Bild für hochauflösende Bildschirme verwendet werden soll. Der Browser kann dann selbst entscheiden, welche Bilder geladen werden sollen.
Falls der Browser das srcset-Attribut noch nicht kennt, wird es ignoriert und stattdessen die im herkömmlichen src-Attribut referenzierte Bildquelle geladen.
Alle Bilder teilen sich ein alt-Attribut, mit dem die Zugänglichkeit gewahrt wird.
Resolution Switching mit srcset
Seinen wahren Nutzen erreicht das srcset-Attribut aber, wenn dem Browser mehrere Grafikversionen für verschiedene Auflösungen vom kleinen Mobilgerät bis zum übergroßen 4k-Monitore zur Verfügung gestellt werden und mit dem dazugehörigen w-Wert die Breite der Bilder übermittelt wird.
Der Browser kann dann selbst entscheiden, welches der referenzierten Bilder am Besten zur vorhandenen Bildschirm-Auflösung (screen resolution) passt und geladen werden soll. Die Pixeldichte wird automatisch berücksichtigt; Retina-Displays entscheiden sich entsprechend für größere Bilder.
<img src="Monumentvalley-1920.jpg"
alt="Panorama Monument Valley - Quelle Wikipedia"
srcset="Monumentvalley-600.jpg 600w,
Monumentvalley-1200.jpg 1200w,
Monumentvalley-1920.jpg 1920w" >
Für das Panoramabild werden drei verschiedene Versionen zur Verfügung gestellt. Die Breiten der einzelnen Versionen werden dem Browser über den w-Wert mitgeteilt.
So kann der Browser selbst entscheiden, welches der referenzierten Bilder er laden will.
Eine Drehung des Bildschirms z.B. bei einem Tablet benötigt diese Vorgehensweise mit dem picture-Element.
Gestaltung mit sizes
Das sizes-Attribut kann in Verbindung mit srcset nicht nur auflösungsabhängig verschiedene Grafiken laden, sondern diese nach Medienmerkmalen (media condition) auch unterschiedlich anzeigen.
<img src="bild.jpg"
alt="Alternativtext"
srcset="bild.jpg 800w,
bild-gross.jpg 1920w"
sizes="(min-width: 60em) 50vw,
100vw"
>
Wenn das Browser-Fenster breiter als 60em ist, wird dieses Bild wahrscheinlich in der halben Breite dargestellt; bei kleineren Viewports aber über die gesamte verfügbare Breite.
In der praktischen Umsetzung ergeben sich einige Probleme, die im folgenden Beispiel erklärt werden.
<img src="Antelope-1-klein.jpg"
alt="Lower Antelope Canyon - Quelle Wikipedia"
srcset="Antelope-1-klein.jpg 600w,
Antelope-1-mittel.jpg 1200w,
Antelope-1-gross.jpg 1920w"
sizes="(min-width: 35em) 50vw,
(min-width: 50em) 33vw,
100vw">
<img src="Antelope-2-klein.jpg"
alt="Lower Antelope Canyon - Quelle Wikipedia"
srcset="Antelope-2-klein.jpg 600w,
Antelope-2-mittel.jpg 1200w,
Antelope-2-gross.jpg 1920w"
sizes="(min-width: 35em) 50vw,
(min-width: 50em) 33vw,
100vw">
Für das Panoramabild werden drei verschiedene Versionen zur Verfügung gestellt. Die Breiten der einzelnen Versionen werden dem Browser über den w-Wert mitgeteilt.
Zusätzlich wird nun mit dem sizes-Attribut die je nach Medien-Merkmal unterschiedliche Breite angegeben.
- Auf schmalen Bildschirmen nimmt die Grafik die gesamte Breite ein.
- Ab einer Viewport-Breite von
25emwird die Grafik in einem 2-spaltigen Layout auf50vwder Breite begrenzt (Die Einheit vw bezieht sich auf die Breite des Viewports). - Bei großen Bildschirmen ab
50emnimmt sie nur noch ein Drittel der Breite ein.
sizes-Attribut nicht die Größe der Darstellung, sondern hilft dem Browser zu entscheiden, welche Versionen er laden soll.Die Größe der Darstellung wird über Media Queries geregelt.
article img {
width: 100%;
}
@media all and (min-width: 35em) {
article img {
width: 49%;
}
}
@media all and (min-width: 50em) {
article img {
width: 32.5%;
}
}
Nach dem Grundsatz mobile first! erhalten Bilder die volle Breite der article-Elements.
Wenn der Viewport breiter als 35em ist, nimmt das Bild die Hälfte, bei einer Breite von mehr als 50em ein Drittel des Viewports ein.
Das picture-Element als Container
Das picture-Element ist ein Container, mit dem man mehrere Bildquellen referenzieren kann. Dadurch können mehrere Bildversionen für verschiedene Pixeldichten, Auflösungen und Bildschirmformate zur Verfügung gestellt werden, aus denen der Browser dann die am besten passende Grafik auswählt und lädt.
<picture>
<source media="(max-width:1000px)"
srcset="bild-gross_1x.png 1x, bild-gross_2x.png 2x, bild-gross_3x.png 3x">
<source media="(max-width:600px)"
srcset="bild-mittel_1x.png 1x, bild-mittel_2x.png 2x, bild-mittel_3x.png 3x">
<source media="(max-width:400px)"
srcset="bild-klein_1x.png 1x, bild-klein_2x.png 2x, bild-klein_3x.png 3x">
<img src="picture.png" alt="picture"">
</picture>
Werfen wir nun einen genaueren Blick auf die beiden Elemente, die ins picture-Element eingebettet sind: source und img.
Der Browser sucht nach dem ersten source-Element, dessen Media Query zur momentanen Viewport-Breite passt, und zeigt dann das passende Bild aus dem srcset-Attribut an. Das img-Element ist als letztes Kind des picture-Elements vorgeschrieben und dient als Fallback-Lösung, falls keins der source-Elemente passt.
Art Direction
Panoramabilder von weiträumigen Landschaften und Gebirgsketten entfalten ihre volle Wirkung nur bei großen Abmessungen. Auf kleineren Bildschirmen lässt eine skalierte Miniansicht aber nur wenig Einzelheiten erkennen. Ein einzelner Gipfel sieht hier besser aus.
Diese Veränderung des Seitenverhältnisses oder Bildausschnitts, in der Fachliteratur Art Direction genannt, erfordert das Anlegen verschiedener Bilder und eine sofortige Anpassung bei einer Veränderung der Auflösung.
<picture>
<source media="(min-width: 50em)"
srcset="TotemPole-2000.jpg">
<source media="(min-width: 30em)"
srcset="TotemPole-1200.jpg">
<source srcset="TotemPole-600.jpg">
<img src="TotemPole-2000.jpg" alt="Monument Valley - Totem Pole">
</picture>
Die vorhandene Grafik wird in drei Versionen mit jeweils unterschiedlichen Seitenverhältnissen abgespeichert. TotemPole-2000.jpg ist das Bild in voller Größe. Davon ausgehend definieren wir die zweitgrößte Version, TotemPole-1200.jpg, und die Größe nimmt immer weiter ab bis zur kleinsten Version, TotemPole-600.jpg.
picture-Element selbst, welches das responsive Verhalten auslöst und keine im CSS definierten Medien-Breakpoints.Die Medienabfragen werden so hinzugefügt, dass sie zu den Bildgrößen passen:
- Bei einer Viewport-Breite von mehr als
50emwird die Panorama-Version (Verhältnis 2:5) geladen. - Sobald der Viewport kleiner wird, erscheint eine schmalere Version ( Verhältnis von 2:4).
- Bei kleinen Viewports unterhalb von
30emerscheint eine quadratische Version.
Der letzte Schliff!
Mit picture bekommen wir einen Gestaltungsspielraum um bei der Bilddarstellung Regie führen zu können. Und, wo wir gerade bei dieser Idee sind, können wir CSS Features wie object-fit ausnutzen, das uns zusammen mit object-position erlaubt, Bilder für einen besseren Ausschnitt zu beschneiden und gleichzeitig das Seitenverhältnis beizubehalten.
img {
animation: direction 5s infinite alternate linear;
}
@keyframes direction {
from {
object-fit: cover;
object-position: 50% 50%;
width: 50em;
height: auto;
}
to {
object-fit: cover;
object-position: 100% 50%;
width: 20em;
height: 20em;
}
}
Damit das Bild auf kleineren Bildschirmen nicht zu klein dargestellt wird, wird es mit object-fit: cover; passend beschnitten und mit object-position: 100% 50%; am Reiter in der rechten Bildhälfte ausgerichtet.
Information
Was wir auch tun können, ist, Media Queries basierend auf der Bildschirmauflösung (zumeist in Punkten pro Zoll gemessen, dpi) des Gerätes selbst zu schreiben, statt auf der Größe des Viewports basierend.body {
background-image : bild-mittel.png; /* the default image */
}
@media only screen and (min-resolution: 192dpi) {
body {
background-image : bild-gross.png; /* higher resolution */
}
}
Benutzereinstellungen
Bis jetzt ging es in den Media Queries vorwiegend um die Geräteeigenschaften, die über Merkmalsabfragen abgerufen wurden, um dem Browser die Entscheidung für die passenden CSS-Formatierung zu ermöglichen. In Media Queries Level 5 wird dies um Medienmerkmale erweitert, die die bereits im Betriebssystem getroffenen Benutzereinstellungen auslesen.
light und dark mode
Mit prefers-color-scheme wird abgefragt, ob der Nutzer in den Benutzereinstellungen im Betriebssystem ein dunkles color-scheme (Dark Mode) aktiviert hat. Dann lädt nur das webp-Bild mit dunklem Hintergrund.
<picture>
<source srcset="tb-dark.webp" media="(prefers-color-scheme: dark)">
<img src="tb-light.jpg" alt="">
<picture>
WebP („weppy“) ist ein Datenformat für verlustbehaftet oder verlustfrei komprimierte statische oder animierte Bilder. WebP erreicht bei sehr hoher Komprimierung mehr Bildqualität pro Datenmenge als JPEG.
Animation oder Standbild
Ähnlich verhält sich prefers-reduced-motion. Hier wird abgefragt, ob ein Nutzer weniger Bewegung und Animationen wünscht. Während das manche nur nervt, kann es für andere zu Übelkeit und Kopfschmerzen führen.
Wenn in den Benutzereinstellungen im Betriebssystem prefers-reduced-motion mit dem Wert reduceaktiviert ist, lädt der Browser nur dann das statische Bild.
<picture>
<source srcset="CG_Heart.gif"
media="(prefers-reduced-motion: no-preference)">
<img src="Heart-screenshot.png"
alt="Computergenerierter Querschnitt eines 3D-Modell des Herzen">
</picture>
In diesem Beispiel wird abgefragt, ob der Nutzer Animationen wünscht. Falls keine Festlegung getroffen wurde, wird das animated GIF gezeigt. Falls der Wert reduce gesetzt wurde, wird ein statischer Screenshot gezeigt.
Noch besser wäre eine Einbindung als Film (Siehe Datei als webm), da dieser dann vom Nutzer gestartet und beliebig gestoppt werden kann.
Siehe auch
SELF-Blog: GIF - heute noch aktuell? vom 26.03.2022
Hero-Images mit CSS
Nicht jedes Hero-Image ist Teil des Inhalts. Dient ein Bild ausschließlich der Gestaltung einer Seite, bietet sich eine Lösung mit CSS an. Mit background-image kann man ein Bild unabhängig vom eigentlichen Seiteninhalt als Hintergrund eines Elements einsetzen.
CSS bietet dabei einige Möglichkeiten, die für Hero-Images besonders interessant sind: Das Bild lässt sich mit background-size und background-position flexibel an die Größe des Elements anpassen. Mit image-set() können außerdem mehrere Bildvarianten angegeben werden, aus denen der Browser eine geeignete Version auswählt.
Hintergrundbild mit background-image
Dieser Ansatz besticht durch seine klare HTML-Struktur: Nur der Text wird ausgezeichnet, das Bild wird als Hintergrundbild eingebunden:
Zuerst müssen wir dafür sorgen, dass die Webseite den vollen Viewport einnimmt:
html, body {
margin: 0;
}
html {
height: 100vh;
overflow-y: hidden;
}
background-size
Man kann Hintergrundbilder mithilfe der Eigenschaft background-size skalieren.
.contain { background-size: contain; }
.cover { background-size: cover; }
.eins { background-size: 50px;}
.zwei { background-size: auto 100px;}
.drei { background-size: 50%; }
.vier { background-size: 50% 100%; }
-
contain: passt unter Beibehaltung des Seitenverhältnisses die größere Seite der Grafik in den Anzeigebereich ein, ergibt eine vollständige Füllung des Anzeigebereiches -
cover: passt unter Beibehaltung des Seitenverhältnisses die kleinere Seite der Grafik in den Anzeigebereich ein
Wie man im Beispiel erkennen können, wird das Bild mit dem Wert cover so groß skaliert, dass es verpixelt erscheint. Hier müsste eine größere Grafik mit besserer Auflösung zur Verfügung gestellt werden.
Feineinstellungen
Nun muss per CSS festgelegt werden, dass sich das Hintergrundbild über den gesamten Viewport erstreckt:
html {
background-image: url(hero-image-4096.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
- Mit background-size:cover wird das Bild über die gesamte Fläche gezogen.
- Hintergrundbilder, die kleiner als die verfügbare Größe sind, werden normalerweise gekachelt. Deshalb wird background-repeat auf
no-repeatgesetzt, falls die obere Einstellung von background-size einmal geändert wird. - Das Bild wird mit background-position mittig platziert.
Das Hero-Image sieht auf großen Viewports gut aus.
Problematisch ist, dass auch bei kleinen Viewports (und geringen Datenübertragungsraten, obwohl das nicht abgefragt werden kann) das hochauflösende 4k-Bild geladen werden musss, dann aber nur ein kleiner Ausschnitt angezeigt wird.
Responsivität mit image-set()
Mit der image-set()-Funktion ist es jetzt möglich, mehrere Hintergrundbilder anzubieten, von denen sich der Browser das am besten geeignete aussucht.
html {
background-image: url("hero-image-2000.jpg"); /*Fallback */
background-image: image-set(
url("hero-image-2000.jpg") 1x,
url("hero-image-4096.jpeg") 2x
);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
Als Fallback (für den IE11) wird ein Regelsatz mit herkömmlicher url()-Funktion notiert. Browser, die image-set verstehen, erhalten nun zwei Grafiken, die über eine Abfrage des zweiten Parameters vom Browser selbst nach der Auflösung des Endgeräts ausgewählt werden.
Nachteil dieser Version ist es, dass sich zwar die Auflösung, nicht jedoch die Abmessungen des Bildschirms abfragen lässt.
Parallax Scrolling
Unter Parallax Scrolling (Bewegungsparallaxe) versteht man einen Panoramablick, der entsteht, wenn sich Inhalt und der Hintergrund (oder mehrere Hintergrundebenen) mit unterschiedlichen Geschwindigkeiten bewegen und so den Eindruck von räumlicher Tiefe erzeugen.[3][4][5]
Gunnar Bittersmann stellte im Forum einen CodePen mit wenigen Zeilen Javascript vor: parallax scrolling
Man kann mithilfe der Eigenschaft background-attachment bestimmen, wie sich die Hintergrundbilder verhalten sollen, wenn das Element oder sein Inhalt bewegt wird.
p {
outline: thin solid;
overflow: auto;
width: 167px;
height: 300px;
background-image: url("Sonnenuntergang.jpg");
background-repeat: no-repeat;
}
#one { background-attachment: fixed; }
#two { background-attachment: scroll; }
#three { background-attachment: local; }
1. Beispiel mit background-attachment
<header class="parallax">
<h1>Der wilde Westen</h1>
</header>
<section>
...
</section>
<section class="parallax"></section>
<section>
...
</section>
Das Beispiel enthält einen header und drei section-Elemente. Der header und das zweite section-Element erhalten die Klasse parallax.
.parallax {
background-image: url("https://wiki.selfhtml.org/images/e/e4/TotemPole-2000.jpg");
min-height: 90vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
section.parallax {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Forrest_Gump_Point_Monument_Valley_November_2018_003.jpg/1280px-Forrest_Gump_Point_Monument_Valley_November_2018_003.jpg);
}
@media (prefers-reduced-motion: no-preference) {
.parallax {
/* Create the parallax scrolling effect */
background-attachment: fixed;
}
}
Elemente mit der Klasse parallax werden nun 90% der Viewporthöhe hoch, und erhalten ein füllendes Hintergrundbild.
Dann folgt eine Media Query, die die Benutzereinstellungen von prefers-reduced-motion abfragt. Wer hier im Betriebssystem eingestellt hat, dass er weniger Animationen bevorzugt, erhält eine ruhigere Variante ohne Parallax Scroll.
Ohne Festlegung werden die Hintergrundbilder mit background-attachment: fixed fest positioniert und die folgenden section-Elemente werden beim Scrollen über die Hintergrundbilder geschoben.
https://commons.wikimedia.org/wiki/File:USA_10315_Monument_Valley_Luca_Galuzzi_2007.jpg
2. Beispiel mit transform:translate()
Dieses Beispiel erzielt den gleichen Effekt, verwendet aber eine Verschiebung mit transform.
Das HTML-Markup ist ähnlich wie im oberen Beispiel - allerdings werden nur zwei section-Elemente verwendet, da das mittlere ja bis auf das Hintergrundbild leer war.
.parallax::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: block;
background-image: url("https://wiki.selfhtml.org/images/e/e4/TotemPole-2000.jpg");
background-position: center center;
background-size: cover;
transform: translateZ(-1px) scale(1);
min-height: 100%;
z-index: -2;
}
section.parallax::before {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Forrest_Gump_Point_Monument_Valley_November_2018_003.jpg/1280px-Forrest_Gump_Point_Monument_Valley_November_2018_003.jpg);
background-position: top center;
z-index: -1;
}
Der Header und das letzte section-Element erhalten Pseudoelemente, die auf volle Viewportgröße skaliert und mit einem Hintergrundbild versehen sind.
Barrierefreiheit und reduzierte Bewegung
Typografie
Da das Hero-Image die zentrale Aussage der Webseite ist, sollte es nur wenig Text in Form einer kurzen Überschrift und maximal eines Absatzes zur Erläuterung sowie einiger optisch dazu passender Verweise geben.
Die Überschrift sollte groß und auffällig in einer zum Bild passenden Schriftart sein. Im Augenblick sind dünnere Schrifttypen oder nur die Konturen einer Schrift modern. Dies lässt sich mit SVG (siehe: Text in SVG) realisieren.
Navigationselemente und Erläuterung, wenn überhaupt vorhanden, sollten so dezent wie möglich sein, um das Bild wirken zu lassen. Eventuell könnten Ghost-Buttons zum Einsatz kommen.
Auch die Farbwahl sollte vom Bild abhängig sein.
- Ein farbiges Bild erhält schwarze und weiße Textelemente.
- Schwarz-weiß-Bilder erhalten Bedienelemente aus einer Farbe oder einer einfachen Farbpalette.
Da das Hero-Image häufig den Hintergrund für Text bildet, muss besonders auf einen ausreichenden Kontrast geachtet werden. Elegante graue Schrift auf einem hellen, unruhigen Bild ist zwar vielleicht ästhetisch ansprechend, aber schlecht lesbar.
- immer gut erkennbar sein und
- keine inhaltlich wichtigen Stellen des Bildes verdecken.
Osterbild
html, body, header, h1, img {
padding: 0;
margin: 0;
}
header {
position: relative;
height: 100vh;
overflow-y: hidden;
}
Die Innen- und Außenabstände werden auf 0 gesetzt und der header erhält mit height: 100vh; die gesamte Höhe des Viewports. Die Einheit der Längenangabe vh bezieht sich direkt auf die Höhe des Viewports.
<header>
<img src="narzisse-m.jpg"
alt="Osterglocke als Zeichen des Frühlings, Quelle: Wikipedia"
srcset="narzisse-lg.jpg 4140w,
narzisse-m.jpg 1920w,
narzisse-sm.jpg 1000w">
<h1>Frohe Ostern!</h1>
</header>
Das Bild wird mit dem srcset-Attribut für verschiedene Viewport-Abmessungen in mehreren Größen referenziert - der Browser lädt sich dann das passende aus.
Überschrift und Buttons werden über das Bild gelegt.
ToDo (weitere ToDos)
paint-order: https://tylersticka.com/journal/improved-css-text-stroke/
Fazit
Bei normalen Bildern werden sich mehrere Versionen einer Grafik nicht lohnen, bei großflächigen Panorama- und Hero-Bildern dagegen schon. Hierfür eignet sich das img-Element in Verbindung mit srcset, um mehrere optimierte Versionen anbieten zu können.
Für Art Direction empfiehlt sich das picture-Element.
Eine Einbindung mehrerer Bildquellen in Content Management Systeme ist nicht trivial, mittlerweile gibt es aber Plugins für die gängigsten Systeme.
Siehe auch
- Hintergründe mit CSS
- Image Replacement
- Sprites
- Verläufe
- Vermischen mit Blend-Modes
- Scrollbalken gestalten
Bildlaufleisten mit CSS formatieren
- OnePager
(Single-Page Webseite mit Scroll)
- Komfort-Version
- interactive Storytelling
- Bildwechsler
- Lightbox
- Thumbnail und Großansicht
- Bildwechsler
- Lightbox
- Responsive Imagemaps
Klickflächen innerhalb eines Bilds? - Das wird jetzt mit SVG gemacht!
Weblinks
- ↑ Wikipedia: Hero image
- ↑ Stack Overflow: When using “height: 100vh” for the container, vertical scrollbar appears
- ↑ Wikipedia: Bewegungsparallaxe
- ↑ t3n.de: Parallax Scrolling: 30 schicke Beispiele des Webdesign-Trends vom 08.12.2014
- ↑ creativebloq: 17 great parallax scrolling websites vom 05.09.2016
- marketblog.envato: Exploring the Hero Image Trend in Web Design
- designmodo: Make the Most of Your Design with a Hero Header
- smashingmagazine: Responsive Images Done Right: A Guide To <picture> And srcset (14.05.2014)
- Eric Portis: Srcset and sizes (24.03.2014)
- Martin Wolf: the new srcset and sizes explained
- Kulturbanause: Responsive Images – <picture>, srcset, sizes & Co.
