Tobias Scheible Cyber Security & IT-Forensik Dozent
Landschaft - Sonne und Wolken

WebP Unterstützung in WordPress

Das neue WebP-Bildformat bietet viele Vorteile und Punktet vor allem durch eine geringe Dateigröße. Ich nutzte es selbst hier im Blog. Leider wird das Format nicht von WordPress komplett unterstützt, es ist kein Upload möglich und die Vorschau wird nicht angezeigt. Dies lässt sich aber einfach sogar ohne Plugin nachrüsten.

Sonntag, 16. Mai 2021
1 Kommentar

WebP ist ein Bildformat, das sowohl verlustbehaftete als auch verlustfreie Komprimierung sowie Animation und Alpha-Transparenz unterstützt. Es wurde von Google entwickelt und dient dazu, kleinere oder besser aussehende Bilder im Vergleich zu den Bildformaten JPEG, PNG oder GIF zu erstellen. Das WebP-Format wurde im September 2010 angekündigt, und die Unterstützung für das Format hat im Laufe der Jahre zugenommen. WebP wird von 94 % der weltweit verwendeten Webbrowser unterstützt (Can I Use Statistik). Die Besucher profitieren von der kleineren Abbildung durch eine schnellere Ladezeit.

Leider bietet WordPress von Haus aus keine WebP-Unterstützung. Allerdings kann sie sehr einfach selbst realisiert werden.

Upload

functions.php

Um den Upload von WebP-Dateien zu ermöglichen muss kein Plugin verwendet werden. Stattdessen reicht ein Eintrag in der functions.php. Die Datei functions.php befindet sich um Ordner des Templates, dass aktiviert ist. Dazu muss der folgende Eintrag hinzugefügt werden:

function webp_upload ($existing_mimes) {
    $existing_mimes['webp'] = 'image/webp';
    return $existing_mimes;
}
add_filter('mime_types', 'webp_upload');

Wird jetzt der Upload erneut durchgeführt, erscheint keine Fehlermeldung mehr.

Vorschau

Jetzt können WebP-Dateien in WordPress zwar hochgeladen werden, allerdings erscheinen sie nicht in der Vorschau. Dazu muss der folgende Code, ebenfalls in die functions.php hinzugefügt werden:

function webp_preview($result, $path){
    if($result === false){
        $displayable_image_types = array(IMAGETYPE_WEBP);
        $info = @getimagesize($path);

        if(empty($info)){
            $result = false;
        } elseif(!in_array($info[2], $displayable_image_types)){
            $result = false;
        } else{
            $result = true;
        }
    }
    return $result;
}
add_filter('file_is_displayable_image', 'webp_preview', 10, 2);

Fazit WebP und WordPress

Das WebP-Bildformat verbessert die Ladezeit und funktioniert bei fast allen Webbrowsern. Mit den obigen Einträgen können WebP-Abbildungen auch problemlos in WordPress genutzt werden.

Über Tobias Scheible

Tobias Scheible

Hallo, mein Name ist Tobias Scheible. Ich bin begeisterter Informatiker und Sicherheitsforscher mit den Schwerpunkten Cyber Security und IT-Forensik. Mein Wissen teile ich gerne anhand von Fachartikeln hier in meinem Blog. Als Referent halte ich Vorträge und Workshops für Verbände und Unternehmen u. a. auch offene Veranstaltungen für den VDI und die IHK.

Kommentare

Rainer Rössler am 21. Mai 2021 um 11:37 Uhr

Servus Tobias, danke (wieder einmal) 🙂 für diesen tollen & leichten Tipp. In einer Zeit wo alles „feinstofflicher“ wird, kann dies nochmal der entschiedene „Vorsprung“ darstellen.

Spontan wäre evtl. noch der Tipp gut, wie den eine solche „WebP-Bildformat“ erstellt wird. Also zu einem evtl. bereit vorhandenem Tutorial. Ich in der Rolle als Fotograf der über einige Dateien Formate und dessen Vor- und Nachteile „Bescheid weiß“, frägt sich das 🙂
Werde mich gleich auf die Suche begeben.

Des weiteren bin ich gespannt, ob diese „spezielle“-Format evtl. Probleme bereit mit diversen „Foto-Plugins“ bzw. Galerien. Ich bin gespannt.

Visionäre Grüße,
Rainer

Schreibe einen Kommentar!

Hilfe zum Kommentieren

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen oder eine Gefährdung anderer Besucher darstellen, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und sie haben die Möglichkeit, ein Avatar-Bild zu verwenden. Dazu müssen Sie mit Ihrer E-Mail Adresse bei Gravatar angemeldet sein. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

Ihre E-Mailadresse wird nicht veröffentlicht. Mit dem Absenden anerkennen Sie die Datenschutzhinweis des Blogs.