Bilder im Internet/Einbindung mit img
Text-Info
- 30min
- einfach
- Kenntnisse in
● Einstieg in HTML
● Einstieg in CSS
Mit dem img-Element (image (englisch für Bild)) können Sie Grafikdateien in Ihre HTML-Dokumente einbinden.
Dieses Tutorial zeigt, wie Sie das tun, was Sie dabei beachten müssen und wie Sie solche Bilder mit CSS gestalten können.
Inhaltsverzeichnis
Element ohne Inhalt?
<img> ist ein sogenanntes Standalone-Tag ohne Elementinhalt und ohne End-Tag.
Die Grafik wird nicht direkt im HTML-Dokument, bzw. im img-Tag gespeichert, sondern bleibt an ihrem Speicherort.
Bildquellen mit src und srcset angeben
Das src-Attribut referenziert die Quelle (engl. source) der Bilddatei. Diese kann wie in HTML üblich relativ oder absolut angegeben werden. Sie wird dann vom Browser als embedded content (eingebetteter Inhalt) in die Webseite eingebunden.
Falls Ihre Bilder nicht laden, gehen Sie bitte folgende Schritte durch:
- Ist Ihr HTML-Markup valide?
- Befinden sich die Bilder auch wirklich in dem Verzeichnis, das referenziert wurde?
- Sind URL und Dateiname wirklich identisch?
Windows ist case-insensitiv, sodasssrc="bild.jpg"auchbild.JPGladen würde. Auf dem (Linux)-Server würde er vergeblich die Datei mit der kleingeschriebenen Dateiendung suchen.
Beachten Sie die Konventionen für Dateinamen!
Es ist auch möglich, mit dem srcset-Attribut Bilder in verschiedenen Größen zu referenzieren, die dann entsprechend geladen werden.
Als Parameter enthält das srcset-Attribut eine kommagetrennte Liste mehrerer …
- URLs , ergänzt durch die optionale Angabe der
- Breite: positive Zahl gefolgt von einem w. (Defaultwert ist unendlich)
- Pixeldichte: positive Zahl gefolgt von einem x. (Defaultwert ist 1x)
In diesem Beispiel werden im srcset mehrere URL angeboten. Browser ohne srcset-Support zeigen das mit src referenzierte Bild an, für Retina-Displays werden alternative hochauflösende Bilder zur Verfügung gestellt.
alt - Beschreibungen für Bilder und Grafiken
Es kann aber trotzdem vorkommen, dass Bilder (aufgrund einer schlechten Internetverbindung) nicht geladen werden oder Nutzer sich die Seite mit einem Screenreader vorlesen lassen.
Ein Weg, etwas über den Inhalt der Grafik zu erfahren, ist der Alternativtext, der mithilfe des alt-Attributs jeder Grafik im HTML-Quellcode beigefügt werden muss. Im Vorlesemodus wird dann dieser Alternativtext angesagt. Fehlt das alt-Attribut, dann sagen einige Screenreader Teile des Dateinamens an. Aus diesem Grund haben das alt-Attribut und Alternativtexte eine sehr wichtige Bedeutung.
Das alt-Attribut ist eine Pflichtangabe.
Webautoren, die etwas mehr Zeit investieren können, erhalten einen bedeutenden Mehrwert, wenn sie Fließtexte so verfassen, dass sie ohne zusätzliche Bilder, Ton- oder Film-Dokumente auskommen. Solche Texte erleichtern allen Benutzern das Verständnis (die mitgegebenen multimedialen Inhalte sollten das Verständnis unterstützen und anreichern). Für Menschen, die den Text nur überfliegen wollen oder Nutzer mit Einschränkungen wie einer Konzentrationsschwäche oder Legasthenie sollten nicht textliche Inhalte das Verständnis erleichtern.
So sind Sie als Autor einer Seite in der Lage sicherzustellen, dass Leser beispielsweise verstehen, warum ein Bild in die Seite eingebunden ist und welche Bedeutung es für den Fortgang Ihrer Argumentation besitzt.
Sinnvoll aufgebaute Texte kommen allen Nutzern zugute. Die kurzen Texte, die Sie im alt-Attribut mitgeben dürfen, stehen in der Regel ausschließlich Blinden zur Verfügung. Vermeiden Sie hier Redundanzen. Notieren Sie mittels alt-Attribut zusätzliche Informationen, wenn diese sinnvoll sind. Beispielsweise um die Stimmung eines Bildes zu beschreiben, wenn dies zum Verständnis des Textes notwendig ist.
Bildunterschrift vs. Bildbeschreibung
Mit HTML5 ermöglicht das figure-Element die Zuordnung einer Bildunterschrift zu einem Bild.
<figure>
<img src="möwe.jpg" alt="Das Bild zeigt auf der linken Seite eine junge Frau mit einem roten Luftballon in der Hand, während eine Möwe den Luftballon attackiert.">
<figcaption>Ob sich die Möwe das gut überlegt hat?</figcaption>
</figure>
Stehen alle benötigten Informationen im normalen Text oder in der figcaption eines figure-Elements zur Verfügung, können Sie den Alternativ-Text durchaus leer lassen. Oft ist die figcaption aber keine Beschreibung, sondern eher ein Kommentar. In diesem Falle sollte Sie einen Alternativtext zur Verfügung stellen.
Häufig sieht man, dass als Alternativtext der Dateiname oder der Titel des Bildes/der Grafik verwendet wird. Der Dateiname ist allerdings in den meisten Fällen ohne jede Aussagekraft, was in geringerem Umfang auch für den Titel der Grafik gilt.
Wenn Sie Bilder als Links verwenden, sollte der Alternativtext nicht das Bild beschreiben, sondern eine Information über das Linkziel vermitteln.
Dekorationsgrafiken
Aus demselben Grund setzen Sie für Grafiken, die keinen Inhalt vermitteln (Dekorations- oder Schmuckgrafiken) neben dem Wert none für das role-Attribut ein leeres alt-Attribut (alt=""). So ignorieren Screenreader und Suchmaschinen die Grafik, da sie offenbar für das Verständnis der Seite nicht wichtig ist. Idealerweise werden Schmuckgrafiken nicht in das HTML eingebettet, sondern mittels CSS als Hintergrundbilder definiert (Trennung von Inhalt und Präsentation).
Grafische Browser sollten den Alternativtext auch dann anzeigen, wenn die Grafik aus irgendeinem Grund nicht zur Verfügung steht.
(optionale) Breiten- und Höhenangaben
Ohne weitere Festlegungen nehmen Bilder ihre volle Größe ein. Deshalb ist es empfehlenswert, immer auch eine Breiten- und Höhenangabe hinzuzufügen:
- width
- height geben die Bildbreite bzw. -höhe an. Der Wert wird in CSS-Pixel angegeben.
(In HTML4 war eine Angabe in Bildschirmpixeln (mit Einheitpx) und Prozentangaben zulässig).
<figure>
<img src="Hund.gif" alt="Hund mit Halsband und gefletschten Zähnen.">
<figcaption>Das Bild enthält die Quellenangabe src="..." und einen alt-Text.</figcaption>
</figure>
<figure>
<img src="Hund.gif" width="104" height="90" alt="Hund">
<figcaption>Das Bild enthält neben den Pflichtangaben noch feste Abmessungen,
sodass es auf 50% seiner Größe skaliert wird.
</figcaption>
</figure>
Sonst wartet der Browser dagegen mit der Anzeige der Web-Seite, bis er alle nötigen Größenangaben aus eingebundenen Grafikdateien eingelesen hat, oder er muss den Bildschirmaufbau korrigieren, was nicht sehr schön aussieht.
Ebenso bleibt ggf. das Layout bei fehlenden Bildern erhalten.
flexible Breiten im responsiven Webdesign
Im responsiven Webdesign sollen Bilder (und der Rest der Webseite) auf jedem Bildschirm gut aussehen. Da die Gesamtbreite des verfügbaren Viewports nicht bekannt ist, kann man auch keine feste Breite vergeben. So würde ein 200px breites Bild auf einem Handy mit 20em breiten Viewport nur ca. 6em (≙≈ 100px) für den umfließenden Text lassen.
Deshalb ist es sinnvoll, Bildern per CSS zuerst die volle Breite und erst bei größeren Viewports einen festen oder relativen Wert zuzuweisen:
img {
width: 100%;
height: auto;
}
@media (min-width: 25em) {
img {
width: 50%;
float: right;
margin: 0 0 1em 1em;
}
}
@media (min-width: 50em) {
img {
width: 25%;
}
}
Das Bild erhält auf kleinen Bildschirmen die volle Breite.
Eine Medienabfrage an den Browser lässt das Bild bei einer Viewport-Breite von mehr als 25em auf die halbe Breite schrumpfen und mit float an die rechte Seite floaten (engl. für schweben, hängen). Passend dazu erhält es mit margin einen unteren und linken Abstand zum umfließenden Text.
Es ist ebenso möglich, eine Maximalbreite anzugeben:
img {
width: 100%;
max-width: 500px;
height: auto;
}
Bilder mit CSS gestalten
In diesem Abschnitt lernen Sie, wie Sie Bilder mit CSS gestalten können.
Bilder in Webseiten sind insofern ein Sonderfall, da das img-Element ein so genanntes ersetztes Element ist. Es ist eigentlich nur ein inhaltsleerer Container für das von anderer Stelle geladene Bild. Deshalb beschränkte sich die Gestaltung durch CSS eigentlich nur auf die Abmessungen und Abstände des Bildes.
Heute können Sie mit CSS-Filter und mix-blend-mode auch das Aussehen der Bilder selbst verändern.
Bildeffekte mit Filtern und Rahmen
Dieses Beispiel soll nur aufzeigen, dass die border-Eigenschaft mehr als nur eine einfache Randlinie erzeugen kann.
Mit der CSS-filter-Eigenschaft können Sie Bilder verfremden. Dies mag in Einzelfällen interessant sein; generell ist hier aber auch weniger oft mehr.
#blackwhite {
filter: grayscale(1);
border:solid 2vmin #eee;
border-bottom-color:#fff;
border-left-color:#eee;
border-radius:2px;
border-right-color:#eee;
border-top-color:#ddd;
box-shadow:0 0 5px 0 rgb(0 0 0 /.25) inset, 0 5px 10px 5px rgb(0 0 0 /.25);
padding:3vmin;
position:relative;
}
#blackwhite:before {
border-radius:2px;
bottom:-2vmin;
box-shadow:0 2px 5px 0 rgb(0 0 0 / .25) inset;
content:"";
left:-2vmin;
position:absolute;
right:-2vmin;
top:-2vmin;
}
#blackwhite:after {
border-radius:2px;
bottom:-2.5vmin;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / .25);
content:"";
left:-2.5vmin;
position:absolute;
right:-2.5vmin;
top:-2.5vmin;
}
#two {
border:1em groove gold;
}
#three {
border:1em double black;
filter: url('#KantenErkennung');
}
Im letzten Bild mit der id #three wird ein SVG-Filter eingebunden, der im HTML-Dokument in einem SVG-Abschnitt notiert ist.
Größenanpassung mit object-fit
Mit object-fit und object-position kann man das Bild innerhalb des durch das img-Element gebildeten Containers positionieren.
Die object-fit Eigenschaft gibt an, wie die Inhalte eines ersetzten Elements wie img oder video an die Inhaltsbox angepasst werden, die durch dessen verwendete Höhe und Breite erzeugt wird.
So kann ein Bild in der Größe angepasst werden, dass es seine Inhaltsbox vollständig ausfüllt, ohne dabei sein Seitenverhältnis zu verlieren. Falls das Seitenverhältnis nicht übereinstimmt, wird die Grafik zugeschnitten oder es bleibt ein (gewollter) Rand:
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.scale-down {
object-fit: scale-down;
}
Die Bilder erhalten eine feste Größe von 12em Breite und 9em Höhe (Seitenverhältnis 4:3). Da die referenzierte SVG-Grafik aber ein Seitenverhältnis von 5:2 hat, muss sie an die Größe des img-Elements angepasst werden.
Die fünf Beispiele zeigen die verschiedenen Werte.
Kreisrunder Ausschnitt eines rechteckigen Bildes
Wenn man ein rechteckiges Bild kreisrund darstellen möchte, kann man mit border-radius: 50% die Ecken abrunden. Allerdings verzerrt sich das Bild, wenn man Höhe und Breite auf den gleichen Wert setzt. Anstelle des Einsatz eines Container-Elements ist dies mit object-fit und object-position viel einfacher:
Die object-position Eigenschaft bestimmt ähnlich der background-position, an welcher Stelle sich die linken oberen Ecken von ersetzten Elementen befinden sollen.
.rund {
object-fit: cover;
object-position: 50% 0;
border-radius: 50%;
width: 15em;
height: 15em;
}
.vergleich {
object-fit: cover;
object-position: 50% 100%;
border-radius: 50%;
width: 15em;
height: 15em;
}
Die abgerundeten Bilder erhalten eine feste Größe von 15em Breite und 15em Höhe. Da die referenzierte Grafik aber rechteckig ist, wird sie mit object-position im ersten Beispiel .rund so nach oben verschoben, dass das Gesicht im Mittelpunkt ist. Im zweiten Beispiel .vergleich richtet sich das Bild am unteren Ende aus.
Panorama mit Image-Slider
Dieses Beispiel beruht auf einem Missverständnis im Forum. Der Threadersteller wollte eigentlich ein Bilderkarussell - ein slider ist ein Schieberegler type = "range". Er eignet sich dafür, Panoramabilder, die aufgrund ihrer Breite nur in geringer Höhe dargestellt werden können, so zu formatieren, dass jeweils ein Ausschnitt größer dargestellt wird:
figure img, figcaption, input {
width: 335px;
max-width: 100%;
margin-bottom: 0.4em;
}
figure img {
height: 335px;
object-fit: cover;
object-position: calc(var(--percentage, 0) * 1%) center;
}
Das Bild innerhalb des figure-Containers (figure img) wird 335px breit und hoch, obwohl das Panorama viel breiter ist. Mit object-fit:cover füllt es nun den gesamten Platz, deshalb stehen die Seiten außerhalb des verfügbaren Platzes. Mit dem Slider wird bei einer Eingabe über eine CSS-Variable der Wert für object-position verändert und das Bild entsprechend verschoben.
Qualität der Bildskalierung mit image-rendering beeinflussen
Es ist oft so, dass Sie ein Bild nicht in seiner natürlichen Größe anzeigen wollen. Statt dessen muss es vergrößert oder verkleinert werden. Die Browser verwenden dafür zumeist ein Interpolationsverfahren wie bilineare Filterung (oder Interpolation). Es funktioniert für Fotos recht gut und stellt einen Kompromiss zwischen Qualität und Geschwindigkeit dar.
Wenn viele oder große Bilder zu skalieren sind, wird der Ressourcenbedarf des Verfahren aber doch merklich. Und für Bilder, die keine Fotos, sondern Grafiken mit scharfen Kanten sind, führt ein für Fotos vorgesehenes Verfahren zu unerwünschten verschwommenen Übergängen.
Die CSS Images Module 3 Spezifikation adressiert dieses Problem und führt die Eigenschaft image-rendering ein. Hiermit können Sie Einfluss auf den verwendeten Skalierungsalgorithmus nehmen. Leider ist die Browserunterstützung auch in 2023 noch relativ uneinheitlich.
Diese CSS Eigenschaft ist vom SVG Präsentationsattribut gleichen Namens abgeleitet, verwendet aber andere Werte.
img {
image-rendering: crisp-edges;
}
Das Beispiel zeigt ein Bild, das auch in der CSS Spezifikation verwendet wird. Mithilfe von fünf Buttons kann der image-rendering Eigenschaft des hochskalierten Bildes ein Wert zugewiesen werden. Dies geschieht im Beispiel der Einfachheit halber nicht über das Stylesheet, sondern durch direkte Zuweisung an das style-Attribut des img Elements.
Die genaue Bedeutung der einzelnen Werte ist etwas vage. Die Spezifikation hat sich einige Male verändert, und der neueste Arbeitsentwurf (WD2022) weicht von der Kandidatenempfehlung (CR2020) von 2020 ab. In der MDN Dokumentation stehen teils wieder andere Dinge - vermutlich, weil der dortige Text verfasst wurde, als die Spezifikation noch einen anderen Stand hatte.
-
auto - Standardwert. Der Browser wählt den Skalierungsalgorithmus aus. Normalerweise handelt es sich hier um die bilineare Filterung, bei dem ein Bildpunkt im skalierten Bild auf seine Position im ursprünglichen Bild umgerechnet wird und dann ein gewichteter Mittelwert der Farbwerte der umgebenden Bildpunkte gebildet wird. Je näher ein Original-Bildpunkt an der berechneten Position ist, desto stärker geht sein Farbwert in den gebildeten Mittelwert ein.
-
crisp-edges - Mit diesem Wert soll der Browser ein Interpolationsverfahren wählen, das Kontrast und Kanten im Bild erhält und weder Farben glättet noch Unschärfe im Bild erzeugt (CR2020). WD2022 verlangt explizit das nearest-neighbour Interpolationsverfahren. Sie können sich das so vorstellen, dass wie bei der bilinearen Filterung eine Position im Orignalbild errechnet wird, die Koordinaten dann aber einfach auf ganze Zahlen gerundet werden und der Farbwert dieses Bildpunktes verwendet wird.
- Chromium-Browser kennen diesen Wert nicht und bleiben bei
auto. MDN behauptet zwar, dass Chrome einen alternativen Namen-webkit-optimzie-contrastkennen würde, steht damit aber im Widerspruch zu caniuse.com, wo dieser Wert nur für ältere Safari-Versionen genannt wird. Eigene Versuche geben caniuse recht, Chrome kennt - zumindest in 2022 - diesen Wert nicht oder nicht mehr. - Firefox kennt diesen Wert, dem Augenschein nach interpretiert er ihn aber als
pixelated. -
pixelated - Der Browser soll als Interpolationsverfahren nearest-neighbour oder ein ähnliches Verfahren verwenden, um im Bild ein „pixeliges Aussehen“ zu erhalten (CR2020). WD2022 ergänzt das so, dass die pixelige Natur des Bildes möglichst erhalten bleiben soll, aber leichte Glättungen zulässig sind, um unangenehme Verzerrungen zu vermeiden.
-
smooth - Der Browser soll einen qualitiativ hochwertigen Interpolationsalgorithmus wählen, der für Fotos geeignet ist.
- Zur Zeit (2022) ist dieser Wert noch in keinem Browser implementiert.
-
high-quality - Ähnlich wie
smooth, aber ein mithigh-qualitygekennzeichnetes Bild soll vorrangig mit einem anspruchsvollen Algorithmus bearbeitet werden, sofern die Leistungsressourcen auf dem Computer eingeschränkt sind. - Zur Zeit (2022) ist dieser Wert noch in keinem Browser implementiert.
-
optimizeSpeedundoptimizeQuality - Diese Werte werden in der SVG Spezifikation verwendet und befanden sich kurzfristig auch in der CSS Spezifikation. Deshalb werden sie dort als Kompatibilitätswerte geführt und entsprechen den Angaben
smoothundpixelated.
Siehe auch
- img:hover?
- figure und figcaption
- Bilderzoom mit Grid Layout
- Popover
- Lightbox
- Thumbnail und Großansicht
- Bildwechsler
- Polaroid-Galerie
- CSS-Karussell
- Heute noch sinnvoll?
