Mehr über das Makeover für das SELF-Wiki im SELF-Blog!

Bilder im Internet/Einbindung mit img

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

Element ohne Inhalt?[Bearbeiten]

<img> ist ein sogenanntes Standalone-Tag ohne Elementinhalt und ohne End-Tag.

Beispiel
<img src="selfhtml.png" alt="Selfhtml">

Die Grafik wird nicht direkt im HTML-Dokument, bzw. im img-Tag gespeichert, sondern bleibt an ihrem Speicherort.

Bildquellen mit src und srcset angeben[Bearbeiten]

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:

  1. Ist Ihr HTML-Markup valide?
  2. Befinden sich die Bilder auch wirklich in dem Verzeichnis, das referenziert wurde?
  3. Sind URL und Dateiname wirklich identisch?
    Windows ist case-insensitiv, sodass src="bild.jpg" auch bild.JPG laden würde. Auf dem (Linux)-Server würde er vergeblich die Datei mit der kleingeschriebenen Dateiendung suchen.
    Beachten Sie die Konventionen für Dateinamen!
Hauptartikel: Referenzieren in HTML

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)
Einbinden von Bildateien mit srcset
<img src = "feuerwehr-320.jpg" srcset = "feuerwehr-640.jpg 2x, feuerwehr-960.jpg 3x, feuerwehr-1280.jpg 4x" alt="Bild unseres neuen Einsatzfahrzeugs" >

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.

Hauptartikel: Bilder im Internet/responsive Bilder mit picture

alt - Beschreibungen für Bilder und Grafiken[Bearbeiten]

Img-not-found.png

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.

Beachten Sie:

Das alt-Attribut ist eine Pflichtangabe.

Der Alternativtext muss nicht unbedingt eine ausführliche Beschreibung sein. Oft ist die Bedeutung in wenigen Worten hinreichend erklärt.[1] Gelegentlich kann es jedoch notwendig sein, eine längere Erläuterung beizufügen, etwa bei Fotos oder Karikaturen. Hier eignet sich die Einbindung der Grafik in ein figure-Element mit einer figcaption-Bildunterschrift besser als der Alternativtext. Dennoch darf auch hier nicht auf ein alt-Attribut verzichtet werden.[2]
Hauptartikel: Barrierefreiheit/Grafiken und Multimedia zugänglich gestalten

(optionale) Breiten- und Höhenangaben[Bearbeiten]

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 Einheit px) und Prozentangaben zulässig).
<img>-Tag mit Pflicht-, bzw. Breiten- und Höhenangaben ansehen …
<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>
ansehen …
Empfehlung: Sie sollten stets die Breite und Höhe der Grafik im Quelltext mit angeben. Dadurch entnimmt der Web-Browser bereits der HTML-Datei, wie groß die Grafik ist, und muss nicht warten, bis er die entsprechende Header-Information der Grafikdatei ausgelesen hat. So kann er die gesamte Web-Seite bereits am Bildschirm aufbauen und bei noch nicht eingelesenen Grafiken erst mal eine entsprechend große Freifläche anzeigen.
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[Bearbeiten]

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:

flexible Breiten für Bilder 
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.

Hauptartikel: CSS/Tutorials/Ausrichtung/Inhalte zentrieren
Empfehlung: Setzen Sie entweder eine Breiten- oder eine Höhenangabe. So können Sie sicherstellen, dass auch bei einer eventuellen Änderung der Grafik das richtige Seitenverhältnis dargestellt wird. Sie können dies aber auch mit der aspect-ratio-Eigenschaft festlegen.

Es ist ebenso möglich, eine Maximalbreite anzugeben:

Maximalbreite 
img {
  width: 100%;
  max-width: 500px; 
  height: auto;
}

Lazy Loading[Bearbeiten]

Das loading-Attribut legt fest, wie externe Medien geladen werden sollen.[3]

Browserunterstützung
caniuse.com

erlaubte Werte

  • auto (Standardwert) Browser lädt Grafiken …
  • eager: Medien above the fold sollen bevorzugt geladen werden. (Der Begriff Above the fold beschreibt im Printdesign die sichtbare Hälfte einer Zeitung, im Webdesign den Bereich einer Website, der dem Besucher auf den ersten Blick angezeigt wird, also nicht erst durch Scrollen sichtbar wird. Mit CSS allein kann nicht erkannt werden, ob sich ein Bereich innerhalb des Viewports befindet. Mit getBoundingClientRect kann dies per JavaScript ermittelt werden.)
  • lazy: Medien außerhalb des sichtbaren Bereichs sollen erst geladen werden, wenn der Benutzer scrollt.
Lazy Loading 
  <img src="hund.jpg" loading="lazy" width="1000" height="750" alt="..." >
Beachten Sie: Die Browser führen das späte Laden aber nur durch, wenn width- und height-Attribut der Bilder im img-Tag notiert sind.

Bilder mit CSS gestalten[Bearbeiten]

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[Bearbeiten]

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.

Bilder mit Filtern und Rahmen ansehen …
#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 rgba(0,0,0,.25) inset, 0 5px 10px 5px rgba(0,0,0,.25);
  padding:3vmin;
  position:relative;
}
#blackwhite:before {
    border-radius:2px;
    bottom:-2vmin;
    box-shadow:0 2px 5px 0 rgba(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 rgba(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');
}
ansehen …

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[Bearbeiten]

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:

object-fit ansehen …
.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}
ansehen …

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[Bearbeiten]

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.

kreisrunder Ausschnitt ansehen …
.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;
}
ansehen …

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[Bearbeiten]

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:

Panorama mit object-position verschieben ansehen …
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;
}
ansehen …

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.

Bildunterschriften[Bearbeiten]

Um Bildern eine passende Erklärung oder Bildunterschrift zu geben ist das figcaption-Element in Verbindung mit dem figure-Container ideal. Es ist vor allem aus Gründen der Semantik den leider immer noch häufig anzutreffenden Lösungen mit verschachtelten div-Elementen vorzuziehen.

Präsentieren eines Bildes mit figure und figcaption ansehen …
<figure>
	<img src="lauf-1.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
	<figcaption>Lauf an der Pegnitz - Nürnberger Tor</figcaption>
</figure>
ansehen …

Als Container für das img-Element und die figcaption dient ein figure-Element.

Nur mit dem default-CSS der Browser sieht das Ergebnis zunächst einmal wenig ansprechend aus. Deshalb setzen wir unsere Vorstellungen mit ein wenig CSS um:

CSS für figure und figcaption ansehen …
figure {
  position: relative;
  margin: 0;
  padding: .5em;
  width: 100%;
  border: thin solid gainsboro;
  background: white;
  width: 100%;
}


@media (min-width: 25em) {
  figure {
    width: 20em;
    float: right;
  }
}

figcaption {
  padding: .8em;
  text-align: center;
}
ansehen …

Hier werden einige Einstellungen festgelegt, die erst später wichtig werden:

Mehrere Bilder nebeneinander[Bearbeiten]

Während in Fließtexten oft ein einzelnes Bild integriert ist, will man häufig mehrere Bilder nebeneinander präsentieren. Das figure-Element kann auch verschachtelt werden:

Präsentieren mehrerer Bilder mit verschachtelten figure-Elementen ansehen …
<figure id="gallery">
  <figcaption>Ansichten von Lauf an der Pegnitz</figcaption>

  <figure>
    <img src="//wiki.selfhtml.org/images/a/a6/Lauf-1.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
    <figcaption>Nürnberger Tor</figcaption>
  </figure>

  <figure>
    <img src="//wiki.selfhtml.org/images/4/4a/Lauf-2.jpg" alt="Lauf an der Pegnitz - Pegnitz">
    <figcaption>Brücke über die Pegnitz</figcaption>
  </figure>

  <figure>
    <img src="//wiki.selfhtml.org/images/2/24/Lauf-3.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
    <figcaption>Mauermühle und Judenturm</figcaption>
  </figure></figure>
ansehen …

Um die einzelnen Bilder nebeneinander zu positionieren, gibt es mehrere Möglichkeiten in CSS:

  • Die figure-Elemente sind Block-Elemente, die mit display: inline-block; nebeneinander positioniert werden können
    → dafür müssen sie dann passende Breiten und Abstände erhalten.
  • ein ähnlicher Effekt ist mit flexbox möglich. Hier kann man mit justify-content noch bestimmen, wie ein einzelnes Kindelement in der letzten Zeile positioniert wird.
  • mit Grid Layout wird das Elternelement zum Grid Container. Es kann eine feste Spaltenanzahl festgelegt werden, es ist aber auch möglich Raster implizit zu erzeugen, die durch den auto-placement-Algorithmus Rasterelemente automatisch auf den verfügbaren Platz verteilen.
CSS-Einstellungen 
#gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  gap: 1em;
}

#gallery > figcaption {
  grid-column: 1 / -1;
}

Um im CSS ein figure figure zu vermeiden, geben wir der Bildergalerie eine ID mit Namen gallery.

Folgende Einstellungen sind wichtig:

  • display: grid: erzeugt das Raster
  • grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));: erzeugt Rasterlemente, die zwischen 15em und einem Bruchteil des verfügbaren Platzes breit sind.
  • gap: 1em;: erzeugt einen Abstand zwischen den Rasterelementen, aber nicht außen.

Einziges Problem ist die figcaption der gesamten Galerie. Ohne weitere Festlegungen würde sie das erste Rasterlement links neben dem ersten Bild einnehmen. Mit …

  • grid-column: 1 / -1; erstreckt es sich aber über die gesamte Breite von der ersten bis zur letzten (-1 = von rechts gezählt) Rasterlinie

Einschwebende Bildunterschriften[Bearbeiten]

Normalerweise ist figcaption unterhalb des img im figure-Elternelement positioniert. Wir wollen es jetzt über den unteren Bildrand positionieren. Damit das Bild noch erkennbar bleibt, soll die Bildunterschrift einen durchscheinenden Hintergrund bekommen:

absolute Positionierung der Bildunterschrift ansehen …
#gallery figure {
  position: relative;
}

figure img {
  width: 100%;
  display: block;
} 

#gallery > figure > figcaption {
  position: absolute;
  bottom: 0;
  width: 100%;
  line-height: 3em;
  color: white;
  background: rgba(0,0,0,.3);
}
ansehen …

Zuerst müssen wir
a #gallery figure relativ und
b #gallery > figure > figcaption absolut positionieren.

Danach wird figcaption mit bottom: 0; unten platziert.

Beachten Sie: Damit bottom: 0; auch wirklich mit dem figure, bzw. img-Element unten bündig abschließt, muss ebenfalls img {display: block;} festgelegt werden.

Folgende Einstellungen sind noch wichtig:

  • width: 100%;: sorgt dafür, dass die Bildunterschrift über die gesamte Breite geht.
  • color: white;: der Text wird weiß,
  • background: black;: der Hintergrund ist als schwarzer, bzw. grauer Balken sichtbar.
  • opacity: 0.3;: Der Hintergrund wird durchscheinend. Dies gilt aber auch für den Text, sodass ein zu niedriger Wert < 0.3 fast nicht lesbar ist.

Der Hover-Effekt[Bearbeiten]

Trotz durchscheinendem Hintergrund liegt nun ein Balken über unserem Bild. Wir können diesen im Normalfall verschwinden lassen und erst bei :hover einschweben lassen:

einschwebende Bildunterschrift 
#gallery > figure > figcaption {
  opacity: 0;
  bottom: -3em;
  transition: all 1s ease;
}

#gallery > figure:hover > figcaption {
  opacity: 1;
  bottom: 0;
}

Im mittleren Bild wird die Bildunterschrift im Normalzustand durch bottom: -3em; unterhalb des Rands positioniert. opacity: 0 verhindert, dass die Bildunterschrift sichtbar ist.

Erst bei :hover wird die Bildunterschrift mit opacity: 1; sichtbar und durch bottom: 0; an den unteren Rand geschoben.

Das overflow: hidden; des figure-Element verhindert, dass die Bildunterschrift schon außerhalb des Bildes zu sehen ist.

Alternativen ansehen …
#gallery > figure.mitte > figcaption {     
  width: 0;
  left: 50%;
} 
	  
#gallery > figure.rechts > figcaption {      
  width: 0;
  bottom: 50%;
  left: 50%;
  overflow: hidden;
}
ansehen …

Die mittlere Bildunterschrift hat zusätzlich eine Breite von 0. Bei :hover dehnt sich die Bildunterschrift aus der Mitte heraus in ihre Originalposition.

Die rechte Bildunterschrift entspringt in der Mitte des Bildes und schiebt sich dann nach unten.

Wo kommt das Fragezeichen her?[Bearbeiten]

Damit man überhaupt weiß, dass es eine (im Normalfall ja nicht sichtbare) Bildunterschrift gibt, wird mittels Pseudoelement ::before ein Fragezeichen im linken unteren Bildrand platziert.

einschwebende Bildunterschrift 
#gallery figure::before { 					
  content: "?"; 
  position: absolute; 
  bottom: 1em;
  left: 1em;
  background: white; 
  color: black;
  opacity: .7;
  width: 1.5em;
  height: 1.5em;
  border-radius: 1em;
  text-align: center;
  font-size: 1.5em;
  line-height: 1.5em;
  transition: all 1s ease;
}

#gallery figure:hover:before {
  opacity: 0;
}

Sobald der Benutzer mit der Maus über das Bild fährt, verschwindet es wieder. Damit dieser Wechsel nicht zu abrupt erscheint, legen wir mit transition weiche Übergänge fest.




Weblinks[Bearbeiten]

  1. ↑ Jan Hellbusch: Alternative Texte - Die nicht triviale Kunst der Bildbeschreibungen auf den Grund gehen
  2. ↑ TU Chemnitz: Leitfaden für Alternativtexte von Grafiken
  3. ↑ MDN: Lazy loading - Web Performance
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Bilder_im_Internet/Einbindung_mit_img&oldid=86920“