• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / TIPS / Photoshop の書き出し機能を活用したウェブ用画像の最適化とサイズ調整

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

池田祐太郎 | 2023年5月16日 公開 コメントを書く

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

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

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

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

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

目次

  • 1 Photoshop で画像のサイズや解像度を調整する
    • 1.1 解像度の目安は72dpi
  • 2 画像の書き出しと画質の最適化
  • 3 画像書き出し時にサイズを調整することも可能
  • 4 書き出し形式は「Web用に保存(従来)」と新しい書き出し形式どっちがいい?
  • 5 Photoshop の書き出し機能により最適な画像を作成

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

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

メニューから「イメージ」→「画像解像度」

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

1200px に変更すると、「画像サイズ」が2.75Mに変更された

解像度の目安は72dpi

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

解像度は変更することでサイズも変更されるため注意

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

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

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

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

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

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

書き出し後の画像サイズは181.4KBとなることがわかる

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

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

プレビュー画面を「100%」に変更することで、実際の見た目と同じ大きさで確認できる

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

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

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

書き出し画面において画像サイズの変更も可能

書き出し形式は「Web用に保存(従来)」と新しい書き出し形式どっちがいい?

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

昔からPhotoshop を使っている人は馴染みのある「Web用に保存」

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

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

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

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

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

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

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

メールコンサルティング
WordPress保守管理サービス

Filed Under: TIPS 関連タグ:Photoshop, デザイン

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

この記事と関連する記事

一つのバナーサイズで複数デバイスをカバーし、サイト運営を効率化させる
2023年5月11日
タグ: デザイン, レスポンシブWebデザイン, 効率化
カテゴリー: TIPS
Photoshopの動きが遅くなってきたときにチェックする箇所
2013年11月18日
タグ: Photoshop
カテゴリー: TIPS
意味のないデザインなどない
2013年7月11日
タグ: デザイン, 考え
カテゴリー: 仕事のこと

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  4. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  5. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点
  6. WordPressのパフォーマンスチームがパフォーマンス改善プラグインをリリース

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPressプラグインのAI Engineを使ってコンテンツを自動生成してみる
  • ChatGPT の Webpilot プラグインを使って YouTube動画の内容を瞬時に把握
  • Photoshop の書き出し機能を活用したウェブ用画像の最適化とサイズ調整
  • 一つのバナーサイズで複数デバイスをカバーし、サイト運営を効率化させる
  • 注意。wp-config.php ファイルのバックアップはサーバーに置いてはいけない

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

ai Android CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール デザイン ブログ プラグイン マーケティング リニューアル レスポンシブWebデザイン 保守管理 効率化 多言語 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.