• Home
  • Category
    • Simple
    • Stylish
    • Cute
    • wafuu
    • Illust
    • Pop
    • Other
  • Color
    • White
    • Black
    • Red
    • Blue
    • Yellow
    • Green
    • Purple
    • Brown
    • Pink
    • Colorful
  • Xux Column
  • About
  • Contact

Copyright © 2023 Xux Webzine. All Rights Reserved.

コラム【WEB編】

Xux Column
webpimg

WebP(ウェッピー)とは?

WebPとは、Googleが開発した新しい画像フォーマットです。

この“WebP”とは、Webページに配置する画像の品質を保ったまま高圧縮によって読み込み速度に効果が期待できるもので、拡張子もそのまま“.webp”となります。

画像フォーマットと言えば…jpgやpng、gifなどとなりますが、実際には用途に応じて適宜使用していないWebページをかなり多く見受けられます。

例えばjpgは色のデータが多い写真などに適しており、さらにイラストなど比較的画素数が写真よりも少ない画像に関してはgif、そして背景を透過させたい場合はpngをそれぞれ使い分けるべきです。

そうしなければ無駄に容量の大きな画像ファイルをユーザーに読み込ませることになり、場合によっては離脱の原因に大きく関係してくる重要な要素となります。

そこで、大幅に圧縮できる非可逆圧縮のひとつ“jpg”と可逆圧縮・透過対応の“png”それぞれの利点を活かし、画像ファイルをjpgよりも圧縮しつつ透過にも対応する“WebP”が注目されているというわけです。

特にユーザーファーストを掲げているGoogleが開発したフォーマットですので、読み込みスピードによる検索順位にも影響する可能性も十分考えられるでしょう。

ただしこの“WebP”、編集ソフトが対応していない・ブラウザが対応していないなどのデメリットもあり、そういったブラウザに関しては従来の画像を条件分岐によって表示させる必要があります。

今回は、Webページの閲覧を快適にする画像フォーマット“WebP(ウェッピー)”について、ご説明致します。


WebPのメリット

①容量を軽くしても画像が綺麗

WebPは画質を保ったままで、軽量化した画像が書き出せることが大きな特徴です。

JPEGのように圧縮率が高いため、Webサイトへの負担や読み込みにかかる時間を軽減できます。

・pngより約26%小さくできる
・jpgより約25〜34%小さくできる

上記のように、“WebP”で書き出すことによって同等の画像であってもjpg・pngよりもさらにファイルサイズを圧縮することができ、結果Webページを快適に閲覧することができるほどWebサイトのトラフィック量軽減に役立つとのこと。

また、gifから変換することも可能ということはアニメーション自体も軽くすることが可能ということになります。(gifアニメーションを作成してから“WebP”に変換。)

これは画像を多く使用しているページだと特に効果的で、1ページ全体としてもかなり効果が期待できるものと思われます。つまり“WebP”とは、Googleが開発した画像フォーマットのひとつで、ページ読み込み速度改善のためにも推奨されており、まさに次世代フォーマットと呼ぶにふさわしい技術ということになります。

②透過やアニメーションも作成出来る

上記の説明の通り、今までPNGで透過を利用していたものもWebPで可能です。

また、gifアニメーションもさらに軽い状態で可能となります。


現在はほぼすべてのブラウザに対応しています

以前は対応しているブラウザが限定されてしましたが、現在はIEを除くほぼすべての主要ブラウザが対応しています。

iPhone版のSafariも対応したことにより、ブラウザをわけるためのコーディングも不要となったため、ますます普及率が高まってきています。

webp対応ブラウザ

(参考:“WebP” | Can I use… Support tables for HTML5, CSS3, etc)


軽くしても画像がきれいということは

通常の画像フォーマットは、圧縮率を高めてファイルサイズを落とすほど、画質が荒くなってしまいます。

その点WebPの場合は、正しい方法で変換さえすれば、きれいな画質を保ったままの状態でファイルサイズを軽くすることができるのです。

元のデータを損失させない可逆圧縮と、画質を保ったままで高圧縮率が望める非可逆圧縮、両方のデータ圧縮形式に対応が可能です。

他のフォーマットと同じ見た目を保ちつつ、そのフォーマットよりも軽量であるのが特徴です。


画像の容量を軽くするメリット

ページ内に設置する画像のデータ容量が軽くなればなるほど、ページの読み込み・表示スピードが向上します。

ページの読み込み・表示スピードを向上させると、以下のようなメリットがあります。

①SEOの評価が改善する可能性がある
②ユーザーの直帰・離脱率が改善する可能性がある
③CVRが改善する可能性がある

ご存じの方も多いと思いますが、SEOの評価には「ページの速度」が大きく関係しています。

ページの読み込み・表示が遅い状態では、ページエクスペリエンス(ユーザーのページ内の体験)を損ねることになりますので、

ページスピードは出来るだけ改善できるようにしましょう。


WebPのデメリット

①古いブラウザには対応していないものもある

Internet ExplorerやKaiOSなど、一部開発が終了したブラウザや古いバージョンのブラウザは非対応です。

非対応ブラウザの場合には、pictureタグなどを用いて、JPEGやPNGなど代替フォーマットの画像を表示させることで対応は可能です。

とはいえ、現在はユーザーが使用しているブラウザのほぼすべてが対応しているため、デメリットとして感じることは、ほぼ無いに等しいでしょう。

②変換ツールやサービスが限られている

WebPは2010年に登場した画像フォーマットですが、これまでは普及があまり進まなかった状況もあってか、変換ツールやサービスが比較的少ないのがデメリットといえます。

しかし近年は各サービスのWebP対応化が進み、WebPがより一般的になると予想されます。

Photoshopは、これまではプラグインを使うことで対応してきましたが、2022年2月15日に、プラグインや環境設定なしでWebPに変換できる最新バージョンを公開しました。

まだIllustratorやXDでは、直接WebPを書き出すことはできませんが、Photoshopのように今後は対応が進む可能性もあります。

今のところは変換手段がまだ充実しているとはいえませんが、今後WebPの普及に合わせ、ソフトやサービスも増えてくるでしょう。

Share This Post
Facebook Twitter Linkedin

Pickup Webdesign

おすすめのウェブデザインをご紹介します
大人顔負けのスイムウエアコレクション。 | Pick Up | グローバルワーク(GLOBAL WORK) オフィシャルブランドサイト

globalwork

Blue, Pop 2023/01

大人顔負けのスイムウエアコレクション。 ひと足先にスイムウエアがお目見え。 キッズらし…

See More Information
おへそグループ | 佐賀市 おへそ保育園・おへそこども園・おへそつながり・おへそこども学園・おへそ学道場

おへそグループ

Blue, Cute 2023/01

佐賀市の白山にある小規模認可園おへそ保育園 教育施設が多く立ち並ぶ、佐賀市のおへそ水ヶ…

See More Information
GRIN | はみだした生き方も悪くない、と笑える世界。

GRIN

Black, Stylish 2023/02

自分の生き方で世界を生き抜く一歩を踏み出すクリエイティブマガジンです。 はみだした生き…

See More Information
全50色以上、260万通り以上の組み合わせから、あなたにぴったりなメイクパレットがみつかるセルフメイクアップブランド「MN」

MN

Cute, Yellow 2022/12

わたしをメイクするのはわたし だれのものでもない だれのためでもない わたしは わたし…

See More Information
ジブリパークは「愛・地球博記念公園(モリコロパーク)」内に、 森と相談しながらつくっているスタジオジブリの世界を表現した公園です。

ジブリパーク

Illust, White 2022/12

ジブリパークとは ジブリパークは愛地球博記念公園モリコロパーク内に、森と相談しながらつくっ…

See More Information
星野源『恋』 - 特設サイト

星野源

Simple, Yellow 2023/01

恋 1年4ヶ月ぶりのニューシングルは自身出演のドラマ「逃げるは恥だが役に立つ」の主題歌…

See More Information
映画『すずめの戸締まり』公式サイト

すずめの戸締まり

Blue, Illust 2022/11

扉の向こうには、すべての時間があった。 国境や世代の垣根を超え、世界中を魅了し続けるア…

See More Information
the weekend short trip 鎌倉編 | BEAMS BOY

BEAMS BOY

Pop, White 2023/01

わざわざ行きたい鎌倉 カーテンを開けると太陽の光が差し込んで外には青空が広がっている。…

See More Information
はじめてのいわぎん|岩手銀行

岩手銀行

Cute, Green 2022/11

はじめてのいわぎん。 はじめてのアルバイトや就職で「お金」と関わる機会が増え、不安や心…

See More Information
ドロップトーキョーは、東京のストリートファッションを中心に、国内外に発信するオンラインマガジン。

Droptokyo

Colorful, Other 2022/11

東京のストリートファッションを中心に、国内外に発信するオンラインマガジン。 最新ニュー…

See More Information
CHANEL リヴィエラへ、心の旅をする | SPUR

SPUR

Green, Stylish 2023/01

シャネルリヴィエラへ心の旅をする ガブリエルシャネルが愛したヴィララパウザ。 今もそこ…

See More Information
ごとうちクリップ studio CLIP × 全国のパン屋さんとのコラボグッズが登場!

ごとうちクリップ

Brown, Cute 2022/03

全国のパン屋さんとのコラボグッズが発売! 日本各地で地元の人から愛されている12軒のパ…

See More Information

Follow Me