Jak dodać pliki WebP do biblioteki WordPress?

Jak dodać pliki WebP do biblioteki WordPress?
Jak dodać pliki WebP do biblioteki WordPress?

Format WebP powoli zaczyna wypierać standardowe pliki typu PNG czy JPG i słusznie. WebP jest znacznie lżejszy i szybszy od ich starszych poprzedników, co za tym idzie lepiej zoptymalizowany pod urządzenia mobilne. W PageSpeed Insights od jakiegoś czasu można zobaczyć komunikat sugerujący przejście na tego typu pliki.

WordPress jednak domyślnie nie zezwala na dodawanie WebP do swojej biblioteki, ale można to zrobić za pomocą dodania krótkiego kodu do pliku functions.php.

Jak dodać pliki WebP?

Poniższy kod pozwoli Ci dodać pliki WebP do biblioteki WordPress. Będziesz mógł przesyłać obrazki tak samo, jak w przypadku pozostałych multimediów.

// Włącz przesyłanie plików graficznych webp
function webp_upload_mimes($existing_mimes) {
    $existing_mimes['webp'] = 'image/webp';
    return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');
// --------------------------------------------

Natomiast kolejna część kodu jest odpowiedzialna za wyświetlanie podglądu w bibliotece WordPressa. Dodaj poniższy kod do swojego pliku functions.php zaraz po kodzie włączającym możliwość przesyłania plików WebP.

// Włącz podgląd / miniaturę plików graficznych webp
 w bibliotece
function webp_is_displayable($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_is_displayable', 10, 2);
// --------------------------------------------

Podsumowanie

Dodanie plików WebP do biblioteki WordPress to nic trudnego, a korzyści są ogromne. Zaoszczędzone miejsce, transfer, optymalizacja pod urządzenia mobile, to tylko niektóre zalety uruchomienia WebP w WordPressie.

Rozmiar strony po konwersji obrazów do WebP. (Źródło: KeyCDN)

Na moim blogu wszystkie zdjęcia są w formacie WebP, pozwala to zaoszczędzić średnio 75% transferu w stosunku do standardowego PNG. Również Google przychylniej patrzy na tego typu praktyki i punktuję witryny które stosują optymalizację i posiadają pliki WebP.

Wymiana grafik z PNG na WebP

Słupki na powyższej grafice powędrowały w górę, to dobry znak i nowe możliwości w kierunku optymalizacji. Dodam, że powyższa grafika w rozdzielczości 940 x 400 w PNG waży 43,9KB po kompresji, gdzie taka sama w WebP już tylko 25,8KB. Jak łatwo policzyć daję to 59% mniej wagi przy ładowaniu strony!