BloggerでWebpやAvif形式の画像や動画を表示させる方法
⚠️以下の記事は古い情報です。
最近では、グーグルフォトにwebp形式の画像をアップロードすると、ブロガーの『画像を挿入』から そのままwebp形式で共有されるようです。
以下の記事の通りに行うと、画像が表示されないなどの不具合が発生する場合があります。
==========
WebP形式やAVIF形式は、JPGやPNG、GIFよりも少ない容量で高品質な画像や動画を表示できる新しいフォーマットです。
残念ながら2021年12月現在の時点では、Bloggerでこれらの新しい形式の画像や動画を使いたくても、記事作成メニューの「画像の挿入」からはjpgやpngなどの従来の形式のファイルしかアップロードすることは出来ません。
また、Googleフォトにwebp形式の画像や動画をアップロードしたものを利用すると、なぜかjpgやgif形式に自動的に変換されてしまい、容量が大きくなってしまいます。
しかしGoogleドライブを利用することで、Bloggerでも.webpや.avifの画像や動画を表示することができます。
この記事ではwebp動画の作成方法や、webp、avifファイルをBloggerで表示させる方法を備忘録として書いてみました。
※iOSのsafariでは、このページの画像がうまく表示されないことがあります。
webp、avif画像を用意
まずは .webpや.avif形式の画像を用意します。
こちらはネット上にもたくさん情報がありますが、Squooshというアプリを使えばjpegやpngファイルを簡単に変換する事ができます。
SquooshはGoogleの開発した画像変換アプリで、パソコンやスマートフォンにアプリをインストールする事なく利用できます。
変換したい画像をSquooshにドロップするか、アプリから直接画像ファイルを開きます。
Squooshの画面。
Googleドライブにアップロード
変換した画像をGoogleドライブにアップロードします。
Googleドライブに保存したwebpやavifなどの画像、動画をBloggerに表示するためにまず、表示させたいファイルを選択→右上の︙を選択→共有→『リンクを知っている全員に変更』→リンクをコピーします。
リンクをコピーしたものは、以下のサイトで変換し、bloggerの記事作成画面のHTMLビューから表示させたい位置に貼り付ければ表示されます。
【HTML】GoogleDriveの画像を記事に貼る（みずー工房さんのHP）
詳しいやり方も画像付きで解説されているので、ぜひご覧になってください。
webp動画
webp形式では、画像だけでなく動画にも対応しています。
上の動画はwebp形式で表示されているため、容量が211kb程度と大変小さくなっています。
しかし、画像と同じように動画ファイルをSquooshにドロップしても、webp形式の動画は作成できません。
今回はVideo2WebPというブラウザアプリから、webp形式の動画を作成することができました。
このアプリの使い方に関しては、Gigazineで詳しく解説されているのでそちらをご参照ください。
無料で動画ファイルをブラウザ上で簡単にアニメーションWebPに変換できる「Video2WebP」
注意点としては、ファイルを選択→変換する際にエラーが発生し、いつまで待っても変換することができないことがよく起こりました。
私のパソコン（Macbook）やiPadなどでファイルを選択し、コンバートを押しても変換作業が始まりませんでした。
「ファイルを選択」から、スマートフォンのカメラで直接撮影した物は、変換して保存する事ができましたが、スマートフォンの機種によっては出来ないものもありました。
ブラウザの権限あたりが関わっているのかもしれません。
作成できたwebp形式の動画も、上の画像と同様にGoogleドライブに一旦保存し、みずー工房さんのページで変換したものを貼り付ければ無事にbloggerでも表示されます。
よろしければ、webp形式の動画を利用して書いた本業の記事もぜひご覧ください。
笛僧
ブログにお越しいただき、ありがとうございます。佐藤直紀と申します。現在、チェコフィルハーモニーで首席フルート奏者を務めています。
