0
Beste Weg, um Retina-Ready Bilder für Ihre WordPress Sitesby marvelads.comon.Beste Weg, um Retina-Ready Bilder für Ihre WordPress Sites  Wir leben in einer hochauflösenden Welt. Und da die meisten von uns mehr als acht Stunden am Tag auf verschiedene Arten von Bildschirmen verbringen, ist die Qualität der Bilder und die Charaktere, die auf dem Bildschirm enthalten sind, sehr wichtig. Obwohl sie schon seit mehreren Jahren da sind, ist der Blick der Retina der […]

 

Wir leben in einer hochauflösenden Welt. Und da die meisten von uns mehr als acht Stunden am Tag auf verschiedene Arten von Bildschirmen verbringen, ist die Qualität der Bilder und die Charaktere, die auf dem Bildschirm enthalten sind, sehr wichtig.

Obwohl sie schon seit mehreren Jahren da sind, ist der Blick der Retina der Weg der Zukunft. Die hohe Pixeldichte auf dem Retina-Display macht das Bild knackig und klar. Und wer mag keine netten und scharfen Bilder?

 retina display "width =" 600 "height =" 414
Knusprige Bilder sind immer mehr Spaß für deine Netzhaut.

Lernen, wie man eine Retina-fähige Website zu schaffen ist ein sehr wichtiges Werkzeug in jedem Web-Entwickler-Arsenal. Leider ist keine Größe passt alle, die perfekte Lösung, um Ihre Website retina freundlich (noch!) Zu machen. Also, während wir auf jemanden warten, um die umfassendste Lösung zu finden, haben wir einige der besten verfügbaren Optionen erforscht, die gemacht werden müssen, um für Ihre Website Retina ist bereit. Auf diese Weise werden Sie nicht aus Kreisen, wenn die Zeit kommt und alle Geräte zeigen Retina-Displays in irgendeiner Form.

Mehrere Bildkomponenten erstellen

Beginnen wir mit den Grundlagen. Der einfachste Weg, um Retina Unterstützung für Ihre Website ist es, mehrere Bild-Assets in verschiedenen Auflösungen zu schaffen. Was bedeutet, für jede Standard-Auflösung Asset (dh @ 1x), müssen Sie eine hochauflösende Version dieses Assets (dh @ 2x) zu erstellen.

Grundsätzlich können Sie mehrere Versionen der gleichen Datei erstellen und Plugins wie WP Retina 2x oder Scripts wie z. B. retina.js verwenden, um automatisch generieren @ 2x Versionen jeder Bildgröße oder finden Sie Bilder @ 2x und zeigen sie für hochauflösende Geräte .

Es ist wahr, dass mehrere Versionen des gleichen Bildes ein zeitraubender Prozess sein können. Und leider gibt es keine catch-all-Methode, die automatisch diese Bilder für Sie generiert. Allerdings gibt es einige Photoshop-Plugins, mit denen Sie Ihre Bilder relativ schnell beheben können.

Plugins wie Retinize It, die eine Reihe von Photoshop-Aktionen, die Sie leicht optimieren können Ihr Design für Retina Displays. Wenn Sie eine ältere Version von Photoshop (Pre-CC) verwenden, können Sie etwas wie Oven verwenden, was im Grunde genommen alle aktuellen Photo Generator-Tools, aber für frühere Versionen von Photoshop.

Skalierbare Vektorgrafiken (SVG)

Der einfachste Weg, um in Retina-ready-Spiele voran zu kommen, ist das skalierbare Vektorgrafiken (SVG) Format auf deiner Website zu verwenden. SVG ist ein XML-basiertes Vektorbildformat. Wie der Name schon sagt, ist das SVG-Bild messbar, was bedeutet, dass das Bild so weit wie möglich (oder so wenig) gestreckt werden kann, alle verbleibenden knackig und sauber. Dies kann eine schnelle und einfache Möglichkeit für Sie, Retina Unterstützung ohne zu viel Aufwand anwenden.

 vector "width =" 420 "height =" 268 Vektoren können eine nützliche Option sein, wenn Ihre Website keine Fotos enthält.

Allerdings gibt es zwei Nachteile der Verwendung von SVG in WordPress. Das erste ist das, da dies ein Vektorformat ist, ist SVG nicht für alle Bilder geeignet. So können Sie SVG für Logos und Icons verwenden, aber nicht für Rasterdateien wie Fotos (was ein wenig weh tut, wenn Sie mit hochauflösenden Bildern für Ihre Website arbeiten). Aber wenn Sie Icons, Animationen oder einfache Illustrationen mögen, dann können SVG-Dateien definitiv die Wahl der Retina-fähigen Website sein.

Der zweite Nachteil der Verwendung von SVG in WordPress ist, dass dies kein offizielles unterstütztes WordPress-Format aufgrund von Sicherheitsfragen ist. Da die SVG-Datei im Wesentlichen eine XML-Datei ist, werden alle bekannten Schwachstellen, die mit XML-Dateiformaten verbunden sind, wie z. B. Koerzitiv-Parsing, externe XML-Angriffsentitäten (XEE), Denial-of-Service-XML-Angriff (XDoS) -Angriffe und so weiter geöffnet.

Allerdings gibt es eine Möglichkeit, die Sie SVG-Unterstützung für Ihre WordPress-Website aktivieren können, die Ihre SVG-Datei sicher zu bedienen macht.

So aktivieren Sie eine sichere SVG-Unterstützung in WordPress

Safe SVG ist ein Plugin, mit dem Sie SVG Plugins sicher auf Ihrer WordPress Website aktivieren können. Dieses Plugin sorgt dafür, dass Ihre SVG-Dateien sterilisiert werden, um potenzielle XML-Schwachstellen, die Ihre Website betreffen, zu stoppen.

Bleiben Sie weg von Plugins, die MIME-Typen erlauben, um SVG-Uploads zu WordPress-Medienbibliotheken zuzulassen, da diese unsicher und potenziell schädlich für Ihre Website sind. Also, wenn Sie wirklich versucht sind, SVG-Format in WordPress verwenden, stellen Sie sicher, dass Sie es sicher und nicht das erste SVG-Plugin Sie sehen.

Sprite CSS

Sprite von CSS-Bildern ist eine Sammlung von Bildern, die in ein einzelnes Bild eingefügt werden. Sprite CSS existiert für eine lange Zeit, aber es wird immer wichtiger angesichts der Mangel an Lösungen, um alle Lösungen für die Umsetzung Retina Unterstützung zu fangen. [1945903]

Um Spritzen als Weg zur “Wiedereröffnung” deiner Website zu nutzen, solltest du ein hochauflösendes Bild (zB 400 px) erstellen, das genau doppelt so breit und doppelt so hoch ist wie das Standardauflösungsbild in Sprites (zB 200 px).

Das CSS für deine Standardauflösung sprite sollte so aussehen:

Da Sprites eine Sammlung von Bildern sind, enthält dein Sprite eine Liste aller Icons, die du einschreibst, wie folgt:

Und dann wirst du CSS-Code haben, um Standardbilder in deinem Sprite mit hochauflösenden Bildern zu ersetzen, abhängig von deinem Besuchergerät:

Natürlich, wenn Sie viele Icons auf Ihrer Website haben, die Schaffung einer separaten Retina und ein Standard-Sprite kann sehr einfach zu bedauern sein. Glücklicherweise gibt es einen einfacheren Weg, dies zu tun.

CSS-Sprite-Generator

Es gibt viele CSS-Drag & Drop-Sprite-Generatoren, mit denen Sie automatisch Standard-Retinal- und Sprite-Bilder generieren können. Sie generieren sogar Sprite-Code für Sie – wie glatt ist das?

Einfach per Drag & Drop das Bild und Generator und es wird automatisch generieren die CSS Sprite-Code für Sie. Einige von ihnen erlauben sogar, Standardbilder und Retina zu produzieren. Also, wenn Sie Zeit sparen, könnte CSS Sprite Generator für Sie geeignet sein.

Retina Unterstützung Scripts & Plugins

Es gibt einige Retina-Skripte und Plugins, die dein Leben so viel einfacher machen können, wenn man versucht, eine Retina-fähige Website zu implementieren. Allerdings, wie bereits erwähnt, ersetzen die meisten vorhandenen Plugins und Scripts nur Ihre Bilder mit hochauflösenden Bildern nur für hochauflösende Displays. Also strecken sie sich nicht wie SVG – man muss noch viele Bilder verschiedener Auflösungen erstellen.

retina.js

retina.js ist eines der am häufigsten verwendeten Skripte für die Darstellung hochauflösender Bilder. Dies ist ein Open-Source-Skript, das es einfach macht, hochauflösende Bilder auf Geräten mit Retina-Displays anzuzeigen.

Das Skript überprüft jedes Bild auf der Seite, um zu sehen, ob es eine hochauflösende Version des Bildes auf dem Server gibt. Wenn eine hochauflösende Variante existiert, definiert das Skript die Standardauflösung mit hochauflösenden Bildern neu. Dies ist eine der häufigsten Möglichkeiten, um Retina fertige Bilder für Ihre Website zu dienen.

feste

Ähnlich wie bei retina.js ist Dense ein jQuery-Plugin, das eine einfache Möglichkeit bietet, ein Pegelverhältnis-bewusstes Bild des Geräts zu präsentieren. Das Skript ruft die Methode $ [initializer$ auf. Fn.dense () Targeting img Element, das fertige Bilder von Retina serviert, wenn nötig.

Also, ersetze alle Bilder mit hochauflösenden Versionen von jedem, wie retina.js Skript.

WP Retina 2x

Am nächsten kommen Sie zum Spiegelbildgenerator ist Magie ist, etwas wie WP Retina 2x zu verwenden.

WP Retina 2x ist ein Plugin, das Bilddateien erstellt, die von High-DPI Geräten benötigt werden, und zeigt sie Ihren Besuchern entsprechend an. Im Gegensatz zu den beiden vorherigen Scripts erzeugt es ein Auflösungsbild, das sich von dem Originalbild unterscheidet. Also, wenn Sie nicht zu chuffed über manuell machen verschiedene Bilder mit verschiedenen Auflösungen, dann ist diese Option für Sie.

Lucky für dich, wir haben abgedeckt, wie du WP Retina 2x für Retina-fertige Bilder bei diesem Beitrag verwenden kannst.

Lazy Loading

Wenn Sie sich Sorgen machen, dass Ihre Website verlangsamt wird, weil Sie zu viele Bilder oder Versionen von Bildern haben, die auf Ihrem Server vorhanden sind, möchten Sie vielleicht ein Lazy Load Script anwenden. Lazy loading lässt Sie den richtigen Kontext zur richtigen Zeit anzeigen.

Es gibt einige Plugins, die dich laden lazy Bilder, und du kannst hier mehr über sie lesen.

Einwickeln

Netzhautunterstützung ist kompliziert. Ohne Option, um alles zu setzen, sind wir mit mehreren Optionen zur Auswahl. Der wichtigste Teil ist jedoch die richtige Wahl für Sie.

Wenn Sie ein minimalistisches Design mögen und mit den Risiken der inhärenten SVG Formate bequem sind, könnte SVG eine gute Wahl sein. Wenn du in eine alte Schule CSS kommst, dann könnte ein Sprite die richtige Wahl für dich sein. Und wenn Sie in Javascript sind, warum haben Sie nicht einen erstaunlichen fertigen Retina Bildgenerator für Sie erstellt? Wir warten!

Bildnachweis: Mashable, Wikipedia.

Vielen Dank für das Lesen, besuchen Sie den Originalartikel aus dieser Quelle Link.

Author: 

Related Posts

 

Leave a Reply