Mediaoptimierung mit Pimcore

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="/image-thumb__27__img.webp 1x, /image-thumb__27__@2x.webp 2x" media="(max-width: 375px)" type="image/webp">
	<source srcset="/image-thumb__27__img.png 1x, /image-thumb__27__img@2x.png 2x" media="(max-width: 375px)" type="image/png">
	<source srcset="/image-thumb__27__img.webp 1x, /image-thumb__27__img@2x.webp 2x" media="(max-width: 992px)" type="image/webp">
	<img src="/image-thumb__27__img.png" alt="Portraitfoto von Max" 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>

‍

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', {
         '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.