【wordpress】次世代画像フォーマット【webP】とは?【保存・アップ方法】

WebP(ウェッピー)について

Googleが開発したオープンな静止画像フォーマットで、圧縮率の高い非可逆圧縮が使われたものです。透過画像・アニメーションも対応しています。
ファイルサイズが軽量化出来るため表示速度の改善に役立つ画像フォーマットのようです。
以前は対応するブラウザが少ないという点がデメリットだったようですが、iOS14、iPadOS14のSafariも対応し、サポートされるブラウザが増えているようです。
今後webP形式を目にすることが増えることを考え、wordpressでの保存やアップロードの方法を考える必要がありそうです。

webp形式の画像をJPGで保存する

画像を保存するとき、普段のように「名前をつけて画像を保存」で保存するとwebp形式で保存されます。
しかし使用する画像編集ソフトによっては対応しておらず、編集が出来ない、という場合やwordpressでのアップロードの際にもエラーが出てしまう場合があります。
そんな時に役立つのが、「Save image as Type」というchromeの拡張子です。

webp2

こちらを使えば保存したい形式を選んで保存することが可能になります。

webサイトの表示速度はSEOの評価に影響があると思われるので、webP形式を使い、表示速度を上げることが出来れはSEO対策にも良いかと思います。
しかしどうしてもwebPを使うことが難しい場合もあると思います。
その場合の対策としてはtiny.png等のPNGやJPGを軽量化するツールを使うのもひとつの方法です。

webp形式のままwordpressにアップロードしたい場合

webp

webP形式を活用していこうとした時にwordpressへアップロードしようとするとこのような「このファイルタイプはセキュリティ上の理由から、許可されていません」という警告が出てアップロードできない場合があります。
その時はfunctionphpへwebPがアップできるようになるコードと、メディア欄でwebP形式が表示できるコードを追加することでアップロード出来るようになります。
    function custom_mime_types( $mimes ) {
    $mimes['webp'] = 'image/webp';
    return $mimes;
}
add_filter( 'upload_mimes', 'custom_mime_types' );
上記のコードでメディア欄へアップロードが可能です。
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);
次にこちらのコードでメディア一覧でwebPの画像も表示されるようになりました。

まとめ

サイトの表示速度の改善について大きく関わってくるのが画像の軽量化や表示方法になると思いますので、自分のサイトに合った方法で軽量化を進めていきましょう!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です