im Test: Bildgrößen beim upload automatisch berechnen

geschrieben von on .

Testlabor: Wie funktioniert die automatische Bilderskalierung und Optimierung

Wie kann man schnell Bilder veröffentlichen?

oder auch: kann ich mir die Vorverarbeitung von Bilder am Rechner sparen?

Diese Webseite wird mit Kirby gebaut und verwendet das tolle Plugin vom Medienbäcker.

Mit Hilfe dieses Plugins werden Bilder, die man hochlädt automatisch auf eine festgesetzte Größe skaliert und dabei die prozentuale Qualität gesetzt.

    'medienbaecker.autoresize.maxWidth' => 2560,
    'medienbaecker.autoresize.quality' => 90,

Damit wird also das Beispielbild im Format JPG wie folgt verändert:

Test im JPG-Format

Maße vorher Größe vorher Maße Größe skaliert JPG-Komprimierung
4032 × 1816 Pixel 2800 KB 2560 × 1153 Pixel 915 KB 90%
4032 × 1816 Pixel 2800 KB 2560 × 1153 Pixel 509 KB 70%

Wie man gut erkennt, und ich ja auch früher schon mal dargestellt habe, ist eine JPG-Rate von 90% für die Darstellung im WEB unnötig. Dies kann man auf bis zu 60% reduzieren ohne direkt sichtbare Artefakte im JPG-Bild wahrzunehmen. In der Tabelle erkennt man die Reduzierung der Dateigröße je nach JPG-Rate recht gut.

Test im WebP-Format

Das Plugin unterstützt auch das Format WebP. Das ist ja in 2023 die eigentliche Empfehlung für Bilder auf Webseiten.

Für den Test wurde das obige JPG-Bild verlustfrei in WebP konvertiert. Das “bläst” die Datei auf über 7MB auf und macht keinen richtigen Sinn, da das JPG Bild ja bereits Verluste im Bild enthält. In diesem Test geht es aber nur darum zu erkennen, ob und wie gut die automatische Verarbeitung mit autoresize ist.

Maße vorher Größe vorher Maße Größe skaliert WebP-Qualität
4032 × 1816 Pixel 7200 KB 2560 × 1153 Pixel 836 KB 90%
4032 × 1816 Pixel 7200 KB 2560 × 1153 Pixel 413 KB 70%

Testergebnis

Das Plugin arbeitet recht gut. Man erhält “out-of-the-Box” die richtigen Bildmaße und die gewünschte Qualitätsstufe.
Zum Vergleich habe ich noch eine Testumsetzung für die WebP-Variante mit 70% mit dem Programm xnview gemacht, mit folgendem Ergebnis:

  • Plugin: 413 kb
  • xnwiew: 464 kb

Ich konnte adhoc keine Unterschiede sehen, bezogen auf Metadaten oder sonstigen Bildeigenschaften. Das Plugin liefert also ein sehr gutes Ergebnis.

hier noch das WebP mit 70%:

Das Plugin kirby-autoresize wird in kirby-Version 4.0 direkt im Core enthalten sein :-)

Vielleicht interessiert dich

    Leave a comment

    Available formatting commands

    Use Markdown commands or their HTML equivalents to add simple formatting to your comment:

    Text markup
    *italic*, **bold**, ~~strikethrough~~, `code` and <mark>marked text</mark>.
    Lists
    - Unordered item 1
    - Unordered list item 2
    1. Ordered list item 1
    2. Ordered list item 2
    Quotations
    > Quoted text
    Code blocks
    ```
    // A simple code block
    ```
    ```php
    // Some PHP code
    phpinfo();
    ```
    Links
    [Link text](https://example.com)
    Full URLs are automatically converted into links.

    MAiDD

    Ein kleines Weblog.

    © MAiDD mein eigenes Weblog