Home
フロントエンド
画像形式をWebPに変換するツール6選

画像形式をWebPに変換するツール6選

画像形式をWebPに変換するツール6選

どうも!かけちまるです!

従来の画像形式よりもファイルサイズが小さく、画質低下も最小限のWebP。
画像のファイルサイズはWebサイトの表示スピードに関わる部分なのでWebPを導入する方が良いことがわかります。

しかし、まだデザインからWebP形式で書き出せないソフトがあると思います。

この記事では、画像形式をWebPに変換できるツールをいくつか紹介したいと思います。
自分に合ったツールを見つけてみてください。

WebP変換ツール6選

無料で利用でき、ソフトのインストールが不要なツールを選定しております。
使い方は、アクセスすればなんとなく分かると思うので割愛します。

サルワカさんのWebP変換ツール

サルワカというブログサイトが開発したWebP変換ツールです。
僕がWebP変換ツールを開発するまでよく使っていました。

特徴
  • ・デザインがシンプルでわかりやすい
  • ・50ファイルまで一括変換可能
  • ・変換後の画像を確認できる
  • ・ファイルサイズがどのくらい軽量化されたかわかる
サルワカさんのWebP変換ツール

Softo LimitedさんのWEBPコンバーター

Softo LimitedのWebPコンバーターです。
無料アカウントでは、1日に10ファイルの変換まで制限されているようです。

しかし、WebPだけでなく動画やフォントなどさまざまな形式へ変換可能です。
なので、画像の大量変換には向きませんが、フォントや動画などの小数ファイルの変換には重宝するかもしれません。

Softo LimitedさんのWEBPコンバーター

Googleさんが開発したSquoosh

Googleが開発したSquooshという画像コンバーターです。
1ファイルずつしか変換できませんが、多機能です。

特徴
  • ・1ファイルずつしか変換できない
  • ・圧縮率を選択できる
  • ・before、afterをリアルタイムで確認できる
  • ・ファイルサイズがどのくらい軽量化されたかわかる
  • ・width、heightや色味を変更できる
Googleさんが開発したSquoosh

AnyWebPさんのWebP変換ツール

AnyWebPのWebP変換ツールです。
ファイルサイズが大きい画像は変換できないようです。

特徴
  • ・複数ファイルの変換が可能
  • ・圧縮率を選択できる
  • ・width、heightを倍率で調整できる
AnyWebPさんのWebP変換ツール

PhotoshopでWebP形式で保存する

これまでは、書き出した画像形式をWebPに変換する考えでしたが、書き出しをWebPでできれば嬉しいですよね。

そこで朗報ですが、Adobe Photoshop23.2からWebP形式で書き出しできるようになりました。
ご参考まで。

ちなみにPhotoshop23.2以前は「webpshop」というプラグインをインストールすることでWebP形式で書き出せます。

【告知】かけちまるblogで開発したWebP変換ツール

この度かけちまるblogで、WebP変換ツールをリリースしました。

特徴
  • ・Web上で完結(アプリインストール不要)
  • ・最大25ファイルの画像を一括変換
  • ・ファイルサイズがどれだけ軽量化されたか確認できる
  • ・変換前後の画像の劣化を確認できる
  • ※随時、機能追加予定です。

機能追加など使いやすいように改善していく予定なのでよかったら使ってください🙇‍♂️

かけちまるblogで開発したWebP変換ツール

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【GSAP】タイムラインを使えば複雑なアニメーションを実装できる

【GSAP】タイムラインを使えば複雑なアニメーションを実装できる

【Contact Form 7 Multi-Step Forms】Contact Form7に入力確認画面を追加する方法

【Contact Form 7 Multi-Step Forms】Contact Form7に入力確認画面を追加する方法

clamp関数がSafariで効かない時の対処法

clamp関数がSafariで効かない時の対処法

webpack環境で画像追加を監視して自動圧縮&WebP変換する方法

webpack環境で画像追加を監視して自動圧縮&WebP変換する方法

次世代画像フォーマットWebPでサイトの表示速度を改善しよう!

次世代画像フォーマットWebPでサイトの表示速度を改善しよう!

Three.jsテクスチャをGLSLでbacground-size: cover;のようにする

Three.jsテクスチャをGLSLでbacground-size: cover;のようにする