WebPへの対応。実は変換も簡単、SEOにも効果的に。|デザイナー、コーチ、ディレクターズメモ|井川igawa.

Memo

WebPへの対応。実は変換も簡単、SEOにも効果的に。

WebPのロゴ。

WebPへの対応。実は変換も簡単、SEOにも効果的に。

IEが公式にサポート終了。

Internet Explorerがサポート終了に。

いよいよというか、ついにというか、2022.06.16にIEのサポートが終了した。

そこで、改めて画像形式、WebPについて考察してみた。

  1. WebPの開発元であるGoogle社のChromeはもちろん、Apple社のSafariも2020年から対応している。
  2. Microsoft社のIEの移行先ブラウザであるEdgeも、ベースはChromeと同じChromiumなので対応済み。
  3. iOSのSafariもAndroidのChromeも対応済み。

ブラウザ的には、ほとんど迷いもなく、WebPを使用することができるようになった。

関連メモ:JpgからWebPへ? HTMLへの実装・検証結果。


サポート外のブラウザをサポートする必要はあるだろうか?

サポート外となった以上、今後はInternet Explorerを使用するのは自己責任となる。

失笑を買ってしまったり、怠慢だと言われたり、ネットリテラシーが低い、などと言われる可能性がるので、使っている方が悪いとなる。

すでに遅いが、なるべく早めに移行した方が自分や会社のためだ。


WebPには、Adobeも対応しはじめてている。

Photoshopは対応しだしている。

ブラウザはほぼほぼ対応となったWebPだが、デザインソフトの方がまだ完全対応していない。

Photoshopは対応しだしているようだが、Figma、XD、Illustorなどは未対応だ。

XDやIllustratorも追従する可能性が出てきた。

Photoshopが対応しだしたということは、必然的にXDやIllustrator、そしてFigmaも対応していく可能性は高いだろう。


WebPへの変換サイトはすでにいくつかある。

「Convertio」「SYNCER」など、オンライン上でかつ登録不要でWebPへ変換できるサイトはすでにある。

アフィリエイトサイトだが、無料で使え、アカウント作成も不要、ウィルスチェックでも問題がないので重宝している。

「Convertio」のWebPへのコンバーター

https://convertio.co/ja/webp-converter

Convertioのファイルコンバーター。WebPへ変換可能。

「SYNCER」のWebPへのコンバーター

https://lab.syncer.jp/Tool/Webp-Converter

SYNCERのファイルコンバーター。WebPへ変換可能。


SEO的にはどうか?

やはり、軽い。

全てが劇的にというわけではないが、それでもWebPは多くの場合JPGよりも軽く、またPNGの用にアルファチャンネル(透過)が使える。画質の劣化もほぼなく変換可能。少なくとも人間の目では判断できない程度で変わりない。

何よりもGoogleが開発した画像形式。

検索エンジン最大手のGoogleが開発した画像形式なので、SEOの効果がないとは思えない。サイトの読み込み速度はGoogleのSEO対策基準にも入っている。


PageSpeed Insights

以前はよく怒られていたが、WebPであれば比較的優しい。

これは一目瞭然。計測してみるとわかる。

上記の通り2022年6月現在では、デザインツール、特にFigmaとXDがネイティブサポートをしていないという現状ではあるが、オンラインツールで簡単に変換できる。

実際にサイトを訪れるユーザーは、サイトがどのデザインツールで作られていようが全く気にしない。

ただし、読み込み速度は気にするだろう。

ユーザビリティ的には、一手間かけるメリットは十分あるのではないだろうか。

WebP、導入のメリットあり。


疲れた時は、栄養を。
ポスト投函で届く、人気のブドウ糖です。
砂糖の代わりにコーヒーや紅茶などに。

Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材、購入素材、もしくは自前のものを使用しております。

井川 宜久 | Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    Name(required)お名前 (必須)
    Furigana(required)ふりがな (必須)
    Email(required)メールアドレス (必須)
    Phone Number(required)電話番号 (必須)
    Message(required)ご質問・ご要望 (必須)


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、私はただの人間です。万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。