Springe zum Hauptinhalt

So erstellen Sie Retina-fähige Bilder für Ihre Website

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.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 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?

Retina bereit Bildschirm

Für jeden Webentwickler ist es wichtig zu lernen, wie eine mit Retina-Displays kompatible Website erstellt wird. Leider gibt es keine einzige, 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 installierenWie 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

Netzhautvektorvsraster

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.

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]

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.

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]

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 WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erhalten und den Grip 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.

Ein ausgefallenes WordPress-Autorenlisten-WordPress-Plugin

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 | DemoWeb-Hosting

2. Einfaches Inhaltsverzeichnis

Mit diesem benutzerfreundlichen WordPress-Plugin können Sie ein Inhaltsverzeichnis in Ihre personalisierten Veröffentlichungen, Seiten und Arten von Veröffentlichungen einfügen. Es hat viele Funktionen, die wichtigsten sind:Einfaches Inhaltsverzeichnis WordPress Plugin Tabelle Matieres

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-Seitengenerator 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.

Es ist ein kostenloses WordPress-Plugin, das alles enthält, was Sie zum Anzeigen Ihres Inhaltsverzeichnisses benötigen. Wählen Sie es also als Ihre erste Wahl.

Download | DemoWeb-Hosting

3. WooCommerce Advanced Bulk Bearbeiten

Veröffentlichen Sie regelmäßig Ihren Produktkatalog? Egal, ob Sie 100 oder 10.000 Produkte haben, dieses Premium-WordPress-Plugin ist meiner Meinung nach "Ein Muss": (Dies ist das erste Wort, das Ihnen in den Sinn kommt).Woocommerce Advanced Bulk Edit WordPress Plugin

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.

Download Demo | Web-Hosting

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Empfohlene Ressourcen

Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.

Fazit

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.

... 

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