Wir leben in einer hochauflösenden Welt. Und da die meisten von uns mehr als acht Stunden am Tag damit verbringen, verschiedene Arten von Bildschirmen zu betrachten, die Qualität der Bilder Die in diesen Bildschirmen enthaltenen Zeichen sind sehr wichtig.
Obwohl sie erst seit einigen Jahren erhältlich sind, sind Retina-Displays der Weg der Zukunft. Die hohe Pixeldichte in Retina-Displays macht Bilder klar und scharf. Und wer liebt nicht schöne, gestochen scharfe Bilder?
Lernen Erstelle eine Website Die Kompatibilität mit Retina-Bildschirmen ist ein wichtiger Vorteil für jeden Webentwickler. Leider gibt es keine ideale, perfekte Lösung, um Ihre Website mit Retina-Ready-Displays benutzerfreundlich zu gestalten.
Während wir darauf warten, dass jemand die vollständigste Lösung findet, haben wir uns einige der bestmöglichen Optionen für die Vorbereitung Ihrer Website angesehen. Auf diese Weise werden Sie nicht in die Irre geführt, wenn zu allen Zeiten Retina auf allen Geräten in der einen oder anderen Form angezeigt wird.
Aber bevor Sie anfangen, nehmen Sie sich die Zeit, um einen Blick darauf zu werfen Wie man ein Wordpress-Theme zu installieren, Wie viele Plugins sollte ich installieren auf Wordpress.
Dann machen wir uns an die Arbeit!
Mehrere Bilddateien erstellen
Beginnen wir mit den Grundlagen. Der einfachste Weg, um Retina Mode-Unterstützung für Ihre Website zu erhalten, ist: Erstellen Sie mehrere Bildvarianten in unterschiedlichen Auflösungen. Dies bedeutet, dass Sie für jede Art von Auflösung (d. H. 1x) eine hochauflösende Version dieses Clips (d. H. 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 die "@ 2x" -Versionen jeder Bildgröße zu generieren oder "@ 2x" -Bilder zu finden und die anzuzeigen Größe für jedes Gerät.
Es ist richtig, dass das Erstellen mehrerer Versionen desselben Images ein zeitaufwändiger Prozess sein kann. Leider gibt es keine schnelle Methode, die diese Bilder automatisch für Sie generiert. Jedoch, Es gibt 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 Ihre Designs für Retina-Displays einfach optimieren können. Wenn Sie eine ältere Version von Photoshop (Pre-CC) verwenden, können Sie so etwas wie " Vier Das macht im Grunde alles, was das aktuelle Photoshop Generator-Tool macht, aber für ältere Versionen von Photoshop.
Skalierbare Vektorgrafiken (SVG)
Der einfachste Weg, um mit dem Retina-Modus fortzufahren, ist die Verwendung von skalierbaren Vektorgrafiken (SVG) auf Ihrer Website. SVG ist ein XML-basiertes Vektorbildformat. Wie der Name schon sagt, ist ein SVG-Bild skalierbar, was bedeutet, dass Bilder so weit (oder so wenig) wie nötig gestreckt werden können, während sie dennoch scharf und klar bleiben. Es kann eine schnelle und einfache Möglichkeit sein, den Retina-Modus ohne großen Aufwand zu implementieren.
Lesen Sie auch: So stellen Sie WebP-Bilder anstelle von herkömmlichem PNG und JPG bereit
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, jedoch nicht 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 kompatibles Format mit WordPress ist. Da eine SVG-Datei im Wesentlichen eine XML-Datei ist, wird sie für geöffnet Alle bekannten Sicherheitslücken im Zusammenhang mit dem XML-DateiformatB. Zwangsanalyse, XEE-Angriffe (XML External Entity Attacks), XDoS-Angriffe (XML Denial of Service Attack) usw.
Es gibt jedoch eine Möglichkeit, die SVG-Unterstützung für Ihre Website zu aktivieren, um Ihre SVG-Dateien sicher zu machen.
So aktivieren Sie SVG sicher in WordPress
Sichere SVG ist ein Plugin, mit dem Sie die Unterstützung von SVG-Dateien auf Ihrer Website sicher aktivieren können. Dieses Plugin stellt sicher, dass Ihre SVG-Dateien desinfiziert werden, um mögliche XML-Schwachstellen auf Ihrer Website zu vermeiden.
Halten Sie sich von Plugins fern, mit denen der MIME-Typ das Hochladen von SVG in die WordPress-Medienbibliothek ermöglicht, da diese gefährlich und potenziell schädlich für Ihre Website sind. Wenn Sie also wirklich versucht sind, das SVG-Format unter WordPress zu verwenden, stellen Sie sicher, dass Sie es sicher tun, und laden Sie nicht das erste SVG-Plugin herunter, das Sie sehen.
Steigern Sie Ihre Conversions in Ihrem Blog, indem Sie unsere lesen 15 Inhaltstypen, die mehr Besucher auf Ihrem Blog generieren
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 Leben beim Aufbau einer mit dem Retina-Modus kompatiblen Website erheblich erleichtern können. Wie bereits erwähnt, ersetzen die meisten verfügbaren Plugins und Skripte Ihre Bilder jedoch nur für hochauflösende Displays durch hochauflösende Bilder. Sie dehnen sich nicht wie ein SVG: Sie müssen immer noch mehrere Bilder mit unterschiedlichen Auflösungen erstellen.
1 - retina.js
retina.js ist eines der am häufigsten verwendeten Skripte für hochauflösende Bilder. Dies ist ein Open-Source-Skript, mit dem Geräte mit Retina-Displays auf einfache Weise hochauflösende Bilder bereitgestellt werden können.
Das Skript überprüft jedes Bild auf der Seite, um festzustellen, ob sich auf dem Server eine hochauflösende Version dieses Bildes befindet. Wenn eine hochauflösende Variante vorhanden ist, tauscht das Skript die Standardauflösung gegen das hochauflösende Bild aus. Dies ist eine der häufigsten Methoden, um Bilder für Retina-Displays auf Ihrer Website bereitzustellen.
Siehe auch: GIF, Emojis oder Memes: eine gute Idee für WordPress-Websites?
2 - Dicht
Ähnlich wie retina.js, Dicht ist ein jQuery-Plugin, das eine einfache Möglichkeit bietet, Bilder im Pixelverhältnisformat bereitzustellen. Das Skript ruft die Methode $ .fn.dense () der Initialisierung auf, die auf "img" -Tags abzielt, die bei Bedarf als mit dem Retina-Modus kompatible Bilder dienen.
Es ersetzt also alle Bilder durch die jeweils hochauflösende Version, genau wie das Skript retina.js.
3 - WP Retina 2x
Letzteres kann mit einem magischen Retina-Bildgenerator verglichen werden.
WP Retina 2x ist ein Plugin, das Bilddateien erstellt, die für hochauflösende Geräte erforderlich sind, und diese Ihren Besuchern entsprechend anzeigt. Im Gegensatz zu den beiden vorherigen Skripten werden aus einem Ausgangsbild Bilder mit unterschiedlicher Auflösung generiert. Wenn Sie also nicht mit dem manuellen Erstellen 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 damit Ihre Bilder in Retina Ready-Bilder konvertieren.
Entdecken Sie auch einige Premium-WordPress-Plugins
Sie können andere verwenden Wordpress-Plugins um ein modernes Erscheinungsbild zu geben und die Handhabung Ihres Blogs oder Ihrer Website zu optimieren.
Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.
1. Eine fantastische WordPress-Autorenliste
Wie der Name schon sagt, das Plugin Ausgefallene WordPress-Autorenliste Zeigt die Liste der Autoren für Ihre Website in einem Widget an. Es hat eine einfache Benutzeroberfläche, die ermöglicht Zeigen Sie die Informationen eines beliebigen Autors an in der Seitenleiste. Alles was Sie tun müssen, ist das Autoren-Widget in die Seitenleiste zu ziehen und das Plugin erledigt die Arbeit.
Seine Hauptmerkmale sind unter anderem: die Möglichkeit um die Blog-Autoren anzuzeigen auf unterhaltsame Weise, um neue Besucher anzulocken, die Möglichkeit, eine Autorenliste in der Seitenleiste oder auf der Seite anzuzeigen, die Möglichkeit, einen Wettbewerb starten zwischen den Autoren Ihres Blogs ein ansprechendes Layout, Unterstützung für Shortcodes und vieles mehr.
Herunterladen | Demo | Web-Hosting
2. Einfaches Inhaltsverzeichnis
Ce WordPress Plugin benutzerfreundlich ermöglicht es Ihnen, ein Inhaltsverzeichnis in Ihre Beiträge, Seiten und benutzerdefinierten Beitragstypen einzufügen. Es hat viele Funktionen, die wichtigsten sind:
automatische Verwaltung eines Inhaltsverzeichnisses, Unterstützung für das Tag , Rankin Math Plugin Unterstützung, Kompatibilität mit mehreren Seiteneditoren wie Gutenberg, Divi, Elementor, WPBakery Page Builder und andere, die Möglichkeit zu wählen, auf welchen Seiten Ihre Veröffentlichungen angezeigt werden sollen, das automatische Einfügen des Inhaltsverzeichnisses auf bestimmten Seiten und viele andere.
Dies ist ein WordPress Plugin Freeware, die alles hat, was Sie zum Anzeigen Ihres Inhaltsverzeichnisses benötigen, also zögern Sie nicht, es als Ihre erste Wahl zu wählen.
Herunterladen | Demo | Web-Hosting
3. WooCommerce Advanced Bulk Bearbeiten
Bearbeiten Sie regelmäßig Ihren Produktkatalog? Ob Sie 100 Produkte oder 10.000 haben, dies WordPress Plugin Premium ist meiner bescheidenen Meinung nach „ein Muss“: (Das ist das erste Wort, das mir in den Sinn kommt).
Für ein paar Dollar nur das Plugin WooCommerce Advanced Bulk Edit wird das Leben leichter machen und Ihnen ungeheure Zeit sparen. Es gibt kein Zögern, es ist eine Bombe.
Herunterladen | Demo | Web-Hosting
Empfohlene Ressourcen
Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.
- 5 Verkehrsquellen Sie wahrscheinlich wissen
- Fallstudie: Content-Marketing, wie aus Fehlern lernen
- Warum Freiberufler einen Tagesplan brauchen
- 7 Aspekte, mit denen Sie einen erfolgreichen Blog erstellen
Zusammenfassung
Hier ! Das war's für dieses Tutorial. Ich hoffe, Sie können damit Retina-fähige Bilder für Ihre Website erstellen. Zögere nicht zu Teile es mit deinen Freunden in deinen bevorzugten sozialen Netzwerken.
Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden zu WordPress-Blog-Erstellung.
Wenn Sie Vorschläge oder Anmerkungen haben, hinterlassen Sie diese in unserer Rubrik commentaires.
...
