Photoshop の書き出し機能を活用したウェブ用画像の最適化とサイズ調整

ウェブ用の画像を作成する際、Photoshopの書き出し機能が秀逸のためまだ使ったことがないという場合はおすすめします。

この機能を使用することで、サイズの大きい写真をウェブ用のバナーとして適正なサイズに変更し、さらに画質を最適化させることが可能です。これにより、見た目を保ちつつも、ファイルサイズを軽くできます。

ファイルサイズが重い画像を何枚もアップロードしていると、画面読み込みに時間がかかるだけでなく、サーバー容量を圧迫し、SEO にも影響があります。

今回はこの書き出し方法をご紹介します。

執筆時の Photoshop バージョン : 2023, Ver 24.0.0

Photoshop で画像のサイズや解像度を調整する

まず、画像のサイズを調整します。Photoshopを開き、メニューバーの「イメージ」をクリックして「画像解像度」を選択することで画像のサイズや解像度を変更することができます。

掲載箇所の横幅にもよりますが、ウェブ用の画像として一般的な利用用途であれば、横幅は1000〜1200ピクセル以下が一つの目安となります。
例えば、横幅が5800pxの画像を1200pxに変換した場合、65MBから2.7MBまで大幅にファイルサイズを下げることができます。

解像度の目安は72dpi

サイズを変更する際に、「解像度」も一緒に見ておきましょう。ウェブ用の画像の場合、厳密には異なりますが、解像度は72dpiを目安にするといいでしょう。300や350dpi程度の大きいdpiはファイルサイズが大きくなってしまうため、そのような場合は72dpiに変更することをお勧めします。

画像の書き出しと画質の最適化

サイズや解像度が調整できたら、画像の書き出しと画質を最適化します。これには「ファイル」メニューから「書き出し」を選び、「書き出し形式」を選択します。（またはCmd + Shift + Option + W）

メニューから「ファイル」→「書き出し」→「書き出し形式」（バージョンにより名称は異なるかもしれません）

この書き出し機能により、画像のフォーマット（JPEG、GIF、PNGなど）と画像の品質を調整することができます。ウェブ用の画像用途としては、JPEGまたはPNGがよく使われます。JPEGは写真やグラデーションが多い画像に適しており、PNGは透過性が必要な場合や、固定色が多い画像に適しています。

「画質」スライダーを調整することで、画質とファイルサイズのバランスを取ることができます。好みや画像にもよりますが、画質は「3～5」の設定値が一つの目安です。これにより、ファイルサイズが大きすぎず、見た目の品質も維持することができます。

試しに画質を「4」にしてみたところ、181KBまで落とすことができました。元画像は65MBだったため、約360分の1まで落とした形となります。一方、見た目は目で見てもほぼわからない程度の違いしかありません。

実際にやってみて、画質が落ちすぎていないかよく見ながらどこまで落とせるか確認しましょう。

書き出し前には、実際のサイズでプレビューをチェックして、画質とファイルサイズが適切であることを確認します。これにより、必要に応じて微調整を行い、最適な結果を得ることができます。

ちなみに、場合によっては画質を「2」程度まで落とすこともよくあります。ただし、グラデーション箇所などが粗くなりガタガタした見た目になってしまうこともあるため、そこはプレビューで良く確認しながらやってみてください。

画像書き出し時にサイズを調整することも可能

ちなみに、書き出し画面でサイズを調整することも可能です。解像度の設定を行う必要がない場合は、書き出し画面でサイズ調整をしてしまっても問題有りません。

書き出し形式は「Web用に保存（従来）」と新しい書き出し形式どっちがいい？

以前からある「Web 用に保存（従来）」という書き出し方法があります。

これは現在は販売中止された Adobe ImageReady の機能を引き継いで移植された機能です。画像を並べて比較できるため使いやすいですが、コードが古くなってきているという面がありました。そこで、CC 2015 になって新しく導入されたのが「書き出し形式」です。SVG も保存できるメリットがあります。

他にもファイルサイズが小さくできるという情報もあるようですが、そこまで変わらないかむしろ大きい場合もあるようですね。

参考: Photoshop CC2019「Web用に保存」「書き出し形式」の違いと比較

どちらが良いか？は好みでいいと思います。新しい形式の方がおそらく将来的にも改良されていくのではないかと期待して、私は新しい書き出し形式を使っています。

Photoshop の書き出し機能により最適な画像を作成

Photoshopの書き出し機能を使って画像のサイズ調整と画質の最適化を適切に行うことで、見た目に影響のないファイルサイズとしてウェブ用の画像を効率的に最適化し、書き出すことが可能ですというご紹介でした。

最後に必ず実際のサイズでプレビューを見て、画像が適切に最適化されていることを確認しましょう。