Reti­na-Gra­fi­ken nut­zen, wenn es sinn­voll ist

Eine Sache, die ich bis­her eini­ger­ma­ßen ver­nach­läs­sigt hab: Reti­na-Gra­fi­ken. Wer kein Reti­na-Dis­play hat, wird die ver­bes­ser­ten Ver­sio­nen sowie­so nicht sehen, war­um also genau da Ener­gie ver­schwen­den? Tat­säch­lich aber ging es mir dann doch ziem­lich auf die Ner­ven, dass Schrif­ten und Farb­blö­cke gesto­chen scharf waren, Bil­der und Logos aber sehr ver­wa­schen aus­sa­hen. Da hel­fen dann doch nur grö­ße­re Bil­der, die auf den Reti­na-Screens „run­ter­ska­liert“ werden.

Der nächs­te Gedan­ke: ist ja schnell gemacht, ein­fach dop­pel­te Grö­ße ein­bin­den und fer­tig. Aller­dings fin­det Goog­le das wie­der­um alles ande­re als lus­tig, was sogar nach­voll­zieh­bar ist: war­um 300px laden, wenn nur 150 Pixel genutzt werden?

Die Lösung ist dabei so ein­fach wie effi­zi­ent und wird von Word­Press schon län­ger genutzt: src­set. Mit die­sem Attri­but kann man ein­fach für ver­schie­de­ne Fäl­le den Brow­ser ent­schei­den las­sen, wel­che Bild-Vari­an­te er dar­stellt. Das ist hilf­reich bei Respon­si­ve Design, aber eben auch wenn es dar­um geht, Reti­na-Dis­plays die pas­sen­de Vari­an­te zu liefern.

Ein ein­fa­ches Beispiel

Hier mal eine Vari­an­te für non-Retina-Displays:

Und hier die glei­che Vari­an­te für Retina-Displays:

Grö­ßen­tech­nisch ein ordent­li­cher Unter­schied. Logisch ist dann auch, dass die zwei­te Vari­an­te in ver­klei­ner­ter Dar­stel­lung schär­fer wird, da mehr Pixel auf weni­ger Platz. Das End­ergeb­nis sieht dann so aus:

(wer die­sen Bei­trag ohne Reti­na-Dis­play auf­ruft, wird kei­nen Unter­schied zum ers­ten Bild sehen).

Wie das Gan­ze nun also umset­zen? Ein­fach so:

<img title=“Big Balls Hos­ting“ src=“https://www.nginxwordpresshosting.com/wp-content/uploads/2017/01/big-balls.png“ srcset=“https://www.nginxwordpresshosting.com/wp-content/uploads/2017/01/big-balls.png 1x, https://www.nginxwordpresshosting.com/wp-content/uploads/2017/01/big-balls_retina.png 2x“ alt=“Big Balls Hosting“ />

Schaut man sich das src­set-Attri­but genau­er an, sieht man, dass dort zwei Anga­ben gemacht sind, näm­lich ein­mal ein Bild für 1x und ein­mal für ein Bild für 2x. Und genau da pas­siert die Magic, die dem Brow­ser sagt: „Kannst du kein Reti­na, nimm die Vari­an­te für 1x. Bist du cool und kannst Reti­na, dann nimm die Vari­an­te für 2x“. Und das macht dann auch kei­ne Pro­ble­me mit Goo­gles Pagespeed-Tool.

Wer es noch umfas­sen­der haben möch­te, schaut sich mal das Plug­in WP Reti­na 2x an. Haben wir hier nicht getes­tet und auch nicht im Ein­satz, aller­dings kam es mir bei der Suche nach mei­nem Pro­blem immer wie­der unter die Nase. Aber bedenkt: Reti­na-Bil­der neh­men auch phy­si­schen Spei­cher­platz auf der Fest­plat­te ein – und ihr hät­tet wie­der ein Plug­in mehr im Ein­satz. Wer nur ein paar Bil­der opti­mie­ren will, greift zur eben beschrie­be­nen DIY-Variante.