B4: Hochauflösende Displays in WordPress

Optimierung für hochauflösende Displays in WordPress

Optimierung für hochauflösende Displays in WordPress - Das Titelfoto Abb.: Retina- / Optimierung für hochauflösende Displays in WordPress

Normales HD, Full HD, QHD, 4K- Auflösung, was für TV- Displays im Wohnzimmer gilt, gilt auch für Smartphone Displays. Jedoch sind Smartphone – Displays eher um 5 Zoll in der Diagonalen und nicht 50 Zoll. Dies zeigt einen deutlichen Hang zum Marketingargument, wenn es neuerdings z.B. um 4K Smartphone Displays geht. Denn eine technische Sinnhaftigkeit existiert dafür nicht.

Der Grund für eine wünschenswerte hohe Auflösung (besser hohe Pixeldichte) ist, dass das menschliche Auge keine einzelnen Pixel mehr wahrnimmt. Das Bild was man erblickt erscheint „quasi-analog“.

In dem Zusammenhang gibt es hochauflösende Displays. Der Begriff Retinadisplays bezeichnet das gleiche und wird bei Appleprodukten benutzt.

Möchte man so über den Daumen sinnhafte Aussagen herausstellen so kann man sagen:

  • Unter 5 Zoll ist normales HD OK.
  • Eine 4K- Smartphone – Auflösung ist schwachsinnig.
  • Bei Benutzung einer VR – Brille ist jedoch eine möglichst hohe Auflösung zu bevorzugen.

Und immer an die Leser / Besucher denken!

Was kann man nun daraus ableiten? Keine einzelnen Pixel mehr erkennen zu können ist ein Qualitätsmerkmal. Dieses muss auch mit der Qualität ihrer angebotenen Bildmedien einhergehen! Nun bedeutet eine höhere Bildqualität zugleich größere Datenmengen, die zu laden sind. Außerdem besitzt nicht jeder Besucher ihrer Website ein hochauflösendes Display. Eine höhere Bildqualität stellt hier keinen Gewinn dar, sondern bestraft den Besucher durch ein unnötiges höheres Datentransfervolumen und damit einhergehend längere Ladezeiten.

Über sogenannte Media Queries im Quell – Code kann man nun die Displayauflösung des Besuchers abfragen. Im folgenden Schritt kann man wiederum über den Quell- Code das Bildmedium in geeigneter Qualität ausliefern.

Das ist aber was für Themeentwickler und Programmierer. Wir verwenden hier ein Plugin. Das macht das automatisch inkl. der nötigen Bildbearbeitung. Wir haben „nur“ drauf zu achten, dass die Ausgangsqualität hochwertig ist. Denn eine mindere Qualität aufzuwerten geht nicht!

Das Plugin: WP Retina 2x

Das Plugin WP Retina 2x ist die entsprechende Wahl für unser Vorhaben. Dieses wird in einer kostenfreien Version und in einer kostenpflichtigen Pro – Version angeboten. Ich benutze hier die kostenfreie Version.

Ich werde an dieser Stelle das Plugin nicht ausführlich erklären. Ebenso werde ich keine Strategien aufzeigen, um die Veränderungen zu verifizieren. Durch das Plugin optimierte Bilder bzw. Codeergänzungen sind durch den Zusatz“@2x“ im Dateinamen bzw. im Quellcode zu identifizieren.

Plugin für hochauflösende Displays in WordPress suchen 1.     Wählen Sie im Backend unter Plugins ‚Installieren‘.

2.     Suchen Sie nach dem Plugin ‚WP Retina 2x‘.

3.     Drücken Sie ‚Jetzt installieren.

Hinweis: Nach erfolgreicher Installation ändert sich die Buttonbeschriftung von ‚Jetzt installieren‘ in ‚Aktivieren‘

4.     Drücken Sie ‚Aktivieren‘.

Backend nach Installation des Plugins WP Retina 2x5.     Unter Plugins » Installierte Plugins ist das Plugin ‚WP Retina 2x‘ zu finden.

6.     Durch das Plugin ist der Punkt ‚Meow Apps‘ hinzugefügt worden.

7.     Unter Medien » Retina befindet sich nun die (Arbeits -) Oberfäche für   die Retinaoptimierung.

Oberfäche des Plugins WP Retina 2x8.     Erklärung der Plugin – Oberfläche:

a)     Bulk Generate (Thumbnails & Retina)

Alle vorhandenen Medien werden nach Möglichkeit retinaoptimiert.

b)    Bulk Delete (Retina Only)

Für alle vorhandenen Medien wird die Retinaoptimierung rückgängig gemacht und die nicht mehr benötigten Dateien gelöscht.

c)     Verzeichnis der vorhandenen Medien

█  Thumbnail

█  Dateiname

█  Pixelgröße des Originals

█  Generate – Button, um die Datei einzeln für eine hochauflösende Anzeige zu optimieren

█  Button ‚Ignore‘

█  Button ‚Details‘

d)    Mediengröße in Pixel für normale Anzeige und retinaoptimiert

T = thumbnail (300 x 300)

M = medium (600 x600)

M = medium_large (1536 x 0)

L = large (2048 x 2048)

P = post-thumbnail (2400 x 19998)

Farbcode

Orange = Eine Retinaoptimierung ist möglich.

Rot = Eine Retinaoptimierung ist nicht möglich.

Blau (Optimierungsstatus der einzelnen Bilder des Plugins WP Retina 2x)= Diese Datei ist retinaoptimiert.

 

9.     Hinweis auf die maximale Dateigröße, die hochgeladen werden kann.

Hinweis: Die Bilder finden Sie im WordPressordner unter: \wp-content\uploads


Optimierung des Originals für hochauflösende Bilder in WordPress

Ich möchte nun an Hand der benutzten Headerbilder auf dieser Homepage skizzieren wie man strategisch vorgeht, um geeignete hochauflösende Bilder zu erzeugen. Ich bediene mich hier Vorlagen von Pixabay (siehe auch meine Linkliste). Dabei gehe ich davon aus, dass das WordPress – Logo schon in die entsprechende Vorlage reinmontiert ist.

Konkret handelt es sich um folgende Bilder:

Folgende Gedanken lohnen es sich dabei anzustellen. Ich habe diese in einer Tabelle zusammengefasst. Bildbearbeitungen  werden dabei mit einem Grafikeditor (z.B. Gimp, siehe auch Links) durchgeführt.

1.     (H-K | 2-3): Ermitteln Sie die WordPressempfehlung.

2.     (F, G | 2-6): Daraus ergibt sich das Seitenverhältnis.

3.     (A – E | 2-6): Ermitteln Sie Vielfache zur Empfehlung.

4.     ‚Matrix‘: Bringen Sie das Bild auf eine geeignete Vielfachgröße in der Breite.

5.     Bearbeiten Sie das Bild in der Höhe auf das dazugehörige Vielfache durch zuschneiden. » fertig

6.     ‚Medizin‘: Verkleinern Sie das Bild in der Höhe auf ein geeignetes Vielfaches.

7. Erstellen Sie ein neues Bild mit entsprechender Größe bzgl. der Höhe (und Breite).

8.     Kopieren Sie die bearbeitet Vorlage in das neue Bild  und ordnen es „prominenterscheinend“ an.

9.     Bearbeiten Sie die freien Flächen für ein gefälliges Erscheinungsbild. » fertig.

10.     ‚Wand‘: Wie ‚Medizin‘

11.     ‚E-Labor‘: Wie ‚Medizin‘

Hinweis: Die Bilder sollten auf das größtmögliche Vielfache optimiert sein und natürlich auch so abgespeichert werden.

Die Exceltabelle mit Rechenfunktionen können Sie hier downloaden.


Praktische Umsetzung in WordPress

Nachdem die Bilder nun in ausreichender Qualität vorliegen werden sie in die Mediathek geladen, ein Alt – Text vergeben und über das Plugin ‚WP Retina 2x‘ retinaoptimiert. Anschließend werden sie – wie schon einmal beschrieben – als Headerbilder integriert.

Hochladen von qualitätsoptimierten Bilder für den Header.

1.     Laden Sie die Bilder in die Mediathek hoch.

2.     Vergeben Sie jeweils einen Alternativtext.

Möglichkeit in WordPress einen Alternativtext zu vergeben.

Retinaoptimierte Headerbilder für hochauflösende Displays in Wodpress.

3.     Generieren Sie über das Plugin ‚WP Retina 2x‘ Bilder für hochauflösende Displays in WordPress.

Hinweis: Wechselt der Farbcode der Media-Size-Anzeige ins Blau, so ist das entsprechende Bild retinaoptimiert, also optimiert für hochauflösende Displays in WordPress.

Headerbilderlöschung in WordPress

4.     Löschen Sie die alten Bilder aus dem Header. Leere Headerarbeitsfläche in WordPress

Einfügen von Headerbilder für hochauflösende Displays in WordPress

5.     Fügen Sie die neuen, optimierten Headerbilder für hochauflösende Displays in WordPress ein. Nehmen Sie dafür die angebotenen Bilder aus Ihrer Mediathek.

Hinweis: Die vorgeschlagene Zuschneideauswahl sollten Sie so bestätigen.

Schreibe einen Kommentar

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