JPEGやその他の画像ファイルのサイズを縮小する方法

ウェブサイトで使用する画像は、最も重要な要素の1つです。 視覚的に魅力的な画像が必要なだけでなく、サイトの読み込み時間が遅くなるほど画像を大きくしたくない場合もあります。 サイトが遅れる主な理由の1つは、サイトに含まれる画像が最適なサイトパフォーマンスのためにサイズ変更されていないためです。

この記事では、ファイルタイプの変更、サイズ変更、Web用に保存機能を使用したファイルの圧縮など、Photoshopで画像サイズを縮小する手動の方法について説明します。 より自動化されたものをお探しの場合は、いくつかのプラグインとWebベースのオプションも検討します。

私たちのYoutubeチャンネルを購読する

ファイルタイプの変更

画像ファイルの「ファイルサイズ」とは、1インチあたりのピクセル数を指します。 一般に、1インチあたりのピクセル数が多いほど、ファイルが保持する情報が多くなるため、ファイルのサイズは大きくなります。

画像の最も一般的な2つのファイルタイプはJPGとPNGです。

• PNG –ポータブルネットワークグラフィックス–このファイルタイプは、主にロゴ、アイコン、イラスト、テキストなどのグラフィックファイルに使用されます。 Photoshopなどの写真編集アプリケーションで編集する場合、これらのファイルを操作または圧縮しても、多くのデータが失われることはありません。 このため、これらは「ロスレス」と呼ばれます。 このため、これらのファイルのサイズは大きくなる傾向があります。
• JPEG – Joint Photographic Experts Group –これは、インターネット上のほとんどの画像に見られる最も一般的なファイルタイプです。 このファイルタイプは、数百万色を管理でき、品質を維持しながら高度に圧縮できます。 これらは、圧縮プロセスによって画像からピクセルが削除されるため、「不可逆」と呼ばれます。

どちらのファイルタイプでも機能します。 どちらを選択するかは、サイト、使用する写真の数と種類によって異なります。

こちらがサンプル写真です。 元の形式はJPGファイルでした。

Photoshopで[ファイル]> [名前を付けて保存]コマンドを使用し、PNG形式を選択して、保存機能を完了しました。

ファイルの種類を変更すると、ファイルのサイズが646MBから1.3KBになりました。 上記のように、PNGファイルは通常大きいため、色とディテールが多いこのタイプの画像の場合は、読み込み時間を短縮するためにJPEGバージョンを使用することをお勧めします。 画像が解像度を失うことなく拡大できる必要があることがわかっている場合は、PNGバージョンを使用してください。

利用可能な他の多くのファイル形式があることに注意してください。 JPEGとPNGが最も人気があるので、それらに焦点を合わせました。

Photoshopでの手動サイズ変更

Photoshopでは、[画像]> [画像サイズ]機能を使用して、画像のサイズを手動で変更できます。 ツールは次のようになります。

ツールの上部に現在の画像サイズとピクセルサイズが表示されていることがわかります。 ここで調整を行うと、サイズが変更されます。

Fit Toは、サイズとピクセル設定が事前設定されたドロップダウンリストです。

そのリストの最初のオプションを選択して、1インチあたりのサイズとピクセル数（ppi）を調整すると、ファイルサイズがどのように変化するかがわかります。

これらの設定を試して、ドロップダウンの標準サイズが機能するかどうか、または必要なサイズを取得するために幅、高さ、または解像度のオプションを手動で変更する必要があるかどうかを判断できます。

Web機能用に保存

[Web用に保存]は、[名前を付けて保存]とは異なり、Webオプションは、保存する前にファイルからメタデータ（画像の種類と出所に関する詳細）を削除します。 この機能は、インターネット上に表示される画像を対象としているため、品質を維持しながらサイズを変更する非常に高速な方法です。

[ファイル]> [エクスポート]> [Web用に保存]に移動して、[Web用に保存]オプションを見つけます。

[Web用に保存]ウィンドウが開くと、この機能のもう1つの利点に気付くでしょう。 上部の[2アップ]タブを選択すると、元の画像と変更された画像を並べて比較できます。

ここから、右上隅のプリセットを使用してJPG形式を選択し、必要に応じて品質を調整します。 変更を加えた後、画像プレビューで新しいファイルが品質基準を満たしているかどうかを確認できます。また、各画像の下のデータを確認することで、ファイルサイズの変更を検証できます。

右下隅の幅と高さのフィールドを使用してサイズを変更することもできることに注意してください。 この記事では特にサイズ変更を検討しているため、[Web用に保存]画面に表示される他のオプションについては説明していませんが、詳細についてはここを参照してください。

WordPress画像最適化ツール

Photoshopは、自分でダイヤルを回して画像ファイルのサイズを自分で小さくしたい場合に最適なオプションです。 画像のサイズ変更に役立つより自動化されたものを探している場合は、役立つWordPressプラグインオプションが多数あります。 ここにいくつかの人気のあるオプションのリストとそれらの利点の簡単な説明があります：

想像する–一度にすべての画像を最適化し、簡単にサイズを変更し、必要に応じて写真を元のバージョンに復元します。 それも手頃な価格です。 このプラグインは無料でダウンロードでき、20MBのファイルスペースが含まれています。 その他のオプションは、500MBの場合は月額$ 5、無制限のスペースの場合は月額$ 10です。

ShortPixel –ファイルサイズの制限はなく、複数のサイトに1つのAPIキーを使用すると、このプラグインを最大限に活用できます。 また、予算の柔軟性のために1回限りの月次プランも提供しています。

Optimole –データ指向の場合、Optimoleは最適化統計を確認できるダッシュボードを提供します。 彼らの無料プランでは、月に5,000人の訪問者と無制限の帯域幅が可能です。

これらのオプションと他のいくつかのオプションのより完全な比較については、この記事を参照してください。

画像最適化のためのWebリソース

時間やお金が足りない場合は、無料のオンライン画像最適化ツールがたくさんあります。

Compressjpgを使用すると、複数のファイルをアップロードして、一度にサイズを変更できます。 また、iPhoneHEIC形式の写真をJPEGに変換する機能もあります。 他の同様のサイトは、TinypngとImageCompressorです。

Canva Proは、サイズを変更するだけでなく、画像をデザインおよびアニメーション化したり、Webやソーシャルメディアで使用するためにフォーマットしたりできる、もう1つの人気のあるサイトです。 そのレイアウトは直感的で使いやすいです。

まとめ

画像を最適化することの重要性を過小評価しないでください。 遅いサイトは視聴者をオフにするだけでなく、Google検索でも注目を集めません。 高速読み込みの鮮明な画像は、サイトを他のサイトと一線を画すちょっとした余分なものを提供できます。 最適化されたサイトは、訪問者がより多くのことを求めて戻ってくるようにします。

これらの方法のいずれかを使用して画像のサイズを変更していますか？ そうでない場合は、どちらを最初に試すと思いますか？ コメントで教えてください！

Prihanto Edi /shutterstock.com経由の注目の画像