ホームページ >ウェブフロントエンド >PS チュートリアル >Photoshop(ファイルサイズ、解像度を最適化)を使用してWeb用の画像を準備するにはどうすればよいですか?
Photoshopを使用してWeb用の画像の準備には、品質を犠牲にすることなく画像が迅速にロードされるようにするためのいくつかのステップが含まれます。ファイルのサイズと解像度を最適化するのに役立つ詳細なガイドを次に示します。
File
> Open
を選択して画像ファイルを選択します。Image
> Image Size
に移動します。ダイアログボックスで、 Resample
オプションがチェックされていないことを確認し、 Resolution
を72ピクセル/インチに変更します。このステップは、画像の物理サイズを変更しませんが、画面表示のために調整します。Image Size
ダイアログボックスで、 Resample
オプションを確認します。透明度を維持するために、ダウンサイジング画像のためにはBicubic Sharper
を選択します。 Width
とHeight
調整して、Webデザインのニーズに合わせて、通常、品質とファイルサイズの間の最適なバランスをとるために、長い側を約1000〜1500ピクセルに保ちます。File
> Export
> Export As...
に移動します。ダイアログExport As
で、適切なファイル形式を選択します(詳細については後で詳しく説明します)。 Quality
スライダーを使用して、圧縮レベルを調整します。ダイアログの下部にあるファイルのサイズと寸法をプレビューして、適切なバランスを見つけることができます。File
> Export
> Save Save for Web (Legacy)
Save for Web (Legacy)
オプションを使用できます。このツールを使用すると、さまざまなファイル形式と品質設定を並べて比較できます。品質とファイルサイズの間の望ましいバランスを達成するまで、設定を調整します。Export As
またはSave for Web (Legacy)
ダイアログでは、著作権情報やカメラ設定などのメタデータを削除して、ファイルサイズをさらに削減することもできます。ギアアイコンをクリックして、不要なメタデータをチェックします。これらの手順に従うことにより、画像がWeb用に最適化され、ファイルサイズと解像度のバランスをとることができます。
PhotoshopのWeb画像の理想的な解像度は72 dpi(ドットあたりのドット)です。この標準は、コンピューターモニターとモバイルデバイスの典型的な画面解像度に基づいており、約72〜96 DPIで画像を表示します。 Photoshopで画像を72 DPIに設定することで、ファイルサイズを不必要に増やすことなく、Web表示用に最適化されます。
Photoshopで画像を72 DPIに設定するには、次の手順に従ってください。
Image
> Image Size
に移動します。Resample
がチェックされていないことを確認してください。Resolution
を72ピクセル/インチに設定します。OK
をクリックします。この調整は、画像の物理サイズを変更することはありませんが、Webディスプレイ用に調整します。
品質を失うことなくPhotoshopの画像のファイルサイズを縮小するには、いくつかのテクニックが必要です。
Image Size
ダイアログ( Image
> Image Size
)を使用し、 Resample
を確認します。ダウンサイジングのためには、 Bicubic Sharper
を選択します。 Width
とHeight
をより小さな寸法に減らし、ファイルサイズを本質的に削減します。Export As
使用するか、 Save for Web (Legacy)
。これらを使用すると、ファイルサイズに直接影響するQuality
設定を調整できます。品質を下げるとファイルのサイズが小さくなる可能性がありますが、画像がまだ良く見えるバランスを見つける必要があります。Export As
の形式を調整するか、 Save for Web (Legacy)
。Export As
またはSave for Web (Legacy)
には、ギアアイコンをクリックして、不要なメタデータをチェックしてファイルサイズを縮小します。これらのメソッドを思慮深く適用することにより、画質を大幅に損なうことなく、より小さなファイルサイズを達成できます。
PhotoshopでWeb画像に適切なファイル形式を選択することは、使用している画像のタイプと、ファイルサイズと品質の間に必要な残高によって異なります。一般的な形式の内訳は次のとおりです。
JPEG(共同写真の専門家グループ):
PNG(ポータブルネットワークグラフィックス):
gif(グラフィックインターチェンジ形式):
Webp(Web画像形式):
Photoshopで適切な形式を選択するには:
File
> Export
> Export As...
に移動するか、 Save for Web (Legacy)
。各形式の強度を理解することにより、Web画像に最適な形式を選択して、最適なパフォーマンスと品質を確保できます。
以上がPhotoshop(ファイルサイズ、解像度を最適化)を使用してWeb用の画像を準備するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。