Springe zum Hauptinhalt

So erstellen Sie Retina-Ready Bilder für Ihre WordPress Website

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Wir leben in einer hochauflösenden Welt. Und da die meisten von uns mehr als acht Stunden am Tag damit verbringen, verschiedene Bildschirmtypen zu betrachten, ist die Qualität der Bilder und Zeichen auf diesen Bildschirmen sehr wichtig.

Obwohl sie erst seit einigen Jahren erhältlich sind, sind Retina-Displays der Weg der Zukunft. Die hohe Pixeldichte in Retina-Displays sorgt für klare und gestochen scharfe Bilder. Und wer mag keine schönen und scharfen Bilder?

Das Erlernen des Erstellens einer Retina-freundlichen Website ist für jeden Webentwickler ein wichtiger Vorteil. Leider gibt es keine ideale Lösung, um Ihre Website mit Retina-Ready-Displays benutzerfreundlich zu gestalten. Während wir darauf warten, dass jemand die umfassendste Lösung findet, haben wir uns einige der besten Optionen für die Vorbereitung Ihrer Website angesehen. Auf diese Weise gehen Sie nicht verloren, wenn auf allen Geräten in der einen oder anderen Form Retinas angezeigt werden.

Mehrere Bilddateien erstellen

Beginnen wir mit den Grundlagen. Die einfachste Möglichkeit, den Retina-Modus für Ihre Website zu unterstützen, besteht darin, mehrere Bildvarianten in verschiedenen Auflösungen zu erstellen. Dies bedeutet, dass Sie für jeden Auflösungstyp (dh @ 1x) eine hochauflösende Version dieses Elements (dh 2x) erstellen müssen.

Grundsätzlich können Sie mehrere Versionen derselben Datei erstellen und ein Plugin wie WP Retina 2x oder ein Skript wie retina.js verwenden, um automatisch "@2x" -Versionen jeder Bildgröße zu generieren oder "@2x" -Bilder zu finden und anzuzeigen Größe entsprechend jedem Gerät.

Es ist richtig, dass das Erstellen mehrerer Versionen desselben Images zeitaufwändig sein kann. Leider gibt es keine schnelle Methode, die diese Bilder automatisch für Sie generiert. Es gibt jedoch mehrere Photoshop-Plugins, mit denen Sie Ihre Bilder schnell reparieren können.

Plugins wie " Retiniere es Dies ist eine Reihe von Photoshop-Aktionen, mit denen Sie auf einfache Weise Ihre Designs für Retina-Displays optimieren können. Wenn Sie eine ältere Version von Photoshop (Pre-CC) verwenden, können Sie so etwas wie " Vier Das ist im Wesentlichen alles, was das aktuelle Photoshop Generator-Tool leistet, aber für frühere Versionen von Photoshop.

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

Skalierbare Vektorgrafiken (SVG)

Der einfachste Weg, um im Retina-Modus voranzukommen, ist die Verwendung des SVG-Formats (Scalable Vector Graphics) auf Ihrer Website. SVG ist ein XML-basiertes Vektorbildformat. Wie der Name schon sagt, ist ein SVG-Bild skalierbar. Dies bedeutet, dass Bilder so weit (oder so wenig) wie nötig gestreckt werden können und dabei scharf und klar bleiben. Dies kann eine schnelle und einfache Möglichkeit sein, den Retina-Modus ohne großen Aufwand zu implementieren.

Die Verwendung von SVG unter WordPress hat jedoch zwei Nachteile. Das erste ist, dass SVG nicht für alle Bilder geeignet ist, da es sich um ein Vektorformat handelt. Sie können SVG also für Logos und Symbole verwenden, nicht jedoch für Dateien wie Fotos (Das ist etwas schmerzhaft, wenn Sie hochauflösende Bilder für Ihre Website verwenden möchten). Wenn Sie jedoch einfache Symbole, Animationen oder Illustrationen verwenden möchten, können SVG-Dateien durchaus eine Option für eine Retina-kompatible Website sein.

Der zweite Nachteil bei der Verwendung von SVG unter WordPress ist, dass es aus Sicherheitsgründen kein offiziell mit WordPress kompatibles Format ist. Da es sich bei einer SVG-Datei im Wesentlichen um eine XML-Datei handelt, wird diese für alle bekannten Sicherheitslücken im Zusammenhang mit dem XML-Dateiformat geöffnet, z. B. für Zwangsanalysen, Angriffe auf externe XML-Entitäten (XEE) und Angriffe XML-Denial-of-Service-Angriffe (XDoS) usw.

Es gibt jedoch eine Möglichkeit, die SVG-Unterstützung für Ihre WordPress-Site zu aktivieren, wodurch Ihre SVG-Dateien sicher werden.

So aktivieren Sie SVG sicher in WordPress

Safe SVG ist ein Plugin, mit dem Sie die Unterstützung für SVG-Dateien auf Ihrer WordPress-Site sicher aktivieren können. Dieses Plugin stellt sicher, dass Ihre SVG-Dateien desinfiziert werden, um potenzielle XML-Sicherheitslücken auf Ihrer Website zu vermeiden.

Vermeiden Sie Plugins, bei denen der MIME-Typ das Herunterladen von SVG in die WordPress-Medienbibliothek zulässt, da diese gefährlich und potenziell gefährlich für Ihre Site sind. Wenn Sie also wirklich versucht sind, das SVG-Format in WordPress zu verwenden, stellen Sie sicher, dass Sie es sicher tun und nicht das erste SVG-Plugin herunterladen, das Sie sehen.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Einige Plugins zur Integration der Retina-Kompatibilität in WordPress

Es gibt verschiedene Skripte und Plugins für die Retina-Kompatibilität, die Ihnen das Einrichten einer Retina-kompatiblen Website erheblich erleichtern können. Wie bereits erwähnt, ersetzen die meisten verfügbaren Plugins und Skripte Ihre Bilder nur für hochauflösende Anzeigen durch hochauflösende Bilder. Sie verlängern sich nicht wie eine SVG-Datei: Sie müssen immer noch mehrere Bilder mit unterschiedlichen Auflösungen erstellen.

retina.js

retina.js http://imulus.github.io/retinajs/ ist eines der am häufigsten verwendeten Skripte zum Bereitstellen von Bildern mit hoher Auflösung. Dies ist ein Open-Source-Skript, das Geräte mit Retina-Displays problemlos mit Bildern in hoher Auflösung versorgen kann.

Das Skript überprüft jedes Bild auf der Seite, um festzustellen, ob auf dem Server eine hochauflösende Version dieses Bildes vorhanden ist. Wenn eine hochauflösende Variante vorhanden ist, tauscht das Skript die Standardauflösung mit dem hochauflösenden Bild aus. Dies ist eine der häufigsten Methoden, um Bilder für Retina-Displays auf Ihrer Website bereitzustellen.

Dicht

Ähnlich wie retina.js, Dicht ist ein jQuery-Plugin, mit dem Bilder auf einfache Weise im Pixel-Ratio-Format bereitgestellt werden können. Das Skript ruft die Initialisierungsmethode $ .fn.dense () auf, die auf die "img" -Tags abzielt, die bei Bedarf Retina-kompatible Bilder liefern.

Es ersetzt also alle Bilder durch die jeweils hochauflösende Version, genau wie das Skript retina.js.

WP Retina 2x

Letzteres kann mit einem magischen Bildgenerator Retina verglichen werden.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

WP Retina 2x ist ein Plugin, das die für High-DPI-Geräte erforderlichen Bilddateien erstellt und Ihren Besuchern entsprechend anzeigt. Im Gegensatz zu den beiden vorherigen Skripten werden aus einem Ausgangsbild Bilder mit unterschiedlicher Auflösung erstellt. Wenn Sie also nicht mit der manuellen Erstellung verschiedener Bilder mit unterschiedlichen Auflösungen zufrieden sind, ist diese Option genau das Richtige für Sie.

Das ist alles für dieses Tutorial. Ich hoffe, Sie können Ihre Bilder in ein Bild für die Netzhaut konvertieren.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

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

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
7 Aktien
Aktie6
tweet
Registrieren1