Webサイトの画像を軽量化！PhotoshopCC 2022 でWebp(ウェッピー)書き出しをやってみたら色が変。iccプロファイルが消えて色が変わってしまったので、jpegにするかsquooshを使うことにした

• 2022-07-26
• ゆらまき
• no comments

みなさま、こんにちは😊💖

yuramaki.com　Webサイトの読み込みをスムーズにしたいので、画像を全体に軽くしています。

3日前、Webp（ウェッピー）という新しい画像形式が軽いと知りました。
しかも、今年の2月、PhotoshopCC 2022 でWebp形式書き出しができるようになった！

（フォトショなら、アクションコマンドで、大量の画像も一括で変換できる！！楽！）

ということで、喜んで試してみたら
どう頑張っても色設定のiccプロファイルが現状付けられず色が変になっちゃいました。

そんなわけで、2022.7 現状  Web用画像の形式ベストは

A. Photoshopならプログレッシブjpeg
B. ひと手間かけるならsquashで色を保ったままさらにwebpへ圧縮

という結論が出ました😂
このリズムだと、あと1年くらいしたらPhotoshopもこの問題に対応しそう。それに期待しております。

① Photoshop を 23.2 以降にバージョンアップ

もともと持っていたのは2021だったので、10分くらいで更新できました。

② テスト画像をPhotoshopで開き、書き出しを選ぶ

私の好きな建仁寺の写真にしましょう。
WebpならWeb用に保存から形式が選べると期待したら無いので、「Web用に保存」ではなく「別名で保存」を選びます！

選べるフォーマットの中にwebPが増えています。

ここでカラープロファイルの埋め込みが「Display P3」のみです。。保存を押すと次に、WebPオプションへ進みます。

目的が画像のデータを軽くすること。
データが軽くなることを期待して、画像の荒れもほどほどであろう80前後の画質、くっついてくるメタデータは極力なしにしました。

③ 画像が色褪せた

赤と緑が若干色褪せました。
ここで、初めてgoogle検索をかけて、iccカラープロファイルが無いことに気づきます。

どうもphotoshopではなくgoogleの出しているプログラムで変換するときは、iccプロファイルの有無も選んで圧縮できるようです。

Photoshopで書き出すなら、プログレッシブjpegが今の所一番色と軽さの兼ね合いがいいです。

参考記事
「【保存版】知らないと画質が落ちるWebP変換おすすめパラメーター設定例 JPEG/PNG編」
→ https://blog.ideamans.com/2020/08/webp-params-2020.html

④ もうひと手間!squooshでさらに画像を軽くする

Googleの出している、squooshという画像圧縮Webサービスがあります。
これを使うと、特に設定をいじらなくても、カラープロファイル（iccプロファイル）を保持して書き出してくれました。

↑実際にsquooshで書き出した画像。サイズファイルは、同サイズのjpegの1/4（230KB→55KB）になります。軽いです。

元にしたjpegと、squooshで書き出したwebpの比較。
遜色なさすぎてびっくりしました。

この記事のまとめ

1. PhotoshopのWebp書き出しは色が変わってしまうので、もう一声！
2. 色が変わってしまう原因は、カラープロファイルが落とされるため
3. Photoshopで大量の画像を一度にWeb用にリサイズするなら、書き出しはプログレッシブjpeg形式が向いてる
4. もっと軽くするならウェブ画像圧縮ツール「squoosh」を使おう（ただし圧縮は１枚ずつ）

このログが、お役に立てましたら幸いです。

最後までお読みいただき、どうもありがとうございました❣️

では、皆様ごきげんよう🥰
素敵な1日をお過ごしください🌈🍀✨✨

文・写真・動画/由良万紀子

Hands design studio
– 全ての人の手にデザインの力を –
由良 万紀子 ゆらまきこ
コンセプトから伴走するデザイナー/ターゲットの心を掴むライティング/コーチング
　デザインのご注文喜んで承ります😊💗
　👉📩こちらからメッセージをどうぞ！

✨news✨
今３つのオンライン講座を準備中です。お楽しみに！
①あなたが一番輝く仕事と人間関係を築くコーチング
②本職を極めるためのデザイナーじゃない人向けデザイン講座
③松葉たばこオンライン講座

　フォローは遠慮なくどうぞ！
　→Twitter　 →Facebook　 →Youtube

ShopVIDAでアパレルグッズ販売中✨
英語サイトでも簡単に注文できる手順案内は、下のブログから♪
👉https://yuramaki.com/design00/how_to_purchase_yuras_apparel_goods_shop_vida/