Mediaoptimierung mit Pimcore

Ausgangslage

Wie im Artikel "Ressourcensparendes Design" beschrieben, müssen Bilder und auch Videos optimiert werden, sodass möglichst kleine Ressourcen ins Internet übertragen werden. Doch nicht nur aus Sustainability Gründen bringt das Thema Mediaoptimierung Vorteile. Auch der Blick durch die SEO-Brille zeigt, dass es sich lohnt an dieser Stelle Ressourcen zu sparen. Denn die einschlägigen Suchmaschinen bewerten optimierte Mediaressourcen äußerst positiv.

Technisches Grundgerüst

Bilder

Bilder werden im HTML mittels picture tag eingebunden. Das Hauptbild wird über das img tag definiert und die alternativen Bilder (“Thumbnails”) via source tag mit dem Attribut srcset:

                                <picture>
	<source srcset="/Leanatic%20Agentur/image-thumb__27__tileImageEmployee/Img-agentur%E2%80%94team-bent~-~media--9e528c9f--query.webp 1x, /Leanatic%20Agentur/image-thumb__27__tileImageEmployee/Img-agentur%E2%80%94team-bent~-~media--9e528c9f--query@2x.webp 2x" media="(max-width: 375px)" type="image/webp">
	<source srcset="/Leanatic%20Agentur/image-thumb__27__tileImageEmployee/Img-agentur%E2%80%94team-bent~-~media--9e528c9f--query.png 1x, /Leanatic%20Agentur/image-thumb__27__tileImageEmployee/Img-agentur%E2%80%94team-bent~-~media--9e528c9f--query@2x.png 2x" media="(max-width: 375px)" type="image/png">
	<source srcset="/Leanatic%20Agentur/image-thumb__27__tileImageEmployee/Img-agentur%E2%80%94team-bent~-~media--1d2e2921--query.webp 1x, /Leanatic%20Agentur/image-thumb__27__tileImageEmployee/Img-agentur%E2%80%94team-bent~-~media--1d2e2921--query@2x.webp 2x" media="(max-width: 992px)" type="image/webp">
	<source srcset="/Leanatic%20Agentur/image-thumb__27__tileImageEmployee/Img-agentur%E2%80%94team-bent~-~media--1d2e2921--query.png 1x, /Leanatic%20Agentur/image-thumb__27__tileImageEmployee/Img-agentur%E2%80%94team-bent~-~media--1d2e2921--query@2x.png 2x" media="(max-width: 992px)" type="image/png">
	<source srcset="/Leanatic%20Agentur/image-thumb__27__tileImageEmployee/Img-agentur%E2%80%94team-bent~-~media--c98bc1c2--query.webp 1x, /Leanatic%20Agentur/image-thumb__27__tileImageEmployee/Img-agentur%E2%80%94team-bent~-~media--c98bc1c2--query@2x.webp 2x" media="(max-width: 1200px)" type="image/webp">
	<source srcset="/Leanatic%20Agentur/image-thumb__27__tileImageEmployee/Img-agentur%E2%80%94team-bent~-~media--c98bc1c2--query.png 1x, /Leanatic%20Agentur/image-thumb__27__tileImageEmployee/Img-agentur%E2%80%94team-bent~-~media--c98bc1c2--query@2x.png 2x" media="(max-width: 1200px)" type="image/png">
	<source srcset="/Leanatic%20Agentur/image-thumb__27__tileImageEmployee/Img-agentur%E2%80%94team-bent.webp 1x, /Leanatic%20Agentur/image-thumb__27__tileImageEmployee/Img-agentur%E2%80%94team-bent@2x.webp 2x" type="image/webp">
	<source srcset="/Leanatic%20Agentur/image-thumb__27__tileImageEmployee/Img-agentur%E2%80%94team-bent.png 1x, /Leanatic%20Agentur/image-thumb__27__tileImageEmployee/Img-agentur%E2%80%94team-bent@2x.png 2x" type="image/png">
	<img src="/Leanatic%20Agentur/image-thumb__27__tileImageEmployee/Img-agentur%E2%80%94team-bent.png" alt="Portraitfoto von Bent" title="Bent Brüggemann" loading="lazy" width="384" height="384">
</picture>
                            

Hier sehen wir auch schon direkt die verschiedenen media queries, welche nach unserem Verständnis schon fast Standard sind.

Videos

Videos werden hier via eigenem Player eingebunden, oder alternativ auch mit den nativen von YouTube, Vimeo und Dailymotion. Beim Player für Videos aus der eigenen Datenbank sieht man hier auch direkt ein Asset, als Thumbnailvorschau definiert, angegeben. Für das erste Laden müssen auch diese Thumbnails optimiert sein und so wird hier auch nur eines raus gerendert in der Größe des Videos.

                                <video poster="/SampleHouses/468/image-thumb__468__auto_0e46a96657a23fea0a218103a60ceba5/ch-5712.jpg" class="pimcore_video" width="100%" height="300">
  <source type="video/mp4" src="/videos/TestiVideo.mp4">
</video>
                            

Grenzen

Natürlich kann man auch hier es etwas übertreiben. Wie wir schon sehen, so werden für jedes Bild nun im Sourcecode nicht mehr nur eine Zeile genutzt zur Inklusion auf einer Website, sondern (bei uns) 9x so viele. Dies ist aber noch immer kleiner als ein 40MP Bild vollständig zu laden. Insofern gilt auch hier, dass man den Sourcecode nicht bloaten sollte, indem beispielsweise 20 Breakpoints definiert werden.

Allgemein gilt: Die Anzahl der Bildbreakpoints sollte in etwa der der im CSS defierten Breakpoints entsprechen. Als Daumenwert sind 3-5 für die meisten Seiten und Apps völlig ausreichend.

Kompatibilität

Bevor die Frage aufkommt, alle großen Browser unterstützen dies Verfahren mittlerweile. Weiter embedden wir explizit nicht nur ein .webp file, sondern auch immer noch die “alten” .png, für den Fall, dass die User doch noch über ältere Browser, oder Systeme kommen. Gerade mobile ist dies noch öfter ein Thema.

Pimcore

So, nun zu der Frage, wie einfach und gut dies mit Pimcore (in der Version X) umzusetzen ist. Die Antwort: Sehr einfach!

Bilder

Diese führt dazu, dass wir auf mobilen (unter 376px) devices kleine Bilder haben und auf 4k Geräten entsprechend größere. Natürlich muss das Design und Frontend Development sich hier gut absprechen und ein Konzept für alle möglichen Breakpoints und Auflösungen erstellen. An der Einstellung  “Auto” erkennt man, dass Pimcore hier die webp-Version samt dem .png verlinkt. Dies kann man natürlich auch anpassen.

Für den oben gezeigten Sourcecode eines eingebundenen Bildes sehen wir in Pimcore folgende Konfiguration:

Neben der einfachen Zentrierung und einem Neuzuschneiden der Bilder gibt es noch mannigfaltigste weitere Optionen, wie das Bild nativ mit Hintergrundfarben zu versehen, andere Bilder zu überlagern, oder in den wildesten Formen zu beschneiden, um nur einige Funktionen zu erwähnen.

Und das beste ist, auch code-seitig ist es super einfach und schnell einzubinden:
(Im Twig setzen wir einfach die Variable und schleifen sie in das benötigte Modul durch.)

                                {% set image = pimcore_image('team_image_bent', {
                    'thumbnail': 'tileImageEmployee'
           }) %}
                            

… um dann im template einfach nur das Image Editable von Pimcore auszugeben:

                                {{ image }}
                            

Natürlich kommt noch ein wenig CSS herum, aber das soll hier nicht das Thema sein :wink:.

Nun kann man dort, wo dies Editable eingebaut ist einfach im WYSIWYG vom Pimcore Admin Bilder hineinziehen und sich anzeigen lassen. Editoren müssen sich nicht mehr Gedanken um die Grüße der Bilder und Optimierung machen. Dies liegt jetzt in den sicheren Händen des Frontends!

Videos

Für Videos läuft das ganze recht analog ab. Allerdings stellen wir hier nicht die Breakpoints ein, sondern die Streamrate in bit:

Das Editable in Pimcore heißt dann “pimcore_video('ein_schicker_name')”

Abhängigkeiten

Natürlich kommen auch diese Optimierungen zu einem gewissen Preis:

Vor allem Imagemagick mit webp-Erweiterung (für optimale Ergebnisse) werden benötigt. Leider bieten nicht alle Hoster dies einfach so an und man muss hier und da Kompromisse eingehen, wie beispielsweise GD zu nutzen als Alternative.

Fazit

Nie war es einfacher Webseiten, Applikationen und Portale mit so gut durch-optimierten Medien zu erstellen und zu betreiben. Allerdings setzt dies voraus, dass 1. Pimcore eingesetzt wird (oder die Entwickler selbst das Thumbnailing betreiben), 2. ein entsprechend gutes Konzept erstellt wird, welches alle Fälle abdeckt und 3. ein Frontend-Team existiert, welches mit diesen Flexibilitäten umgehen kann.
Backend-seitig gibt es kaum etwas zu erwähnen, außer der Anforderungen an den Server! Also lasst uns gemeinsam für ein besseres (optimiertes) Internet sorgen!

Portrait Bild von Bent

Willst Du mehr über Mediaoptimierung mit Pimcore erfahren?