Retina-Assets sind Bilddateien in der doppelten oder dreifachen Auflösung dessen, was sie auf der Seite einnehmen. Sie sind nötig, weil moderne Bildschirme mehrere physische Bildpunkte auf einen CSS-Pixel legen und ein einfach aufgelöstes Bild dort unscharf wirkt.
- Retina-Assets
Bilddateien mit doppelter oder dreifacher Pixelzahl gegenüber ihrer Anzeigegröße, damit sie auf hochauflösenden Bildschirmen scharf bleiben.
Beispiel: „Das Logo liegt nur einfach vor, deshalb sieht es auf dem MacBook ausgefranst aus.“Herkunft: Retina ist ein Markenbegriff von Apple, eingeführt 2010 mit dem iPhone 4. Gemeint ist ein Bildschirm, dessen Punkte aus normalem Betrachtungsabstand nicht mehr einzeln zu erkennen sind. Der Begriff hat sich über Apple hinaus für hochauflösende Bildschirme eingebürgert.
Auch: 2x-Assets oder 3x-Assets, benannt nach dem Faktor gegenüber der Anzeigegröße.
Warum ein Bild unscharf wirkt
Ein CSS-Pixel ist eine Rechengröße. Auf einem einfachen Bildschirm entspricht ihm ein physischer Bildpunkt, auf einem hochauflösenden zwei oder drei in jeder Richtung. Ein Bild, das mit 400 Pixeln Breite abgelegt und mit 400 CSS-Pixeln dargestellt wird, muss dort also auf 800 oder 1200 physische Punkte hochgerechnet werden. Diese Interpolation erzeugt die weichen Kanten.
Besonders auffällig ist der Effekt bei Logos, Symbolen und allem mit klaren Kanten. Bei Fotos fällt er weniger auf, weil dort ohnehin weiche Übergänge dominieren.
Wie es richtig gemacht wird
Für Grafiken mit klaren Formen ist SVG die bessere Antwort als jede Pixelgrafik: Das Format kennt keine Auflösung und ist bei jedem Faktor scharf. Für Fotos übernimmt das die Angabe mehrerer Größen, aus denen der Browser die passende wählt.
<img src="/team-400.jpg"
srcset="/team-400.jpg 400w, /team-800.jpg 800w, /team-1200.jpg 1200w"
sizes="(max-width: 640px) 100vw, 400px"
width="400" height="300" alt="Das Team im Büro">Der Browser entscheidet daraus selbst, welche Datei er lädt, und berücksichtigt dabei sowohl die Anzeigegröße als auch die Punktdichte des Bildschirms. Statamic, TYPO3 und WordPress erzeugen diese Größen auf Wunsch automatisch, sodass die Redaktion nur eine hochauflösende Datei hochlädt.
Wo die Grenze liegt
Mehr Auflösung kostet Ladezeit, und der Gewinn nimmt ab. Der Unterschied zwischen einfacher und doppelter Auflösung ist deutlich sichtbar, der zwischen doppelter und dreifacher kaum noch, während sich die Dateigröße erneut spürbar erhöht. Wir liefern deshalb üblicherweise bis zum doppelten Faktor aus und setzen stattdessen auf moderne Formate wie WebP oder AVIF, die bei gleicher Qualität deutlich kleiner ausfallen.