WordPress Website für Retina-Bildschirme optimieren – Anleitung

Immer mehr Hersteller verwenden immer höher aufgelöste Bildschirme bei Ihren Laptops und Monitoren. Apple ist mit seinem Retina-Display ganz Vorne mit dabei. Heute zeige ich deshalb wie man seine WordPress Website für Retina-Bildschirme optimiert.

HD, Full HD und U-HD bzw. 4K, immer wieder werben TV-Hersteller mit noch höheren Auflösungen bei ihren Geräten. Bei Laptops und PC-Bildschirmen sieht es da nicht anders aus. Mit seinen Retina-Bildschirmen treibt Apple die Auflösung von Ihren Geräten extrem weit (das MacBook Pro Retina 13 Zoll hat eine Auflösung von 2560 × 1600 px ). Webseiten sehen so noch schärfer aus und vor Allem Bilder und Videos können in Ihrer vollen Pracht präsentiert werden. Voraussetzung dafür ist jedoch, dass auch Bilder in entsprechender Auflösung vorhanden sind. Jetzt zeige ich wie man seine Website für genau diese Herausforderungen fit macht.

Retina Bilder auch nur für Retina-Display’s

Obwohl eine Vielzahl von Internet-Usern ein MacBook mit Retina Display nutzen, sollte man auch die die berücksichtigen, die mit niedriger Bildschirm-Auflösung unterwegs sind. Ersetzt man die Bilder auf seiner Seite lediglich, führt das zu unnötig langen Ladezeiten und Trafficverbrauch bei nicht-Retina Usern.

Damit das nicht passiert, gibt es ein praktisches Plugin für WordPress, bei dem zusätzliche Bilder für Retina-Displays festgelegt werden können. Die WordPress Erweiterung entscheidet anschließend anhand von der Auflösung des Besuchers, welches Bild geladen werden soll. Hier kann man das Plugin downloadenAls Daumenregel gilt, dass Bilder für Retina Bildschirme ungefähr die doppelte bis vierfache Auflösung haben sollten, wie die für normale Bildschirme. Das Plugin warnt einen jedoch, wenn das hochgeladene Bild ein zu geringe Auflösung aufweist.

SVG’s für schnelleres Laden

Eine weitere Möglichkeit die Ladezeit zu verbessern und gleichzeitig für Retina-Bildschirme zu optimieren ist die Verwendung von Vektorgrafiken und Webfonts auf seiner Website. Über die verschiedenen Bildformate habe ich in diesem Artikel schonmal näher berichtet. SVG haben keine Pixel sondern basieren auf Vektoren, dadurch werden Grafiken wie Icons und Logos auf allen Bildschirmen gestochen scharf dargestellt. Außerdem werden SVG-Dateien besonders schnell geladen und angezeigt, was für eine bessere Performance sorgt.

Websitegeschwindigkeit optimieren

Wenn das Plugin nun entsprechend der Bildschirmauflösung des Besuchers ein Bild mit höherer Auflösung lädt, kann es zu längerer Wartezeit kommen. Auch das sollte man berücksichtigen und soweit wie möglich abfangen. Ein weiteres tolles Plugin für WordPress, welches ich schon im Rahmen des Artikels „WordPress Website Ladezeit optimieren“ vorgestellt habe, eignet sich sehr gut dazu. Es handelt sich hierbei um W3 total Cache von Frederick Townes. Das Plugin bietet eine Vielzahl von Einstellungsmöglichkeiten um die Ladegeschwindigkeit seiner Website zu verbessern und greift dabei tief in die Trickkiste.

Setzt man die beiden vorgestellten Plugins auf seiner Website ein, befolgt die Tipps der Hersteller und nutzt für seine Grafiken SVG’s, hat man seine Website sehr gut für Retina-Bildschirme optimiert und dabei zusätzlich den Ladezeit Aspekt berücksichtigt.

0 Kommentare

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

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