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.[2]
<img src="Monumentvalley-1920.jpg"
srcset="Monumentvalley-1200.jpg 1x,
Monumentvalley-1920.jpg 2x"
alt="Panorama Monument Valley - Quelle Wikipedia"
>
Alle Bilder teilen sich ein alt-Attribut, mit dem die Zugänglichkeit gewahrt wird.
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 entscheidet dann selbst, welche Bilder geladen werden.
2016 gab es einige hochwertige Geräte mit hoher Pixeldichte, heute ist das bei Mobilgeräten und Desktop-Monitoren Standard. Deshalb ist diese Demo heute eher nur historisch bedeutsam.
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="//wiki.selfhtml.org/images/1/11/Monumentvalley-1920.jpg"
alt="Panorama Monument Valley - Quelle Wikipedia"
srcset="https://wiki.selfhtml.org/images/x/xx/Monumentvalley-600.jpg 600w,
https://wiki.selfhtml.org/images/0/0d/Monumentvalley-1200.jpg 1200w,
https://wiki.selfhtml.org/images/1/11/Monumentvalley-1920.jpg 1920w,
https://wiki.selfhtml.org/images/6/62/Monumentvalley-3840.jpg 3840w"
sizes="(min-width: 50em) 75vw,
(min-width: 35em) 100vw,
100vw">
Für das Panoramabild werden vier 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.[3][4]
<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="https://wiki.selfhtml.org/images/c/c4/Antelope-1-klein.jpg"
alt="Lower Antelope Canyon - Quelle Wikipedia"
srcset="https://wiki.selfhtml.org/images/c/c4/Antelope-1-klein.jpg 750w,
https://wiki.selfhtml.org/images/e/e5/Antelope-1-mittel.jpg 1200w,
https://wiki.selfhtml.org/images/c/c4/Antelope-1-gross.jpg 1920w"
sizes="(min-width: 35em) 50vw,
(min-width: 50em) 33vw,
100vw">
<img src="https://wiki.selfhtml.org/images/0/02/Antelope-2-klein.jpg"
alt="Lower Antelope Canyon - Quelle Wikipedia"
srcset="https://wiki.selfhtml.org/images/0/02/Antelope-2-klein.jpg 750w,
https://wiki.selfhtml.org/images/4/42/Antelope-2-mittel.jpg 1200w,
https://wiki.selfhtml.org/images/7/79/Antelope-2-gross.jpg 1920w"
sizes="(min-width: 35em) 50vw,
(min-width: 50em) 33vw,
100vw">
<img src="https://wiki.selfhtml.org/images/c/c4/Antelope-1-klein.jpg"
alt="Lower Antelope Canyon - Quelle Wikipedia"
srcset="https://wiki.selfhtml.org/images/c/c4/Antelope-1-klein.jpg 750w,
https://wiki.selfhtml.org/images/e/e5/Antelope-1-mittel.jpg 1200w,
https://wiki.selfhtml.org/images/c/c4/Antelope-1-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.jxl 1x, bild-gross_2x.png 2x, bild-gross_3x.png 3x">
<source media="(max-width:600px)"
srcset="bild-mittel_1x.jxl 1x, bild-mittel_2x.png 2x, bild-mittel_3x.png 3x">
<source media="(max-width:400px)"
srcset="bild-klein_1x.jxl 1x, bild-klein_2x.png 2x, bild-klein_3x.png 3x">
<img src="picture.jpg" 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. Diese Bilder sind im neuen JPEG XL-Format, das die Qualität der komprimierten Bilder relativ zur Datei-Größe gegenüber den älteren Bildformaten JPEG, JPEG 2000 und WebP verbessert.
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 2000w,
TotemPole-4096.jpeg 4096w"
sizes="75vw">
<source media="(min-width: 30em)"
srcset="TotemPole-1200.jpg">
<source srcset="hTotemPole-600.jpg">
<img src="TotemPole-2000.jpg" alt="Monument Valley - Totem Pole">
</picture>
Die vorhandene Grafik wird in vier Dateien mit drei unterschiedlichen Seitenverhältnissen abgespeichert. TotemPole-2000.jpg und TotemPole-4096.jpg zeigen beide die volle Panorama-Ansicht des Bildes, allerdings in unterschiedlichen Auflösungen für Bildschirme mit hoher Pixeldichte. Davon
ausgehend definieren wir eine kleinere 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.Innerhalb der Panorama-Version kommt zusätzlich klassisches
srcset mit
Breiten-Descriptors zum Einsatz, um zwischen TotemPole-2000.jpg und
TotemPole-4096.jpg je nach Pixeldichte des Displays zu wählen.Die Medienabfragen werden so hinzugefügt, dass sie zu den Bildgrößen passen:
- Bei einer Viewport-Breite von mehr als 50em wird die Panorama-Version (Verhältnis 5:2) geladen — bei sehr hochauflösenden Displays in der 4096px-Variante.
- Sobald der Viewport kleiner wird, erscheint eine weniger breite Version (Verhältnis 2:1).
- Bei kleinen Viewports unterhalb von 30em erscheint eine quadratische Version (Verhältnis 1:1).
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 wie Monitorgrößen und Auflösung, 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.
<picture>
<source srcset="Landscape-2-night.svg" media="(prefers-color-scheme: dark)">
<img src="Landscape-2.svg" alt="Landschaft mit Bergen und See">
</picture>
media="(prefers-color-scheme: dark)" ist eine Media Query, die abfragt, ob das Betriebssystem bzw. der Browser des Nutzers auf Dark Mode eingestellt ist.
Ist Dark Mode aktiv → die Media Query trifft zu → der Browser lädt Landscape-2-night.svg (die Nacht-Version der Landschaft).
Ist Dark Mode nicht aktiv (also Light Mode, oder keine Präferenz erkennbar) → die <source> wird übersprungen → der Browser fällt auf das <img> zurück und lädt Landscape-2.svg (die Tag-Version).
Das <img> ist zwingend erforderlich in einem <picture>-Element — es dient sowohl als Fallback für Browser, die <picture> nicht unterstützen, als auch als eigentliches, im DOM sichtbares Element (das alt-Attribut, Größe, Layout etc. hängen am <img>, nicht an <source>).
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.
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, abhängig von der Pixeldichte des Ausgabegeräts eine passende Version des Hintergrundbilds auszuwählen.
html {
height: 100dvh;
overflow-y: hidden;
background-image: url("TotemPole-2000.jpg"); /*Fallback */
background-image: image-set(
url("TotemPole-1200.jpg") 1x,
url("TotemPole-2000.jpg") 2x,
url("TotemPole-4096.jpeg") 3x
);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
Für Geräte mit normaler Pixeldichte (1x) wird die kleinere Datei verwendet. Geräte mit höherer Pixeldichte (2x oder 3x) erhalten eine entsprechend höher aufgelöste Version. Dadurch muss nicht grundsätzlich das größte Bild geladen werden.
Die übrigen Angaben bestimmen die Darstellung:
- background-size: cover skaliert das Bild so, dass der gesamte Hintergrund ausgefüllt wird. Dabei können Teile des Bildes an den Rändern abgeschnitten werden.
- background-position: center center zentriert das Bild.
- background-repeat: no-repeat verhindert eine Wiederholung des Bildes.
- Die erste background-image-Angabe dient als Fallback für Browser, die image-set() nicht unterstützen.
- height: 100dvh sorgt dafür, dass das Element die Höhe des Viewports einnimmt; overflow-y: hidden verhindert dabei eine vertikale Scrollbar.
Da die Beschriftungen bereits in die Bilder eingebettet sind, lässt sich direkt erkennen, welche Bildvariante verwendet wurde.
In der Praxis sind solche Beschriftungen natürlich nicht Bestandteil des Bildes. Da image-set() ein Hintergrundbild festlegt, gibt es außerdem kein Gegenstück zu currentSrc, mit dem sich per JavaScript einfach die tatsächlich geladene Bilddatei auslesen lässt. Zur Kontrolle kann die Netzwerkanalyse der Entwickler-Tools verwendet werden. Dort ist zu sehen, welche Bilddatei der Browser tatsächlich geladen hat. Alternativ lässt sich mit der Geräteemulation die Pixeldichte (devicePixelRatio) verändern und beobachten, wie der Browser eine andere Bildvariante auswählt.
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/
https://uxplanet.org/hero-images-are-dead-these-solutions-are-replacing-them-184aae824c55
Hero-Image mit Bildnachweis
Ein Hero-Image besteht nicht nur aus dem Bild selbst. Häufig müssen zusätzlich Bildunterschrift und Bildnachweis untergebracht werden. Bei großen Bildern bietet sich beispielsweise ein vertikal gesetzter Bildnachweis am Rand an.
- TIL about text-orientation (wie man Text – und nicht ein Bild! 🤣 – in die Vertikale dreht) von Gunnar Bittersmann
figure {
margin: 0;
font: 1.2em/1.3 Source Serif Pro, Georgia, serif;
font-size: clamp(1em, 4vw, 1.25em);
}
figure > div {
position: relative;
}
figure img {
width: 100%;
display: block;
}
figure footer {
font: 0.8em/1 Source Sans Pro, Calibri, sans-serif;
text-align: right;
hanging-punctuation: first last allow-end;
}
@media (min-width: 25em) {
figure footer {
position: absolute;
top: 0;
right: 0%; /* % fixes IE bug */
bottom: 0;
transform: rotate(.5turn);
color: white;
writing-mode: tb-rl;
writing-mode: vertical-rl;
text-align: left;
padding: 0.5em 1em 0.5em 0.25em;
background: linear-gradient(to left,#1040, #1042 .75em, #1046 1.5em);
}
}
Das figure-Element erhält eine flexible Schriftgröße, da die clamp()-Funktion sich eigenständig den passenden Wert heraussucht.
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
- ↑ 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.
