【拡張子webpとは】jpg、pngへ変換する方法、画像サイズ圧縮まとめ

つなワタリ＠捨て身の「プロ無謀家」（@27watari）です。拡張子webp（ウェッピー）の画像をよく見かけるようになりました。そもそも「WEBP・WebP・webp（ウェッピー）」っことの説明、さらに簡単にjpg、pngに変換する方法をおとめました。　

 

 

 

そもそも拡張子「WebP（ウェッピー）」の画像ファイルとは？

拡張子「WebP（ウェッピー）」とは、Googleが開発している画像フォーマットです。2010年に発表され、ここ最近（2020年あたり？）から急増している印象です。

ほとんどのブラウザも対応するようになったことが普及の後押しになっています。

決定打になったのが、2020年にAppleが「iOS14・macOS Big Sur」で対応することになったことでしょう。

これによって拡張子「WebP（ウェッピー）」の広がりは加速すると思われます。

また、オープンソースなので、利用しやすいアプリも新しく開発されるかもしれません。

 

拡張子「WebP（ウェッピー）」画像のメリットは？

拡張子「WebP（ウェッピー）」画像のメリットは、「JPG・PNG・GIFのメリット」を併せ持っている部分です。

 

その特徴は以下のとおりです。

 

＜拡張子「WebP（ウェッピー）」画像の特徴＞
・JPEGのように非可逆圧縮の画像フォーマット
・PNGのように背景の透過が可能
・GIFのようにアニメーションが作れる
・JPGより約25〜34％、PNGよりも約26％軽いデータとなる
※「WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.（A new image format for the Web／Google公式）」
https://developers.google.com/speed/webp

 

 

 

拡張子「WebP（ウェッピー）」画像をPhotoshopで読み込む方法

拡張子「WebP（ウェッピー）」画像は、そのままPhotoshopで読み込むことができません。

しかしGoogle公式のPhotoshop用プラグインが配布されています。「GitHub」からダウンロードしてインストールすれば解決します。

こちらからダウンロードしてください。mac用とwin用の圧縮ファイル、ソースコードなど4種類のデータが配布されています。

 

 

「WebPShop」
https://developers.google.com/speed/webp/docs/webpshop

 

mac用は「WebPShop.plugin」を、win用は「WebPShop.8bi」をPhotoshopの「Plug-ins」の中にコピーすればオッケーです。

私はmac用「WebPShop_0_3_2_Mac_x64.zip」をクリックし、下記のプラグインをダウンロードしました。

 

 

 

拡張子「WebP（ウェッピー）」画像の最大のメリットとは

先程、拡張子「WebP（ウェッピー）」画像のメリットを紹介しましたが、最大のメリットは「Webサイトのページ表示速度がアップする（PageSpeed Insightsのパフォーマンス向上）」ことです。

 

参考：PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

 

どのくらい軽くなるか、再確認します。

 

要するに表示速度もそれだけ速くなるわけです。

 

だからこその拡張子「WebP（ウェッピー）」画像です。

とはいえ、画像をほとんど劣化させずに圧縮できる無料サービスもあります。

私のオススメは「Optimizilla」です。これを使うと、50％ほどサイズダウンしても、画質はほとんど変わりません。かなり利用価値が高いです。一度に20個ほどまとめて圧縮できるのも魅力です。

詳しくはこちらの記事をご覧になってください。

 

参考：【画像ファイルを軽くする】オンラインのWeb画像最適化ツール「Optimizilla」
https://27watari.com/blog-tripper-image-optimization-easy

 

 

さて、拡張子「WebP（ウェッピー）」画像についてだいｔだいのことがわかったと思います。

続いて私がイチオシの拡張子「WebP（ウェッピー）」画像の変換サービスを紹介します。

 

 

 

 

WEBP変換ツール（WEBPコンバーター）の中で最強のコンバーターはどれ？

拡張子webp（ウェッピー）の画像を変換するサービスはいろいろありますが、私は「SYNCER」さんが提供している「WEBP変換ツール（WEBPコンバーター）」が最強だと思います。

 

その理由はいくつかあります。
・JPEGやPNGをWEBPに変換可能
・WEBPをPNGに変換可能
・SVGをPNG（同じページで切り替える）
・サーバーにアップロードされないので、プライバシー保護となる

 

つまりJPEGやPNGとWEBPの相互変換が可能なんです。これはなにげに便利です。ほとんどの無料サービスは、一方通行（WEBP→JPEGなど）が多いからです。

 

WEBP変換ツール（WEBPコンバーター）

JPEGやPNGをWEBPに、SVGをPNGに変換するウェブサービスです。提供している「SYNCER」さんは、知識と感動を同期するをコンセプトに他にも面白いツールを配布されています。

 

「SYNCER　WEBP変換ツール」 https://lab.syncer.jp/Tool/Webp-Converter/

 

 

 

画像サイズ圧縮プラグイン「EWWW Image Optimizer」がすごい

最後にWordPress利用者向けの画像サイズ圧縮プラグイン「EWWW Image Optimizer」を紹介します。

これです。

 

「EWWW Image Optimizer」は、画像を劣化させることなく、アップ時に自動で画像サイズを圧縮してくれるプラグインです。

使用方法は簡単です。ポイントを紹介しておきます。

 

 

「EWWW Image Optimizer」の使い方と設定

「EWWW Image Optimizer」の使い方と設定を紹介します。文章だけですが、まったく難しくありません。

 

・インストール方法

「プラグイン→新規追加→EWWW Image Optimizerを検索→有効化」の流れです。

 

 

・設定の注意点

設定から「EWWW Image Optimizer」を選ぶ。項目はいろいろ出てきますが、「Basic（ベーシック）」と「Convert（変換）」だけを設定します。

 

 

・「Basic（ベーシック）」の設定

「Remove Metadata（メタデータを削除）」にチェックが入っていることを確認します。これにチェックが入っていると、画像のメタデータ（撮影場所、カメラ情報など）が削除されます。

あとはそのままで大丈夫です。

 

 

・「Convert（変換）」の設定

変換設定の一番上に表示されている、「コンバージョンリンクを非表示」にチェックを入れます。これは画像の拡張子が勝手に変換されるのを無効にします。あとはそのままで大丈夫です。

 

 

・アップロード済み画像の一括変換（一括最適化）

さらに！

すでにアップしている画像も一括で圧縮することができます。

方法は「メディア → 一括最適化→最適化されていない画像をスキャンする→（スキャン後に）最適化」を選ぶだけでオッケー。すでにアップロードされている画像を一括最適化してくれます。

 

いろいろな方法がありますね。ぜひ役立ててください。

 

では！

 

↓[ Googleセレクト 関連コンテンツ ]↓