ImageSet Retina Optimierung

Ein üblicher Weg neben WebFonts, IconFonts und SVG Grafiken für die Retina Optimierung sind Bilder die per Media Query eingebettet sind. Meist handelt es sich hierbei um Sprite-Dateien.

Ein essentieller Nachteil der Einbettung über Media Query ist das man beim Sprite Sheet jeden eintrag background-position neu anpassen muss, und dies gerade bei großen Sprites zu einem enormen Aufwand führt was das CSS angeht.

background-image: url(assets/no-image-set.png);
background-image: -webkit-image-set(url(assets/test.png) 1x, url(assets/test-hires.png) 2x);

Diese Technik hat mehrere Vorteile.

  1. Man braucht keine angepassten Koordinaten für die background-position.
  2. Es ist ein sehr kurzer und klarer Code.

Aktuell funktioniert diese Technik in Safari 6+ und Chrome 21+. Dieses Feature ist aktuell noch in der Entwicklung, dies sollte man berücksichtigen sofern man plant dies auf einer Live Seite einzusetzen. Hat also den Nachteil das dieses Feature nicht für Firefox funktioniert.

Quelle: http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/

christoph has written 58 articles

One thought on “ImageSet Retina Optimierung

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>