Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 21. November 2017

HTML5 & CSS3: mache deine Website fit für hochauflösende Displays

Als Apple vor eini­gen Jahren anfing, sei­ne iPhones, iPads und MacBooks mit hoch­auf­lö­sen­den Displays – den soge­nann­ten Retina-Displays – aus­zu­stat­ten, hat das zu einer deut­li­chen Verbesserung der Darstellungsqualität geführt. Einzelne Pixel sind auf die­sen Displays nicht mehr als sol­che zu erken­nen. Mittlerweile sind hoch­auf­lö­sen­de Displays längst kei­ne Besonderheit mehr. Vor allem aktu­el­le Mobilgeräte sind schon in der Mittelklasse hoch­auf­lö­send. Während vie­le Apps für Mobilgeräte schon län­ger auf die hohe Auflösung aus­ge­rich­tet sind, las­sen sich mitt­ler­wei­le auch per HTML5, CSS3 und JavaScript hoch­auf­lö­sen­de Websites rea­li­sie­ren – ohne zusätz­li­che JavaScript-Bibliotheken.

Doppelt so scharf dank doppelter Pixeldichte

Als Standardbreite für Mobilgeräte haben sich – his­to­risch bedingt – 320 Pixel eta­bliert. Viele mobi­le Websites sind auf die­se Breite aus­ge­rich­tet. Hochauflösende Displays haben dop­pelt so vie­le oder noch mehr Pixel. Damit eine Website auf die­sen Displays nicht halb so groß erscheint, wird die Seite qua­si hoch­ska­liert. Bei Schriften und Vektorgrafiken ist das kein Problen. Bitmap-basier­te Formate wie JPEG- und PNG-Dateien sehen hin­ge­gen unscharf und pixe­lig aus.

Da sol­che Displays immer häu­fi­ger wer­den, wird es natür­lich für Webdesigner und -ent­wick­ler zuneh­mend wich­ti­ger, Webprojekte in hoch­auf­lö­sen­der Qualität bereit­zu­stel­len.

HTML5 und die „srcset“-Eigenschaft

Lange wur­de dar­um gerun­gen, wie man in HTML5 Bilder für hoch­auf­lö­sen­de Displays bereit­stel­len kann. Mittlerweile herrscht Gewissheit und das „srcset“-Attribut hat sich eta­bliert. Über das Attribut kön­nen meh­re­re Dateiquellen für ver­schie­de­ne Pixeldichten ange­ge­ben wer­den. Die Pixeldichte wird per Leerzeichen getrennt hin­ter den Dateiverweis notiert – zum Beispiel „2x“ für die dop­pel­te Pixeldichte.

<img srcset="bild.jpg, bild@2x.jpg 2x" src="bild.jpg" width="320" height="160" alt="HTML5 & CSS3: mache deine Website fit für hochauflösende Displays" />

Im Beispiel wer­den per „srcset“ zwei Dateien ange­ge­ben. Die ers­te Datei wird bei Displays mit ein­fa­cher Pixeldichte gela­den. Der Wert „1x“ kann bei ein­fa­chen Pixeldichten weg­ge­las­sen wer­den. Es folgt eine Datei für Displays mit dop­pel­ter Pixeldichte. Als Fallback für älte­re Browser soll­te man immer auch das bekann­te „src“-Attribut ange­ge­ben. Dort soll­te dann das „nor­ma­le“ Bild refe­ren­ziert wer­den.

HTML5 & CSS3: mache deine Website fit für hochauflösende Displays
Vergleich zwi­schen Bild mit dop­pel­ter Pixeldichte (oben) und ein­fa­cher Pixeldichte (unten) auf einem hoch­auf­lö­sen­den Display

Statt die Pixeldichte anzu­ge­ben, gibt es auch die Möglichkeit, die phy­si­sche Breite oder Höhe eines Bildes an die jewei­li­gen Dateiquellen inner­halb des „srcset“-Attributes anzu­hän­gen.

<img srcset="bild-320w.jpg 320w, bild-640w.jpg 640w" src="bild-640w.jpg" alt="HTML5 & CSS3: mache deine Website fit für hochauflösende Displays" />

Entscheidet man sich für die­se Variante, wird das Bild immer auf die gesam­te  Browser- bezie­hungs­wei­se Fensterbreite ska­liert – vor­aus­ge­setzt, es wer­den kei­ne „height“- und „width“-Attribute gesetzt.Der Browser wählt dann jeweils die Datei aus, die für die Darstellung benö­tigt wird. Wird das Bild im Beispiel in einer Breite von bis zu 320 Pixel dar­ge­stellt, wird die Datei „bild-320w.jpg“ genom­men. Bei Auflösungen dar­über wird die Datei „bild-640w.jpg“ ver­wen­det.

Über das „sizes“-Attribut hat man nun noch die Möglichkeit, die dar­zu­stel­len­de Breite des Bildes zu beein­flus­sen. Dazu wer­den Media-Angaben in Kombination mit der gewünsch­ten Darstellungsbreite des Bildes ange­ge­ben.

<img srcset="bild-320w.jpg 320w, bild-640w.jpg 640w" sizes="(min-width: 320px) 50vw, (max-width: 320px) 100vw" src="bild-640w.jpg" alt="" />

Im Beispiel wird das Bild bei einer Viewport-Breite von min­des­tens 320 Pixel („min-width: 320px“) so ska­liert, dass es 50 Prozent der Breite des Viewports („50vw“) ein­nimmt. Bei einer Viewport-Breite von weni­ger als 320 Pixel nimmt das Bild den gesam­ten Viewport in der Breite ein („100vw“).

HTML5 & CSS3: mache deine Website fit für hochauflösende Displays
Unterschiedliche Darstellungsbreite: Im Portrait-Modus 100 Prozent und im Landscape-Modus 50 Prozent des Viewports

Innerhalb einer „srcset“-Dateireferenz kann immer nur die Pixeldichte (zum Beispiel „2x“) oder Breite und Höhe (zum Beispiel „320w 160h“) ange­ge­ben wer­den. Eine Kombination von Pixeldichte und Breite bezie­hungs­wei­se Höhe ist nicht mög­lich.

Das „srcset“-Attribut funk­tio­niert auch in Kombination mit dem neu­en „<picture>“- und dem dazu­ge­hö­ri­gen „<source>“-Element. Über das „<picture>“-Element hat man die Möglichkeit, Bilder für ver­schie­de­ne Display- bezie­hungs­wei­se Fenstergrößen fest­zu­le­gen. Auch hier kön­nen dann Quellen für unter­schied­li­che Pixeldichten hin­ter­legt wer­den.

<picture>
  <source srcset="bild-640w.jpg, bild-640w@2x.jpg 2x" media="(min-width: 320px)" />
  <source srcset="bild-320w.jpg, bild-320w@2x.jpg 2x" media="(max-width: 320px)" />
  <img src="bild-640w.jpg" width="320" height="160" alt="" />
</picture>

Im Beispiel wer­den über die bei­den „<source>“-Elemente ins­ge­samt vier Dateiquellen refe­ren­ziert. Display- bezie­hungs­wei­se Fensterbreiten bis 320 Pixel stel­len die Dateien „bild-320w.jpg“ und „bild-320w@2x.jpg“ (je nach Pixeldichte) dar. Bei grö­ße­ren Breiten wer­den die Dateien „bild-640w.jpg“ und „bild-640w@2x.jpg“ auf­ge­ru­fen. Berücksichtigen muss man, dass das „<source>“-Element kei­ne „width“- und „height“-Attribute kennt. Will man die Größenangaben fest­le­gen, muss man dies per CSS machen.

Auch hier­bei soll­te man wie­der ein „<img>“-Fallback bereit­stel­len, um älte­re Browser nicht außen vor zu las­sen.

Das „srcset“- und „sizes“-Attribut sowie das „<picture>“-Element wer­den von Chrome und Firefox jeweils ab Version 38 unter­stützt. Der Internet Explorer unter­stützt die Attribute und das Element der­zeit noch nicht. Android-Chrome ist ab Version 40, iOS-Safari ab Version 8.1 dabei. Letzterer unter­stützt „sizes“ aber nur ein­ge­schränkt.

Wer das „srcset“-Attribut auch für Browser ver­wen­den möch­ten, die es noch nicht unter­stüt­zen, kann sich mit einem Polyfill behel­fen, wel­ches die Funktionalität für älte­re Browser nach­bil­det.

CSS3 und „image-set()“

Auch per CSS3 gibt es mitt­ler­wei­le eine Möglichkeit, unter­schied­li­che Bildquellen für ver­schie­de­ne Pixeldichten anzu­ge­ben. Hierfür steht die „image-set()“-Notation zur Verfügung. In die­ser las­sen sich ähn­lich wie beim HTML5-Attribut „srcset“ meh­re­re Dateien per „url()“ refe­ren­zie­ren. Die Notation „image-set()“ kann über­all dort ein­ge­setzt wer­den, wo eine Bildquelle per „url()“ ange­ge­ben wird.

body {
  background-image: url("hg.jpg");
  background-image: image-set(
    url("hg.jpg") 1x,
    url("hg@2x.jpg") 2x
  );
}

Im Beispiel wird per „image-set()“ eine Hintergrundgrafik für zwei Pixeldichten defi­niert. Derzeit soll­te man die Notation mit ent­spre­chen­den Vendor-Präfixen aus­zeich­nen – zum Beispiel „-webkit-image-set()“. Außerdem ist es auch hier rat­sam, für ein Fallback zu sor­gen. Wichtig ist, dass das Fallback wie im Beispiel vor der „image-set()“-Variante notiert wird. Browser, die „image-set()“ nicht ken­nen, wer­den die zwei­te „background-image“-Eigenschaft igno­rie­ren. Alle ande­ren Browser wer­den die zwei­te Eigenschaft aus­füh­ren und somit die ers­te damit über­schrei­ben.

html5-css3-pixeldichte-hg
Hochauflösender Hintergrund (oben) und nor­mal auf­ge­lös­ter Hintergrund (unten)

Die „image-set()“-Notation wird der­zeit vom Chrome ab Version 31 unter­stützt. Firefox und Internet Explorer unter­stüt­zen sie nicht. Außerdem ken­nen der iOS-Safari ab Version 7.1 und der Android-Chrome ab Version 40 die­se Notation.

Neben der „image-set()“-Notation, wel­che unter­schied­li­che Pixeldichte nur bei Bildern berück­sich­tigt, gibt es auch noch die Media-Query-Angaben „min-resolution“ und „max-resolution“. Hier kön­nen belie­bi­ge CSS-Eigenschaften für ver­schie­de­ne Pixeldichten berück­sich­tigt wer­den.

@media screen and (min-resolution: 2dppx) {
  body {
    background: url("hg@2x.jpg");
  }
}

Im Beispiel wird per „min-resolution“ eine Hintergrundgrafik für Displays mit dop­pel­ter Pixeldichte defi­niert. Die Einheit „dppx“ steht für „dot per pixel“ und somit für die Pixeldichte. Es ste­hen aber auch ande­re Einheiten zur Verfügung. So kann man bei­spiels­wei­se „dpi“ für „dots per inch“ ver­wen­den. Damit ist es bei­spiels­wei­se mög­lich, Bilder in Druckauflösung bereit­zu­stel­len. Als letz­te Einheit gibt es noch „dpcm“, was für „dots per centimeter“ steht. Für die Darstellung auf Monitoren soll­te man die Einheit „dppx“ ver­wen­den.

Das „resolution“-Feature wird von Chrome ab Version 31 und Firefox ab Version 35 unter­stützt. Der Internet Explorer unter­stützt das Feature ab Version 9, aber nur mit der Einheit „dpi“. Android-Chrome kennt das Feature seit Version 40 und iOS-Safari ab Version 7.1 – aller­dings nur in der ver­al­te­ten Schreibweise „min-device-pixel-ratio“ bezie­hungs­wei­se „max-device-pixel-ratio“.

Alternative: Bitmaps grundsätzlich in hoher Auflösung bereitstellen

Die neu­en HTML5-Elemente und -Attribute ermög­li­chen es zwar, Bilder für ver­schie­de­ne Auflösungen und Pixeldichten bereit­zu­stel­len. Allerdings müs­sen meist meh­re­re unter­schied­li­che Dateien für ein Bild gene­riert wer­den. Content-Management-Systeme wie TYPO3 auto­ma­ti­sie­ren dies zwar. Aber bei hand­ge­mach­ten Webprojekten, die ohne ser­ver­sei­ti­ge Programmiersprache aus­kom­men müs­sen, steht man vor der Aufgabe, all die­se Dateivarianten manu­ell zu gene­rie­ren.

Wer die­sen Aufwand scheut, aber den­noch auch hohe Pixeldichten berück­sich­ti­gen möch­te, kann einen Zwischenweg gehen, bei dem man mit jeweils einer Datei für alle Pixeldichten aus­kommt. Dazu wird die Bilddatei direkt in dop­pel­ter Auflösung erstellt – am Besten in redu­zier­ter Qualität –, dann aber mit hal­ber Auflösung in ein HTML-Dokument ein­ge­bun­den. Ein Bild mit 640 mal 320 Pixel Größe wür­de dann also in die­ser Weise ver­wen­det.

<img src="bild-640w.jpg" width="320" height="160" alt="" />

Während hoch­auf­lö­sen­de Displays die vol­le phy­si­sche Auflösung dar­stel­len, wird auf „nor­ma­len“ Displays das Bild auf die Hälfte der Größe her­un­ter ska­liert. Bei nor­ma­ler Pixeldichte wird die schlech­te Qualität durch die ver­klei­ner­te Darstellung wett gemacht. Bei dop­pel­ter Pixeldichte hat man immer noch eine bes­se­re Qualität als bei der Verwendung eines Bildes in nor­ma­ler Auflösung.

Der Nachteil die­ser Herangehensweise ist natür­lich, dass bei Displays mit ein­fa­cher Pixeldichte eine unnö­tig gro­ße Datei her­un­ter­ge­la­den wird. Daher bie­tet es sich an, die­se Möglichkeit nur mit etwas stär­ker kom­pri­mier­ten JPEG-Dateien ein­zu­set­zen.

html5-css3-pixeldichte-kompression
Stark kom­pri­mier­te JPEG-Datei in hal­ber Auflösung (oben)

Auch per CSS kön­nen Bilder in dop­pel­ter Auflösung ein­ge­bun­den wer­den. Mit der Eigenschaft „background-size“ hat man hier­bei die Möglichkeit, das Bild auf die Hälfte der Auflösung her­un­ter zu ska­lie­ren.

body {
  background-image: url("hg.jpg");
  background-size: 32px 16px;

Hat das Hintergrundbild im Beispiel eine Auflösung von 64 mal 32 Pixel, wird es um 50 Prozent ver­klei­nert dar­ge­stellt. Man erreicht somit den­sel­ben Effekt wie beim HTML-Beispiel.

SVG-Grafiken und Iconfonts verwenden

Alle aktu­el­len Browser unter­stüt­zen mitt­ler­wei­le das vek­tor­ba­sier­te SVG-Format. Vor allem Logos und vie­le ande­re gra­fi­schen Elemente sind ja meist als Vektorgrafiken vor­han­den und wur­den bis­lang als GIF- oder PNG-Datei in eine Website ein­ge­bun­den. Dank des SVG-Formates kön­nen die­se auch direkt als Vektorgrafik in einer Website dar­ge­stellt wer­den – sei es per HTML über das „<img>“-Element oder per CSS über „url()“.

Der Vorteil des SVG-Formates liegt auf der Hand: Da es vek­tor­ba­siert ist, wird es stets in bes­ter Auflösung dar­ge­stellt. Zudem schont es die Bandbreite und spart Arbeit, da es nicht für die ver­schie­de­nen Auflösungen und Pixeldichten bereit­ge­stellt wer­den muss.

Alternativ zu SVG-Grafiken sind Iconfonts bes­tens für hoch­auf­lö­sen­de Displays geeig­net. Schließlich sind eben­so Schriften vek­tor­ba­siert und wer­den daher immer in opti­ma­ler Auflösung dar­ge­stellt.

Wer bei SVG-Grafiken auf Nummer sicher gehen und älte­re Browser ohne SVG-Unterstützung berück­sich­ti­gen will, kann mit eini­gen Kniffen hier­für Fallback-Lösungen ein­bau­en.

Pixeldichte mit JavaScript feststellen

Gelegentlich wer­den Bilder per JavaScript gela­den – zum Beispiel bei Galerien. Statt ein „<img>“-Element mit allen „srcset“-Referenzen per JavaScript zu gene­rie­ren, kann auch direkt die rich­ti­ge Bildquelle in der für das Gerät zutref­fen­den Pixeldichte gela­den wer­den.

Denn JavaScript kennt die Eigenschaft „devicePixelRatio“, mit der die Pixeldichte abge­fragt wer­den kann.

if (window.devicePixelRatio > 1) {
  document.getElementsByTagName("img")[0].src = "bild@2x.jpg";
}

Im Beispiel wird eine Bilddatei gela­den, wenn die Pixeldichte grö­ßer 1 ist. Logischerweise kann die Eigenschaft nur aus­ge­le­sen wer­den.

Eine Sache soll­te man bei der Verwendung von „devicePixelRatio“ beach­ten. Denn der durch die­se Eigenschaft ermit­tel­te Wert ist immer abhän­gig vom jewei­li­gen Zoomfaktor des Browsers. Wird ein Dokument per Browserzoom in einer Größe von 150 Prozent dar­ge­stellt, lie­fert „devicePixelRatio“ einen Wert von „1.5“ – bei ein­fa­cher Pixeldichte. Bei dop­pel­ter Pixeldichte wür­de bei die­sem Zoomfaktor der Wert „3“ zurück­ge­ge­ben wer­den.

Fazit und Links zum Beitrag

Webprojekte für hoch­auf­lö­sen­de Displays fit zu machen, kann eine recht umfang­rei­che Aufgabe sein. Allerdings soll­te man – gera­de bei neu­en Projekten – hohe Pixeldichten immer berück­sich­ti­gen. Alle vor­ge­stell­ten Lösungen kön­nen rela­tiv ein­fach mit Fallbacks aus­ge­stat­tet wer­den, sodass man nie Gefahr läuft, älte­re Browser außen vor zu las­sen.

(Der Artikel erschien erst­ma­lig am 16. März 2015 und wur­de von dem Autor vor sei­ner erneu­ten Veröffentlichung auf sei­ne Aktualität hin geprüft.)
(dpe, DO)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

2 Kommentare

  1. Halli, hal­lo,

    nach dem Lesen die­ses Artikels bin ich zwar deut­lich schlau­er gewor­den. Danke dafür aber es stel­len sich bei mir eini­ge Fragen:

    – Die Navigation mit HTML 5: wie soll sie aus­se­hen, ich weiss, dass man die Navi aus SEO-Sicht am bes­ten als Liste dar­stel­len soll­te. Wie soll­te sie aber in HTML 5 aus­se­hen

    – Bilder: Aus SEO-Sicht soll­te man sich das Skalieren von Bilder mit HTML lie­ber spa­ren und die benö­tig­ten Bilder im pas­sen­den Format auf dem Server haben. Wie ist das den in HTML 5, da gibt es sowas wie „sizes“-Attribut. Ist das das glei­che wei Skalieren?

    – Wie schnell soll­te man auf HTML 5 umstel­len und wel­che Auswirkung hat es auf SEO. wur­de es mal irgend­wie gemes­sen?

    Gruß

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.