拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1200,h_675/https://susanweblog.com/wp-content/uploads/2023/06/Web-1920-–-42.png)
webサイトのパフォーマンス向上と高速な画像表示を実現するために、webp(ウェッピー)という画像フォーマットが注目されています。
![すーさん すーさん](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_72,h_72/http://susanweblog.com/wp-content/uploads/2023/06/FFAB46C1-3DF8-417A-88FA-2F731079CAC2.jpg)
本記事では、既存のjpgやpng形式の画像をwebp形式に変換する方法について具体的な手順で解説していきます。
この手順を使って、効果的にファイルサイズを削減し、webサイトの読み込み速度を向上させましょう。
デジタルハリウッド STUDIO by LIG
![公式サイト 公式サイト](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_567/https://susanweblog.com/wp-content/uploads/2023/08/Screenshot-2023-07-31-at-12.40.57-pm-1-1024x567.webp)
実績あるカリキュラムをベースにこれまで9万人以上のクリエイターを輩出。料金→安、授業クオリティ→高。
入学金 | 0円 |
料金 | 165,000円(税込)〜 |
学び方 | 通学とオンライン |
校舎 | 上野校、池袋校、大宮校、北千住校、川崎校、町田校他 |
就職サポート | ○ |
運営会社 | 株式会社LIG |
Webデザインが学べるおすすめのスクールに関しては【初心者用】Webデザインが学べるスクール!おすすめの10校を徹底比較で詳しく紹介していますので、興味ある方はぜひチェックしてみてください。
![【初心者用】Webデザインが学べるスクール!おすすめの10校を徹底比較 【初心者用】Webデザインが学べるスクール!おすすめの10校を徹底比較](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_128,h_72/https://susanweblog.com/wp-content/uploads/2023/08/a47dd22e0a1ac2a90cbe350755d1536c-320x180.webp)
レバテッククリエイター
![公式サイト 公式サイト](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_561/https://susanweblog.com/wp-content/uploads/2023/12/Screenshot-2023-07-20-at-1.55.09-am-2048x1121-1-1024x561.webp)
Webやゲーム業界のフリーランスクリエイター向けのエージェントサービス。案件マッチングから単価交渉、契約代行までを一貫してサポート。
案件数 | デザイナー用案件数:1,000以上 |
リモート案件 | ◎ |
勤務日数 | 週3日〜 |
高単価 | ~1,400,000円/月 |
地域 | 東京 |
運営会社 | レバテック株式会社 |
おすすめのフリーランスデザイナーエージェントに関してはフリーランスのデザイナーが登録しておくべきエージェント8選!おすすめはどこ?で詳しく紹介していますので、興味ある方はぜひチェックしてみてください。
![フリーランスのデザイナーが登録しておくべきエージェント8選!おすすめはどこ? フリーランスのデザイナーが登録しておくべきエージェント8選!おすすめはどこ?](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_128,h_72/https://susanweblog.com/wp-content/uploads/2023/12/6c37732fd647ae4a005c408faf9f9051-320x180.webp)
拡張子webp(ウェッピー)とは
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_683/http://susanweblog.com/wp-content/uploads/2023/06/WebP-Logo.wine_-1024x683.png)
はじめに、webp形式について簡単に説明します。
webpはGoogleが開発した、高圧縮率と高品質な画像を提供するフォーマットです。
webp形式の画像は通常、従来のjpgやpng形式に比べてファイルサイズが小さく、ウェブサイトの読み込み速度を向上させることができます。
拡張子webp(ウェッピー)について詳しく知りたい方は拡張子webp(ウェッピー)とは?メリット・デメリットや変換方法を解説で詳しく解説していますので、ぜひチェックしてみてください。
![拡張子webp(ウェッピー)とは?メリット・デメリットや他の拡張子との違いを比較 拡張子webp(ウェッピー)とは?メリット・デメリットや他の拡張子との違いを比較](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_128,h_72/https://susanweblog.com/wp-content/uploads/2023/06/Web-1920-%E2%80%93-27-1-320x180.png)
拡張子webp(ウェッピー)を変換する際の注意点
- 互換性を確認確認しておく
- 画質が元々良いものを用意する
- 元画像のバックアップをとっておく
- ファイルサイズの確認をする
互換性を確認確認しておく
webp形式は、すべてのwebブラウザやアプリケーションで完全にサポートされているわけではありません。
変換後の画像が正しく表示されるかどうかを確認するために、ターゲットとなるプラットフォームやデバイスでのwebpの互換性を確認しましょう。
webサイトやアプリの対象ユーザーに合わせて、互換性の問題を考慮することが重要です。
対応ブラウザについてはこちらで確認できます。
画質が元々良いものを用意する
webp形式は、高圧縮率と高品質な画像を提供する一方、一部の場合で画質の低下が生じることがあります。
変換前の画像の品質を確認し、変換後のwebp画像と比較して問題がないかどうかを注意深く検討しましょう。
必要に応じて、画像の最適化や調整を行うことが重要です。
元画像のバックアップをとっておく
変換作業の前に、変換元のjpgやpng形式の画像のバックアップを作成しておきましょう。
もし変換後に予期せぬ問題が発生した場合でも、元の画像データを保管しておくことで安心です。
バックアップを行うことは、変換作業を安全に行うための重要なステップです。
ファイルサイズの確認をする
webp形式は通常、jpegやpngよりもファイルサイズを小さくできる特徴がありますが、webp画像が変換元の画像よりサイズが上回ることがあります。
変換前の画像と変換後のwebp画像のファイルサイズを比較し、適切な圧縮率を選択しましょう。
互換性や画質、ファイルサイズのバランスを考慮した上で、変換を作業を行っていきましょう。
拡張子webp(ウェッピー)を変換する方法
拡張子webp(ウェッピー)を変換する方法には複数の方法があります。
以下が代表的な例です。
- Squooshを使って変換
- サルワカ道具箱を使って変換
- Photoshopで変換
- コマンドラインで変換
![すーさん すーさん](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_72,h_72/http://susanweblog.com/wp-content/uploads/2023/06/FFAB46C1-3DF8-417A-88FA-2F731079CAC2.jpg)
それぞれの変換方法について詳しく解説していきます。
拡張子webp(ウェッピー)をSquooshで変換
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_666/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-25-at-11.51.34-am-1024x666.png)
ステップ1: Squooshにアクセス
Squooshのウェブサイトにアクセスします(https://squoosh.app)。
ステップ2: ファイルを選択かドラッグ&ドロップ
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_391/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-25-at-12.01.23-pm-1024x391.png)
Squooshのウェブサイトにアクセスしたら、ウェブページの中央にある「Drop OR Paste」ボタンをクリックするかドラッグ&ドロップで画像を選びます(ドラッグ&ドロップの場合はステップ3を飛ばしてください)。
ステップ3: 画像を選択
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_650/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-25-at-12.03.00-pm-1024x650.png)
ダイアログボックスが表示されますので、webp画像に変更したいファイル(jpeg、 png、 gifなど)を選択します。複数のファイルを変換する場合は、Shiftキーを押しながら複数のファイルを選択することもできます。
ステップ4: 画像の読み込み
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_664/https://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-25-at-12.20.35-pm-1024x664.png)
選択したファイルがSquooshに読み込まれると、変換オプションが表示されます。
ここで、変換後の画像の品質やファイルサイズの設定を調整します。
ステップ5: オプションでWebPを選択
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_347,h_1024/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-25-at-12.18.42-pm-347x1024.png)
変換オプションでは必ずWebPを選択してください。
ステップ6: 画像のプレビュー
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_664/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-25-at-12.13.06-pm-1024x664.png)
その他調整が完了したら、画像のプレビューが表示されます。変換後の画像の品質やファイルサイズを確認しながら、適切な設定を選択します。
ステップ7: ダウンロード
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_664/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-25-at-12.10.22-pm-1024x664.png)
設定が完了したら、ウェブページの右下にある「Download」ボタンをクリックします。
ステップ8: 変換完了
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_120/https://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-25-at-12.15.20-pm-1024x120.png)
変換されたwebp画像がダウンロードされます。変換が完了しました。
URL: https://squoosh.app
拡張子webp(ウェッピー)をサルワカ道具箱で変換
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_536/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-25-at-12.31.04-pm-1024x536.png)
ステップ1: サルワカ道具箱にアクセス
サルワカ道具箱のウェブサイトにアクセスします。
ステップ2: ファイルを選択かドラッグ&ドロップ
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_536/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-25-at-12.31.04-pm-2-1024x536.png)
ウェブページの中央にある「ファイルを選択」ボタンをクリック、もしくはドラッグ&ドロップで変換したいファイルを選びます。
複数選択も可能です。
ステップ3: 「WEBPをダウンロード」をクリック
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_534/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-25-at-12.38.50-pm-1024x534.png)
画像が読み込まれると、画像の下に「WEBPをダウンロード」ボタンが表示されるので、こちらをクリック。
ファイルを追加したい場合は「+ファイルを追加」ボタンをクリックするか、ドラッグ&ドロップでファイルを追加します。
ステップ4: ダウンロード完了
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_534/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-25-at-12.39.21-pm-1024x534.png)
すると、webp形式の画像がダウンロードされます。
ステップ5: まとめてダウンロード
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_491/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-25-at-12.42.41-pm-1024x491.png)
なお、複数画像をまとめてダウンロードしたい場合は②の「全てダウンロード」ボタンをクリックします。
すると、zip形式で全ての画像がダウンロードされます。
拡張子webp(ウェッピー)をPhotoshopで変換
以前はWebPShopというプラグインをインストールしなければなりませんでしたが、Photoshop(23.2)以上であればデフォルトでwebpに変換することができます。
ステップ1: Photoshopを開き画像を取り込む
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_573/https://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-30-at-9.26.27-am-1024x573.png)
Adobe Photoshopを開き、webpに変換したい画像を取り込みます
ステップ2: 「コピーを保存」を選択
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_518,h_1024/https://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-30-at-9.26.41-am-518x1024.png)
メニューバーから「ファイル」を選択し、「コピーを保存」を選択します。
ステップ3: 「WebP」を選択
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_790/https://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-30-at-9.29.13-am-2-1024x790.png)
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1012,h_1024/https://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-30-at-9.29.35-am-1012x1024.png)
フォーマットから「WebP」を選択し、右下の「保存」ボタンをクリックします。
ステップ4: オプションの設定
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_748,h_576/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-30-at-9.33.53-am.png)
すると、オプションが表示されますので、お好みに合わせて設定し、「OK」ボタンを押す。※設定内容がよく分からない場合はそのままで問題ありません。
ステップ5: 画像の保存完了
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_264,h_222/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-30-at-9.37.05-am.png)
画像が指定した保存場所に保存されます。
拡張子webp(ウェッピー)をコマンドラインで変換
以下、コマンドライン、もしくはターミナルでwebp(ウェッピー)に変更する方法です。
ステップ1: コマンド・ターミナルを開く
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_822/https://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-25-at-1.21.30-pm-1024x822.png)
コマンドプロンプト、もしくはターミナルを開きます。
ステップ2: ディレクトリの移動
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_659/https://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-25-at-1.19.15-pm-2-1-1024x659.png)
変換したいwebpファイルが存在するディレクトリに移動します。
ステップ3: コマンドの入力
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_984,h_215/https://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-25-at-1.24.47-pm.png)
ターミナルに以下のコマンドを入力します:
1cwebp [変換元のwebpファイル名] -o [変換後のファイル名].[変換後の拡張子]
例えば、”image.jpg” を “image.webp”に変換する場合は、以下のようになります。
1cwebp -q 80 image.jpg -o image.webp
入力し終わったらコマンドを実行します。
ステップ4: 画像が生成
![拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説 design-tips, webdesign - 拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_368,h_578/https://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-25-at-1.16.44-pm.png)
コマンドが正常に実行されると、指定したファイル名で変換後の画像が生成されます。
まとめ
本記事では、既存のjpegやpng画像をWebP形式に変換する方法について解説しました。
Squooshやサルワカ道具箱、Photoshop、コマンドラインなど、さまざまな手段がありますので、用途やニーズに合わせて適切な方法を選んでください。
画像のファイルサイズを削減し、ウェブサイトの読み込み速度を向上させるために、ぜひこれらの手法を活用してみてください。