はじめに
ウェブデザインの世界では、常に進化が続いており、ユーザーエクスペリエンスを向上させる新しいテクノロジーやフォーマットが登場しています。その中のwebP画像について記事を書きたいと思います。webP画像は、ウェブページの表示速度を向上させ、ユーザーに高品質なコンテンツを提供するための新たな選択肢として登場しました。
WordPressのメディアライブラリにwebp画像をアップロードできるようにする方法
webp画像はデフォルトの状態ではメディアライブラリにアップロードできません。もしできなければ下記をfunctions.phpに追加してください。
function enable_upload_webp($mime_types) {
$mime_types['webp'] = 'image/webp';
return $mime_types;
}
add_filter('upload_mimes', 'enable_upload_webp');webp画像とは？
webPは、Googleによって開発された画像フォーマットです。webP画像は、従来のjpgやpng画像と比較して、高圧縮率と高品質を実現しています。これは、ウェブページの読み込み速度を改善し、ユーザーエクスペリエンスを向上させます。
webP画像を使用するメリット
ページスピードの向上
webP画像は、同じ画質を維持しながら、jpgやpngよりも小さなファイルサイズで保存できます。これにより、ウェブページの読み込み速度が向上し、ユーザーは迅速なコンテンツアクセスが可能です。
ページスピード対策をするときに下記の「PageSpeed Insights」を使用しますが、webp画像を使用せず高得点を出すのは不可能だと考えております。
高圧縮率・高品質
圧縮率が高くても、webP画像は高品質な視覚コンテンツを提供します。色鮮やかで鮮明な画像を表示し、ウェブサイトの魅力を保ちます。
透過性
webP画像は透過性をサポートしており、複雑なグラフィックスやイラストの透過画像を効果的に表示できます。
アニメーション
webP形式はアニメーションにも対応しており、低ファイルサイズで高品質のアニメーションを実現できます。
webP画像を使用する際に気をつけること
webP画像は多くの主要なウェブブラウザでサポートされています。これにはGoogle Chrome、Mozilla Firefox、Microsoft Edgeなどが含まれており、多くのユーザーに対応しています。ただし、Internet Explorerなどの古いブラウザでは対応してなかったりするので、全てのブラウザで完全にサポートされているわけではありません。互換性に気を付ける必要があります。
まとめ
WordPressのメディアライブラリにwebp画像をアップロードできるようにする方法ご紹介しました。webp画像を使用することはページスピードを向上させるために必須と言える要素だと考えております。しかし、対応していないブラウザもあるため、使用するかしないかは考える必要があります。
他のページスピード関連の記事
サブセットフォントメーカーの基本と利点、使い方を解説しています。フォントから不要な文字を削減することでフォント自身の容量が減り、ページ速度とユーザーエクスペリエンスを向上させます。
「PageSpeed Insights」の改善項目の「適切な画像サイズ」という項目の改善手段として活用できるタグについてcssのメディアクエリを使用する方法と比較して解説しています。
ContactForm7関連のファイルをContactForm7があるページ以外で読み込まなくするためのソースコードを紹介しています。ページスピード対策になります。
ページスピード対策で、「wp_dequeue_script」でjsの読み込みが解除できなかった時の対処法について記事で紹介しています。
