webpについて解説しよう！

こんばんは！くそ腹減っているニラです。

誰かご飯を買ってください！

今回は、webpについて解説していきたいと思います。

webpとは

webpって聞いたことありますか？あんまりないですし、僕も読み方知らないです。

webpは、Googleが開発した次世代画像フォーマットのことです。画像を保存すると、たまに拡張子がwebpになっていることがありませんか？それです。

webpは画像の圧縮率が高く、表示速度の高速化に有利に働くため、Webサイトを作っている人たちは、SEO対策のためにできるだけwebpを使うように推奨されています。

他の拡張子との違い

webp使え使え言われてますが、他の拡張子と何が違うんでしょうか？僕自身も全然知らないので、ちょっと調べてみました。

jpegとwebp

データ量が軽いということに関しては、どちらも負けていません。jpgも十分に軽いですが、webpにすることで25%も軽くすることができます。

webpは軽さが売りでありながら、透過処理ができてしまうということです。jpgは、透過処理の機能が備わっていないんです。Webサイト制作などの写真を多く使う場面でjpgを使うのは非推奨です。

jpgは、写真を保存したりする際に役に立ってくれます。

pngとwebp

次は、pngですね〜。

pngは、透過処理ができるぶん、jpgよりもデータ量が多くなってしまいます。つまり、webpは、pngよりもデータ量が軽いという点が大きな違いですね。

僕はpngをめっちゃ使っています。なので僕のサイトはちょっと重いです。

gifとwebp

そしてgifです。岐阜じゃねぇぞ。

webpとの違いは、アニメーションとして表示されるときに多く使われるということです。

しかし、使用できる色の量は相当少なく、画質も荒くなってしまいがちです。

まぁでもアニメーションと言ったらgifって感じで大丈夫らしいです。

webpを使うメリットとデメリット

メリット

上の他の拡張子との違いを見たらわかるように、webpのメリットは、ただただ軽いってことにつきます。

軽ければ、ページスピードの改善にもつながり、ページスピードが上がれば、SEOにもつながります。

ページスピードは、GoogleのWebサイトの評価指標の1つに入るくらい大事なことで、それが遅いとちゃんとした評価を受けることができません。

おでのポートフォリオ・・・

デメリット

ちゃんとデメリットもあります。

まずは、JavaScriptから使用判定が出ないということです。JavaScriptがメインになるアプリでは、webpの使用はデメリットになります。

次に、非対応のブラウザも存在するということです。これは、アップグレードを待つしかないですね。古いブラウザは、webpに対応していないので気をつけましょう。

webp画像の作り方

webpで保存したいんだけど、普通にやったらできないよ。

そうですね。普通の方法では、webpとしての保存は難しいです。

推奨しているのに、普通に保存させてくれないのはちょっとって思いますが・・。

方法は、Photoshopを使うことです。

PhotoshopのプラグインであるWebPShopをインストールすることで、pngやjpgなどの拡張子を、webpに変換することが可能です。そして、webpをPhotoshop上で開いたり編集したり、保存も可能になります。

感想

最近のWebサイトを調べてもwebpが使われている場面が多くおります。

時代は変わっていくものです。

僕みたいにwebpを使わずにpngばっかり使っている人がジジィ呼ばわりされる日も近いかもしれません。

保存の仕方だけでも覚えておきましょうか。

❤︎

2022/11/09

nira-012.mahora94

◀︎

next...

prev...

▶︎

comment

コメントを記入

kawa_hide より:

2022年11月8日 8:59 AM

webpとjpgの色数が違うというのは、どこからの情報でしょうか。
両方ともフルカラー（約1670万色）と認識していましたが、違うのであれば、教えて欲しいです。
画像アニメーションでは、最近APNGも使えるようになってきていますので、調べてみましょう。

返信

fill out コメントをキャンセル

Artist

nira-012.mahora94

よろしくお願いします