Photoshop(フォトショップ)を使ってサイト用の画像制作をした後、圧縮はされているでしょうか?
画像をキレイに圧縮し、最適化する事はアクセシビリティの観点から非常に重要です。
サイト制作でよく使う画像形式には様々な形式が存在します。
代表的な形式は「JPG」「PNG」「GIF」の3種類ですね。
そんな中、次世代画像フォーマットの「WebP(ウェッピー)」が浸透してきました。
代表的な3種の形式と比較して圧縮率、汎用性が高い「まさに次世代画像フォーマット」です。
当記事ではPhotoshop(フォトショップ)でWebP(ウェッピー)形式を編集・保存できるようになるプラグインの導入方法と使い方について詳しく解説します。
この記事の目次
WebP(ウェッピー)とはGoogleが開発した画像フォーマットです。
- 非可逆圧縮(しかしアルファチャンネルが使える超有能形式)
- 同等の画質でPNGなら約26%、JPGなら約25~34%容量が軽くなる
- 透過が可能
- アニメーションができる
- 主要ブラウザで利用可能
WebPのメリット
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/07/ps-webp_01.jpg)
上記はコチラで解説しているバナー制作のサンプルです。
- 左:JPG形式、60.66Kb
- 右:WebP形式、27.82Kb
容量が半分以下で見た目に変わり無し、まさに次世代ですね。
せっかくだからPNG形式でも比較してみましょう。
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/07/ps-webp_02.jpg)
コチラで解説している黄金文字のみを背景透過で出力した画像です。
- 左:PNG形式、156.18Kb
- 右:WebP形式、34.27Kb
優秀すぎますね、WebPを使わない手はありません。
WebPのデメリット
WebPはIEには非対応です。
しかしIEはサポート終了が告知されました。よってデメリットはほぼ皆無です。
長らくWeb開発者を苦しめてきたIEが完全終了宣言、喜ばしい事です。
これから益々WebP形式が普及していく事は間違いないですよ。
Photoshop(フォトショップ)でWebP(ウェッピー)を扱えるようになるプラグインの導入方法です。
難しくないので下記手順でサクッと入れておきましょう!
未導入の方はフォトプラン公式サイトから入手可能。(月額は最安の1,180円、7日間の無料体験が可能)
なお、AdobeCCのプランはコチラの記事で徹底解説しています。
PhotoshopでWebP形式に書き出す方法について解説します。
プラグイン無しではWebP形式は読み込み不可です。
Photoshop(フォトショップ)を導入されていない方でもWebPへの変換方法はいくつか存在します。
サクッとWebPに変換してサイトを軽量化しちゃいましょう!
サイトで変換
Photoshopが無い方にオススメ。
ワードプレスの画像を変換
ワードプレスで構築したサイトを手軽に次世代画像フォーマットのWebPに変換したい方にオススメです。
「WebP Converter for Media」の主な特徴です。
- WebPに対応しているブラウザではWebP形式で表示
- 非対応ブラウザ(IE等)では元の画像形式(JPEG等)で表示
- 画像アップロード時に自動でWebPに変換
- 既存の画像も一括変換可能
- テーマ・プラグイン内の画像も変換可能
- プラグインを無効化すると元形式の画像を表示
と、痒い所に手が届く素敵仕様となっています。
気になる方はワードプレスの「プラグインを追加」画面で「WebP Converter for Media」と検索!
Photoshopで使える高品質なWEBデザインテンプレートです。
全て商用利用可能!
制作時間の短縮と作品のクオリティアップを重視したい方に超オススメのテンプレートです。
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_10.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_08.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_32.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_17.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_30.jpg)
全て商用利用可能!
Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。
下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。
制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします!
厳選!ポートフォリオ用テンプレート40選
デジタル媒体向けポートフォリオテンプレ素材35選
様々なモックアップテンプレート57選
下記記事で良質な素材を紹介しております。併せてチェックしてください!
以上、Photoshop(フォトショップ)内でWebP(ウェッピー)形式で編集・保存する方法でした。
JPGからWebPに変換するだけで容量が約半分に!
しかも見た目的に画像の劣化は感じられない優秀過ぎる次世代画像フォーマットのWebP。
サイト読み込み時間を早めるためにはWebPへの変換は必須と言えます。
WebPはさらに利用シーンが増える画像形式なので、Web制作をされているPhotoshopユーザーはプラグインの導入を強くオススメしますよ。
ではまた!
フォトショ基本操作
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/01/ps-zero_main_ico_01.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/01/ps-zero_main_ico_02.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/01/ps-zero_main_ico_03.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/01/ps-zero_main_ico_66.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/01/ps-zero_main_ico_06.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/01/ps-zero_main_ico_22.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/10/ps-zero_main_ico_27.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/01/ps-zero_main_ico_09.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/01/ps-zero_main_ico_11.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/01/ps-zero_main_ico_12.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/01/ps-zero_main_ico_07.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/04/ps-zero_main_ico_17.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/04/ps-zero_main_ico_17.png)
![]( https://sdesignlabo.com/blog/wp-content/uploads/2021/06/ai-zero_main_ico_25.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/ps-zero_main_ico_24.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/01/ps-zero_main_ico_13.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/01/ps-zero_main_ico_13.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/ps-zero_main_ico_23.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/02/ps-zero_main_ico_14.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/04/ps-zero_main_ico_15.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/04/ps-zero_main_ico_16.png)
バナーやUIをデザイン
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/04/ps-zero_main_ico_ouyou1_01.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/04/ps-zero_main_ico_ouyou1_02.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/04/ps-zero_main_ico_ouyou1_03.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/04/ps-zero_main_ico_ouyou1_04.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/05/ps-zero_main_ico_ouyou1_16_2.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/04/ps-zero_main_ico_ouyou1_07.jpg)
様々な質感を再現
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/04/ps-zero_main_ico_ouyou1_06.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/ps-zero_main_ico_ouyou1_19.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/08/ps-zero_main_ico_ouyou1_09.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/10/ps-zero_main_ico_ouyou1_31.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/10/ps-zero_main_ico_ouyou1_33.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/10/ps-zero_main_ico_ouyou1_34.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/10/ps-zero_main_ico_ouyou1_35.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/04/ps-zero_main_ico_ouyou1_50.jpg)
写真の雰囲気を激変させる
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/04/ps-zero_main_ico_ouyou1_08.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/ps-zero_main_ico_ouyou1_17.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/11/ps-zero_main_ico_ouyou1_12.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/ps-zero_main_ico_ouyou1_18.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/07/ps-zero_main_ico_ouyou1_23.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/01/ps-zero_main_ico_ouyou1_46.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/09/ps-zero_main_ico_ouyou1_27.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/01/ps-zero_main_ico_ouyou1_45.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/09/ps-zero_main_ico_ouyou1_28.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/04/ps-zero_main_ico_ouyou1_64.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/09/ps-zero_main_ico_ouyou1_29.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/10/ps-zero_main_ico_ouyou1_30.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/01/ps-zero_main_ico_ouyou1_47.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/10/ps-zero_main_ico_ouyou1_32.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/12/ps-zero_main_ico_ouyou1_38.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/12/ps-zero_main_ico_ouyou1_37.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/12/ps-zero_main_ico_ouyou1_42.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/12/ps-zero_main_ico_ouyou1_41.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/04/ps-zero_main_ico_ouyou1_53.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/04/ps-zero_main_ico_ouyou1_52.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/05/ps-zero_main_ico_ouyou1_73.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/05/ps-zero_main_ico_ouyou1_74.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/05/ps-zero_main_ico_ouyou1_76.jpg)
便利な画像加工テクニック
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/04/ps-zero_main_ico_ouyou1_05.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/08/ps-zero_main_ico_ouyou1_10.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/08/ps-zero_main_ico_ouyou1_11.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/11/ps-zero_main_ico_ouyou1_13.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/11/ps-zero_main_ico_ouyou1_14.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/12/ps-zero_main_ico_ouyou1_15.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/09/ps-zero_main_ico_ouyou1_26.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/12/ps-zero_main_ico_ouyou1_43.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/04/ps-zero_main_ico_ouyou1_54.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/04/ps-zero_main_ico_ouyou1_58.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/04/ps-zero_main_ico_ouyou1_57.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/04/ps-zero_main_ico_ouyou1_56.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/04/ps-zero_main_ico_ouyou1_55.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/04/ps-zero_main_ico_ouyou1_59.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/04/ps-zero_main_ico_ouyou1_60.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/04/ps-zero_main_ico_ouyou1_61.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/04/ps-zero_main_ico_ouyou1_62.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/04/ps-zero_main_ico_ouyou1_63.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/04/ps-zero_main_ico_ouyou1_69.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/05/ps-zero_main_ico_ouyou1_77.jpg)
機能追加・その他の機能
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/01/ps-zero_main_ico_13.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/04/ps-zero_main_ico_15.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/01/ps-zero_main_ico_13.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/12/ps-zero_main_ico_20.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/01/ps-zero_main_ico_22.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/01/ps-zero_main_ico_22.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/ai-zero_main_ico_25.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/07/ai-zero_main_ico_26.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/12/ps-zero_main_ico_39.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/12/ps-zero_main_ico_40.png)
フォトショップのお困りごと
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/11/ps-zero_main_ico_19.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/11/ps-zero_main_ico_18.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/01/ps-zero_main_ico_21.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2020/01/ps-zero_main_ico_10.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/10/ps-zero_main_ico_35.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/01/ps-zero_main_ico_21.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/12/ps-zero_main_ico_53.png)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/03/ps-zero_main_ico_67.png)
画像を激変!エフェクトPSD
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/07/ps-zero_main_ico_ouyou1_24.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/03/ps-zero_main_ico_ouyou1_48.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/03/ps-zero_main_ico_ouyou1_49.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/12/ps-zero_main_ico_ouyou1_36.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/07/ps-zero_main_ico_ouyou1_25.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/07/ps-zero_main_ico_ouyou1_21.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/07/ps-zero_main_ico_ouyou1_22.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/12/ps-zero_main_ico_ouyou1_39.jpg)
その他Photoshop用の素材
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/12/ps-zero_main_ico_ouyou1_40.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/12/ps-zero_main_ico_ouyou1_44.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/ps-zero_main_ico_ouyou1_20.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/04/ps-zero_main_ico_ouyou1_66.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/05/ps-zero_main_ico_ouyou1_75.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/04/ps-zero_main_ico_ouyou1_68.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/04/ps-zero_main_ico_ouyou1_70.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/05/ps-zero_main_ico_ouyou1_71.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/05/ps-zero_main_ico_ouyou1_72.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/04/ps-zero_main_ico_ouyou1_67.jpg)
![](https://sdesignlabo.com/blog/wp-content/uploads/2022/03/ps-zero_main_ico_67.png)