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制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

Contact Form7の入力エラー表示をCSSのみでカスタマイズ

Contact Form7の入力エラー表示をCSSのみでカスタマイズ

【PHP】foreachで配列の最初と最後を判定する

【PHP】foreachで配列の最初と最後を判定する

CSSでサイトのスクロールを無効にする方法

CSSでサイトのスクロールを無効にする方法

【jQuery】順番に要素が出てくるアニメーション

【jQuery】順番に要素が出てくるアニメーション

コピペで完了!CSSグラデーション(linear-gradient)まとめ

コピペで完了!CSSグラデーション(linear-gradient)まとめ

UNPKGの使い方~npmで公開済のパッケージを使えるCDNサービス~

UNPKGの使い方~npmで公開済のパッケージを使えるCDNサービス~