この記事では、画像(jpg、png、gifなど)を一括でWebPに変換できるフリーソフト、Webクライアントツールについて、くわしく解説していきます。
2024.09.05) 「WebP Converter」のダウンロードページのURLが変更されていたので修正。
2024.09.19) Webクライアントツールの一括ダウンロードはWebPの作成時間が標準時間になることを追記。
ブログの記事に画像を沢山使う人は必ず画像を圧縮しましょう。
なぜなら、画像を圧縮することでページ表示が速くなり、結果的に「SEO対策」にもなるからです。
ブログで稼ぐ場合は定番の施策といえます。
2018年7月より、ページの読み込み速度をモバイル検索のランキング要素として使用することになりました。
引用:ページの読み込み速度をモバイル検索のランキング要素に使用します
この引用を見てもわかるように、Googleも「ページ表示は検索結果に影響しますよ」と公言しているので、画像はできるだけ圧縮するようにしましょう!
エックスサーバー利用者は無料でスペック強化された最新のサーバーに移行できます。
新サーバーに移行するだけで確実にページの表示が速くなりますよ!
画像を圧縮する方法として、以下の記事で画像(jpg、png、gif)をさらに圧縮する方法を紹介してきました。
上記記事のように、画像をさらに圧縮するのもいいんですが、当サイト【還じいブログ】ではWebP(ウェブピー)形式の画像を採用しています。
WebPというのはGoogleが開発した画像フォーマットで、劣化を抑えつつ圧縮率を高く(容量を小さく)できるという特徴があります。
Googleもこのフォーマットを推奨しているので、WebPがこれからのスタンダードになるかもしれません。
この記事では、画像をWebPに変換できるフリーソフトとWebクライアントツールの使い方などを解説しています。
どちらも簡単に変換できるので、参考にしてください!
SEO対策として画像圧縮は必須
冒頭でも書きましたが、
画像を圧縮することは「SEO対策」にも繋がるんです。
圧縮することでページの表示が速くなるので、読んでくれる人を待たせることもありません。(離脱防止)
ページ表示の速さはGoogleの評価対象の可能性もあるので、画像は必ず圧縮しましょう。
WebPはGoogle開発の次世代フォーマット
ところで、この【還じいブログ】はすべての画像がWebP形式です。(この記事の中の画像ももちろんWebP)
ただ、WebPは画像フォーマットの中でも新しいフォーマットになるので、すべてのブラウザがWebPに対応しているわけではないんですよ。
それでも、WebP画像が表示できるブラウザが徐々に増えて、今ではChrom、Edge、Firex、Safariなどの有名どころはすべて対応が完了しています。
未対応なのは、古いブラウザ、開発中止のブラウザ、機能が特化されたブラウザなどですかね。
記事内の画像をWebPで統一するのであれば、本来はすべてのブラウザがWebP対応になるのを待つべきです。
でも、僕は割り切って画像をすべてWebPで統一しています。(jpgやpngなどは未使用)
WebPに未対応のブラウザを使っている人は、ごめんなさいです。
ちょっと乱暴ですが、主なブラウザはすべて対応しているので、もう画像はWebPでいいかなと思っています。
ちなみに、未対応ブラウザの場合は既存の画像(jpg、pngなど)を表示、WebP対応ブラウザではWebP画像を表示できる賢いプラグインもあります。
すべてのブラウザを考慮したい場合は、表示の使い分けができる「EWWWW Image Optimizer」というプラグインを使いましょう。
ただし、「EWWWW Image Optimizer」は過去にいろいろ問題があったプラグインです。
試しに、WebPに対応できる設定に挑戦しましたがわかりづらかったので、あまりお勧めできません。
WebPに変換できるおすすめツール
一括も含めて、画像をWebPに変換できるツールを2つ(+参考ツール)紹介します。
ブラウザだけで使えるWebクライアントツール
まずは、ブラウザだけで変換できるWebクライアントツールです。
以下のページにアクセス。
PCの画像(jpg、pngなど)を赤枠部分にドラッグ&ドロップ。
個別でも、まとめて一括でも、変換したWebP形式の画像をダウンロードが可能。
試しに40ファイルほどの画像をアップロードしてみましたが、サクッと変換されました。
注目する点として、Webサーバーにアップロードされて変換するわけではなく、変換ページにアクセスしたブラウザ上で変換処理が実行(PCで実行)されることです。
そのため、サーバ側に画像が保存される心配はありません。
ドラッグ&ドロップだけで簡単にWebP変換できるので、手軽に使いたい人にはおすすめのツールです。
ブラウザだけですぐに使えますよ!
圧縮率の指定はできませんが、WebPそのものが圧縮率が高いので問題ないでしょう。
デスクトップで動かすフリーソフト
続いては、PCにインストールしてデスクトップ上で動かすフリーソフト「WebpConverter」のダウンロードと使い方です。
公式のダウンロードページにアクセス。
「Download for Windows」をクリック(Macの場合は「Download for Mac」)
インストーラがダウンロードされるので、適当なフォルダに保存。
ダウンロードしたインストーラを起動し、以下の順番で進めてインストールを完了させます。
Windowsのスタートボタン(①)をクリックし、「V」のカテゴリにある「WebpConverter」(②)をクリック。
起動したら、まずは変換されたWebP画像の保存フォルダを指定しましょう。
「Options」をクリック。
「Browse」ボタンをクリックして保存するフォルダを指定し、「×」マークをクリック。
※保存ボタンがなくても、自動で設定内容は保存されます。
左下の「変換タイプ」は「JPG/PNG to Webp」に変更(①)し、PCの画像(jpg、pngなど)をそのままドラッグ&ドロップ(②)。
「Convert」をクリック。
これで、指定フォルダに変換されたWebP画像が保存されます。
「WebpConverter」は、選択した「変換タイプ」を保存してくれないので、起動のたびに変換タイプを変更しないといけないのがちょっと面倒ですかね。
あとは、ドラッグ&ドロップとConvertボタンで普通にWebPに変換できます。
ちなみに、「Options」で圧縮率の調整が可能です。
圧縮率が変更できます!
圧縮率を変更したい場合や、事情によりブラウザが使えない場合は「WebpConverter」を利用してください。
ブラウザを使うWebオンラインツール
ブラウザを使ったWebPへの変換を最後に参考情報として紹介します。
こちらの方法は、ブラウザを使う点では最初に紹介したサルワカさんのツール「ブラウザだけで使えるWebクライアントツール」と同じになります。
実は、画像を圧縮できる「TinyPNG」では、WebPへの変換もできるんです。
実際の使い方も簡単です。
以下の「TinyPNG」のページにアクセスし、①の「Convert my images、、、、、」をクリックして有効にし、「WebP」(②)にチェックをつけます。
あとは、変換したいjpgなどの画像をドラッグ&ドロップするだけです。
変換が完了すると、以下の画面が表示されるので、個別やまとめて一括でダウンロードができます。
だから、どっちを使っても全く問題はありません。
しいて違いをあげると、サルワカさんのツールはブラウザ(クライアントであるPC)で変換処理が実行されるので、変換する画像の数に制限はありません。
たいして、「TinyPNG」の方は画面のメッセージにあるように、変換できるのは20ファイルまで、最大5メガまでとう制限があります。
個人的にはサルワカさんのツールをおすすめします。
変換したWebP(画像)をWordPressにアップロード
変換したWebPをWordPressにアップロードする方法です。
WebPというよりも、WebPも含めた画像全般ですね。
記事内に追加してアップロードする
画像を追加(貼り付け)する記事を開き、PCに保存している画像(jpg、pngなど)を空ブロックにドラッグ&ドロップ(②)。
これで、画像のアップロードと追加ができます。
意外と知られてないですが、ドラッグ&ドロップだと「画像」ブロックを使わなくても画像のアップロードと追加が同時にできます。
メディアライブラリにアップロードする
次は、メディアライブラリにWebP(画像)をアップロードする方法です。
WordPress管理メニューの「メディア」」(①)→「新しいメディアファイルを追加」(②)をクリック。
次に、アップロード画面(赤枠部分)にPCの画像(jpg、pngなど)をドラッグ&ドロップ(③)。
まとめ
この記事では、WebPフォーマットに変換できるツールとして、以下の2つを紹介しました。
- ブラウザだけで動作するWebクライアントツール
- PCのデスクトップで動作するフリーソフト
ブラウザだけでサクッと変換できるので、「Webクライアントツール」がおすすめです。
他の画像と比べても、圧倒的に圧縮率が高いWebP画像を利用してページ表示を速くしていきましょう!
今まではデスクトップのフリーソフトを使っていましたが、今はサルワカさんのツールを使っています。
ブラウザは常時起動しているので、「ブックマークでアクセス」→「画像アップロード」だけで変換できるのは、かなり便利ですよ!
コメント