お久しぶりです。制作のウサナミです。
今回は前回紹介した記事の続編になります。
ただ、残念な事に今回は１つの項目に絞った紹介となります。。。
その代わり今回は１項目に対するボリュームがだいぶ厚めとなっております。

ウェブサイトを高速化して検索順位を上げるための方法3選！

次世代画像フォーマットWebP

Webpはアメリカのグーグルが開発している画像の保存形式で、読み方は「ウェッピー」らしいです。
読みづらい！と私は思いました。ケロッピーとか、トリッピーとかそういったワードを思い出させる謎のインパクトがあります。
ちなみに次世代フォーマットと言いましたが、2010年9月30日から使用自体は出来た様です。
ただ対応ブラウザが少なく、現在まで中々使用されてこなかったのが事実としてあるようです。

ブログにしようとした経緯

最近、楽天市場のサイトの設定をしている時に、久しぶりに.webpという拡張子のファイルを見つけました。
見つけるまでの流れとしては、楽天市場はどうやらサイトに画像をアップロードすると自動で画像をwebpに変換するようで、最初はその仕様を（なんだこれ、うっとうしいな）ぐらいにしか思っていなかったのですが、
何故変換されたのか気づかず、原因を調べているうちに、あれ？なんだかこの変換された画像の容量。。。元画像と比べて大分軽量化されているぞ？という事実に気づきました。
webpの存在自体は前から知ってはいたのですが、そこで初めて興味を持ち、ブログのネタついでに調べてみる事にしました。

WebPのメリット　WebPはどこまで便利？

圧縮率について

WebPの最も期待できるところはその画像圧縮率にあるでしょう。
非可逆圧縮、可逆圧縮の両方に対応しており、pngのように画像を透過させる事ができ、画像圧縮の期待値はpngやjpgと比べて20~30%の軽量化、物によってはさらに軽量化を期待できる場合もあります。

※こちらの記事で過去にwebpは非可逆圧縮だと紹介しましたが、可逆圧縮にも対応していることがわかりました。
　間違った情報を流してしまい申し訳ございませんでした。間違った内容のテキストは正しい内容に修正しております。

対応ブラウザについて

続いて、対応ブラウザですが、最初のほうで現在まで中々対応ブラウザが増えなかったといいましたが、
最近（2021年11月2日時点）は少し状況が変わってきている様でwebp未対応だったIEの衰退や対応ブラウザ増加などにより
改めて今後は注目される可能性が高まりそうです。

WebP試しに使ってみたい　でも変換の仕方がわからない

前々から気になっていて、この記事を読んで試しに変換しようとしたそこのあなた。

フォトショップなどの画像編集ツールなどには標準では今の所、残念ながらwebpに変換して書き出す機能は搭載されていないようです。
プラグインなどで一応書き出せる様にする事は可能なようですが、わたくしのようにアナログ思考な方には少しややこしい話かもしれません。
でもそんな人でもwebサイトで提供されている無料拡張子変換サービスを利用すれば簡単にpngやjpgの画像の拡張子をwebpに変換する事が可能です。
試しに “png web 変換”などのキーワードで検索してみると色々と出てくると思うので、その中で使い易いものを使うのがいいでしょう。

対応ブラウザが少ないんじゃ、使用が出来ない？そんな時の対策は？

WEBサイトを作る上で重要なのは「どのユーザーに対しても平等に同一内容の情報を提供する」ことです。
なので、グーグルも基本的には「PCとスマホのコンテンツ内容は同じであるべきでだからこそ我々はレスポンシブを採用したサイトを評価する」と言っています。
ちなみに例外はあります。一瞬で話が覆りましたが、スマホにしてはあまりにもコンテンツ内容が多すぎた場合、それに対してページを分割したり、一部コンテンツを非表示にしたり、並び順を変えたりして対応可能です。
まあ、スマホでコンテンツ量を増やしすぎてユーザー体験を損なうぐらいならちょこちょこと弄っていいからうまく調整してくださいね。っていう事だと思います。
話がそれましたが、つまりここまで読んで皆さんが気にする所はやはり画像が読み込めないブラウザがあるならやっぱり使わないほうがいいの？というところです。

というわけで解決策です。
他にも解決策があるかもしれませんが、簡単なところで下記のような例を用意しました。

<picture>
  <source srcset="test.webp" type="image/webp">
  <img src="test.png">
</picture>

こういった書き方をするとwebpの形式の画像が読み込まれなかった場合、代わりにpngの画像を読み込んでくれる様です。
未対応ブラウザにも対応出来そうです。
もしくは昔流行ったscriptでスマホなら画像の後ろに”_sp”の文字を追加するようなものがありましたね？
そんな感じで対応ブラウザ以外ならページ内のwebpの表記を全てpngもしくはjpgに書き換えるといった記述を書けばうまくだしわけが出来そうですね。

その他の最近のファイル形式

その他の最近のファイル形式にJPEGXR、JPEG2000などといった形式のファイルがあるようです。
ただ対応ブラウザがこちらも大分限られている様で、使う際は注意が必要です。

最後に

最後になりますが、得た知識はうまく活用できると嬉しいですよね。

最近、久しぶりに大きなサイトのコーディングをする機会があったのですが、その際に最近学んだ事を色々と盛り込んだサイト制作を行った所、どの要素が絡んだかは定かではないのですが、サイトの読み込み速度が大きく改善されたように思いました。

成果が実感出来るとやりがいにもつながると思いますので、サイトを制作している皆さんもわたくしと一緒に成果が実感できるスキルアップを目指して頑張りましょう。