UI/UXデザイナーとWebデザイナーの違い。必要なスキル、給料について
susan すーさんのweblog
拡張子webp(ウェッピー)をjpegやpngから変換する方法。画像付きで解説
susan
記事内に商品プロモーションを含む場合があります
webサイトのパフォーマンス向上と高速な画像表示を実現するために、webp（ウェッピー）という画像フォーマットが注目されています。
本記事では、既存のjpgやpng形式の画像をwebp形式に変換する方法について具体的な手順で解説していきます。
この手順を使って、効果的にファイルサイズを削減し、webサイトの読み込み速度を向上させましょう。
Webデザインが学べるおすすめのスクールに関しては【初心者用】Webデザインが学べるスクール！おすすめの10校を徹底比較で詳しく紹介していますので、興味ある方はぜひチェックしてみてください。
あわせて読みたい
【初心者用】Webデザインが学べるスクール！おすすめの10校を徹底比較
おすすめのフリーランスデザイナーエージェントに関してはフリーランスのデザイナーが登録しておくべきエージェント8選！おすすめはどこ？で詳しく紹介していますので、興味ある方はぜひチェックしてみてください。
あわせて読みたい
フリーランスのデザイナーが登録しておくべきエージェント8選！おすすめはどこ？
Contents
拡張子webp(ウェッピー)とは
はじめに、webp形式について簡単に説明します。
webpはGoogleが開発した、高圧縮率と高品質な画像を提供するフォーマットです。
webp形式の画像は通常、従来のjpgやpng形式に比べてファイルサイズが小さく、ウェブサイトの読み込み速度を向上させることができます。
拡張子webp(ウェッピー)について詳しく知りたい方は拡張子webp(ウェッピー)とは？メリット・デメリットや変換方法を解説で詳しく解説していますので、ぜひチェックしてみてください。
あわせて読みたい
拡張子webp（ウェッピー）とは？メリット・デメリットや他の拡張子との違いを比較
拡張子webp(ウェッピー)を変換する際の注意点
主な注意点
- 互換性を確認確認しておく
- 画質が元々良いものを用意する
- 元画像のバックアップをとっておく
- ファイルサイズの確認をする
互換性を確認確認しておく
webp形式は、すべてのwebブラウザやアプリケーションで完全にサポートされているわけではありません。
変換後の画像が正しく表示されるかどうかを確認するために、ターゲットとなるプラットフォームやデバイスでのwebpの互換性を確認しましょう。
webサイトやアプリの対象ユーザーに合わせて、互換性の問題を考慮することが重要です。
対応ブラウザについてはこちらで確認できます。
画質が元々良いものを用意する
webp形式は、高圧縮率と高品質な画像を提供する一方、一部の場合で画質の低下が生じることがあります。
変換前の画像の品質を確認し、変換後のwebp画像と比較して問題がないかどうかを注意深く検討しましょう。
必要に応じて、画像の最適化や調整を行うことが重要です。
元画像のバックアップをとっておく
変換作業の前に、変換元のjpgやpng形式の画像のバックアップを作成しておきましょう。
もし変換後に予期せぬ問題が発生した場合でも、元の画像データを保管しておくことで安心です。
バックアップを行うことは、変換作業を安全に行うための重要なステップです。
ファイルサイズの確認をする
webp形式は通常、jpegやpngよりもファイルサイズを小さくできる特徴がありますが、webp画像が変換元の画像よりサイズが上回ることがあります。
変換前の画像と変換後のwebp画像のファイルサイズを比較し、適切な圧縮率を選択しましょう。
互換性や画質、ファイルサイズのバランスを考慮した上で、変換を作業を行っていきましょう。
拡張子webp(ウェッピー)を変換する方法
拡張子webp(ウェッピー)を変換する方法には複数の方法があります。
以下が代表的な例です。
- Squooshを使って変換
- サルワカ道具箱を使って変換
- Photoshopで変換
- コマンドラインで変換
それぞれの変換方法について詳しく解説していきます。
拡張子webp(ウェッピー)をSquooshで変換
ステップ1: Squooshにアクセス
Squooshのウェブサイトにアクセスします（https://squoosh.app)。
ステップ2: ファイルを選択かドラッグ&ドロップ
Squooshのウェブサイトにアクセスしたら、ウェブページの中央にある「Drop OR Paste」ボタンをクリックするかドラッグ&ドロップで画像を選びます（ドラッグ&ドロップの場合はステップ3を飛ばしてください）。
ステップ3: 画像を選択
ダイアログボックスが表示されますので、webp画像に変更したいファイル(jpeg、 png、 gifなど)を選択します。複数のファイルを変換する場合は、Shiftキーを押しながら複数のファイルを選択することもできます。
ステップ4: 画像の読み込み
選択したファイルがSquooshに読み込まれると、変換オプションが表示されます。
ここで、変換後の画像の品質やファイルサイズの設定を調整します。
ステップ5: オプションでWebPを選択
変換オプションでは必ずWebPを選択してください。
ステップ6: 画像のプレビュー
その他調整が完了したら、画像のプレビューが表示されます。変換後の画像の品質やファイルサイズを確認しながら、適切な設定を選択します。
ステップ7: ダウンロード
設定が完了したら、ウェブページの右下にある「Download」ボタンをクリックします。
ステップ8: 変換完了
変換されたwebp画像がダウンロードされます。変換が完了しました。
URL: https://squoosh.app
拡張子webp(ウェッピー)をサルワカ道具箱で変換
ステップ1: サルワカ道具箱にアクセス
サルワカ道具箱のウェブサイトにアクセスします。
ステップ2: ファイルを選択かドラッグ&ドロップ
ウェブページの中央にある「ファイルを選択」ボタンをクリック、もしくはドラッグ&ドロップで変換したいファイルを選びます。
複数選択も可能です。
ステップ3: 「WEBPをダウンロード」をクリック
画像が読み込まれると、画像の下に「WEBPをダウンロード」ボタンが表示されるので、こちらをクリック。
ファイルを追加したい場合は「+ファイルを追加」ボタンをクリックするか、ドラッグ&ドロップでファイルを追加します。
ステップ4: ダウンロード完了
すると、webp形式の画像がダウンロードされます。
ステップ5: まとめてダウンロード
なお、複数画像をまとめてダウンロードしたい場合は②の「全てダウンロード」ボタンをクリックします。
すると、zip形式で全ての画像がダウンロードされます。
拡張子webp(ウェッピー)をPhotoshopで変換
以前はWebPShopというプラグインをインストールしなければなりませんでしたが、Photoshop（23.2）以上であればデフォルトでwebpに変換することができます。
ステップ1: Photoshopを開き画像を取り込む
Adobe Photoshopを開き、webpに変換したい画像を取り込みます
ステップ2: 「コピーを保存」を選択
メニューバーから「ファイル」を選択し、「コピーを保存」を選択します。
ステップ3: 「WebP」を選択
フォーマットから「WebP」を選択し、右下の「保存」ボタンをクリックします。
ステップ4: オプションの設定
すると、オプションが表示されますので、お好みに合わせて設定し、「OK」ボタンを押す。※設定内容がよく分からない場合はそのままで問題ありません。
ステップ5: 画像の保存完了
画像が指定した保存場所に保存されます。
拡張子webp(ウェッピー)をコマンドラインで変換
以下、コマンドライン、もしくはターミナルでwebp(ウェッピー)に変更する方法です。
ステップ1: コマンド・ターミナルを開く
コマンドプロンプト、もしくはターミナルを開きます。
ステップ2: ディレクトリの移動
変換したいwebpファイルが存在するディレクトリに移動します。
ステップ3: コマンドの入力
ターミナルに以下のコマンドを入力します:
1cwebp [変換元のwebpファイル名] -o [変換後のファイル名].[変換後の拡張子]例えば、”image.jpg” を “image.webp”に変換する場合は、以下のようになります。
1cwebp -q 80 image.jpg -o image.webp入力し終わったらコマンドを実行します。
ステップ4: 画像が生成
コマンドが正常に実行されると、指定したファイル名で変換後の画像が生成されます。
まとめ
本記事では、既存のjpegやpng画像をWebP形式に変換する方法について解説しました。
Squooshやサルワカ道具箱、Photoshop、コマンドラインなど、さまざまな手段がありますので、用途やニーズに合わせて適切な方法を選んでください。
画像のファイルサイズを削減し、ウェブサイトの読み込み速度を向上させるために、ぜひこれらの手法を活用してみてください。
Webデザインの勉強をしたい方はこちらの記事がおすすめ！
Webデザイナー用のエージェントをお探しの方はこちらの記事がおすすめ！
副業案件をお探しの方はこちらの記事がおすすめ！
ABOUT ME
30代web業界未経験
→オーストラリアにIT留学
→現地インターンを1年半経験
→フリーランスwebデザイナー・エンジニアとして活動
→月収80万円達成！
