Image_Optimizer_XH - Plugin - Bilder - SEO CMSimple_XH

Plugin Image_Optimizer_XH für CMSimple_XH

Das picture-Element ist ein Container, mit dem Sie mehrere Bildquellen referenzieren können. Dadurch können Sie mehrere Bildversionen für verschiedene Pixeldichten, Auflösungen und Bildschirmformate zur Verfügung stellen, aus denen der Browser dann die passende Grafik auswählt und lädt.

Quelle: wiki.selfhtml.org

Wie funktioniert das?

Das Bild wird wie immer in die Website eingebunden.
Zusätzlich benötigt das Bild die Klasse "imageoptimizer".

class="imageoptimizer"

Das geht leider nur direkt in der Quelltextansicht, oder es muss einmalig in der stylesheet.css des Templates der Eintrag img.imageoptimizer {} ergänzt werden, dann kann man die Klasse per Editor zuweisen.

Das Bild sollte, ganz im Gegensatz zur eigentlichen Empfehlung, relativ groß sein.
Eine minimale Auflösung von 1920px x 1080px sollte es auf jeden Fall sein, besser vielleicht noch etwas größer.
Das kommt aber ganz auf die Konfiguration des Plugins an, ob z.B. hochauflösende Displays berücksichtigt werden sollen.

Es ergibt aber keinen Sinn, hier ein Bild mit 20 Megapixeln oder mehr zu verwenden, 3 - 4 Megapixel sollten mehr als ausreichend sein.
Je größer das Bild, desto länger die Rechenzeit und desto größer ist auch der Speicherbedarf und beides ist auf einem Webserver mehr oder weniger stark begrenzt (Max Execution Time, Memory Limit), auch wenn das Erstellen eine einmalige Angelegenheit ist.
Im ungünstigsten Fall quittiert der Webserver die Aktion mit einem Fehler.

Das Plugin tut seinen Dienst, wenn der Vorschaumodus aktiv ist, oder die Seite ganz normal ohne Login aufgerufen wird. Am ursprünglichen Quelltext selber werden dabei keine Änderungen vorgenommen, die Ausgabe wird nur zur Laufzeit manipuliert.
Der erste Aufruf dauert etwas länger, denn dabei müssen die zusätzlichen Bilder erstellt werden.
Bei mehreren Bildern auf einer Page sollte deshalb vielleicht besser Bild für Bild vorgegangen werden.
Wenn die Bilder dann erstellt sind, gibt es keinen merkbaren Performanceverlust mehr beim Aufruf der Page.

Welche Konfigurationsmöglichkeiten hat das Plugin?

• Alles, was dafür zu tun ist, ist zu überlegen, wie viele und welche Viewports berücksichtigt werden sollen?
  Berücksichtigt werden nur Viewports, die kleiner als die beim Bildeinfügen festgelegten Bildbreite sind.
  Das letzte Set entspricht der angegebene Bildbreite und ist damit die größtmögliche Ausgabe.
• Es gibt die Möglichkeit, statt dem Einfügen der Klasse für das einzelne Bild, die Einstellung „Auto“ zu wählen.
  Damit wird jedes Bild, wenn es ein unterstützter Bildtyp (.jpg, .jpeg, .webp) ist, verarbeitet.
  Diese Option sollte aber gut überlegt sein. Oftmals ist es nicht notwendig, dass wirklich jedes Bild in einem Picture-Element ausgegeben wird.
• Die dritte Einstellung legt eine Mindestbreite für das Originalbild fest, ab der überhaupt eine Verarbeitung erfolgt.
  Jede Eingabe unter 640px wird hier ignoriert.
• Als letztes, die Möglichkeit zusätzlich unterschiedliche Pixeldichten zu berücksichtigen; 2x, 3x und 4x.
  3x oder 4x wird wohl aber nur selten wirklich einen Nutzen bringen.
  Pauschal ausgedrückt, haben heute die kleinsten Geräte die höchste Pixeldichte. Auf einem Smartphone sollte aber 2x vollkommen ausreichend sein. Zu viel erhöht hier nur das zu übertragende Datenvolumen, bringt aber sehr wahrscheinlich keinen effektiven Nutzen.

Standardkonfiguration:

Viewports = 320|480|640|720|960|1024|1280|1920|2340|3840
Auto = off
Mindestbreite = 720
2x = on
3x = off
4x = off

Beispielausgabe mit der Standardkonfiguration

Hier im Beispiel werden die jeweiligen Bildgrößen im Bild und die Viewportgröße unter dem Bild angezeigt.

aus:

<img class="imageoptimizer" title="Kawasaki VN1600, EN500, EL125" src="./userfiles/images/kawa_vn_en_el.webp" alt="Kawasaki VN1600, EN500, EL125" width="600" height="450">

(Das Originalbild hat für dieses Beispiel eine Auflösung von 2048px x 1536px und eine Dateigröße von 694 KByte.)

wird in der Ausgabe:

<picture title="Kawasaki VN1600, EN500, EL125">
<source media="(max-width: 320px)" type="image/webp" srcset="
./userfiles/images/cache/kawa_vn_en_el-320x240.webp 1x, 
./userfiles/images/cache/kawa_vn_en_el-640x480.webp 2x">
<source media="(max-width: 480px)" type="image/webp" srcset="
./userfiles/images/cache/kawa_vn_en_el-480x360.webp 1x, 
./userfiles/images/cache/kawa_vn_en_el-960x720.webp 2x">
<source type="image/webp" srcset="
./userfiles/images/cache/kawa_vn_en_el-600x450.webp 1x, 
./userfiles/images/cache/kawa_vn_en_el-1200x900.webp 2x">
<img loading="lazy" decoding="async" src="./userfiles/images/cache/kawa_vn_en_el-600x450.webp" class="imageoptimizer" title="Kawasaki VN1600, EN500, EL125" alt="Kawasaki VN1600, EN500, EL125" width="600" height="450">
</picture>

Die neu erstellten Bilder haben für dieses Beispiel folgende Auflösungen bzw. Dateigrößen:

• 320px x 240px - 20,7 KByte
• 480px x 360px - 46,9 KByte
• 600px x 450px - 73,6 KByte
• 640px x 480px - 82,1 KByte
• 960px x 720px - 181 KByte
• 1200px x 900px - 275 KByte

Installation

PHP ab Version 7.1
(Sie sollten min. Version 8.1 einsetzen!, Stand 11/2024)

Für CMSimple_XH ab Versionen 1.7.3. Frühere Versionen wurden nicht getestet.

Um das Plugin zu installieren, einfach den entpackten Ordner image_optimizer in den Pluginordner laden.

Fragen, Hinweise, Fehlermeldungen zu Image_Optimizer_XH

Image_Optimizer im CMSimple_XH Forum

Image_Optimizer_XH kann unter Einhaltung der GPLv3 verwendet werden.

Version 1.0 RC1 für CMSimple_XH Versionen ab 1.7.3