ナビゲーション

PhotoshopまたはオンラインでWebサイトの画像を圧縮する方法

オンラインストアまたはウェブサイトを運営している場合、 ウェブサイトの画像圧縮 圧縮は、Web 開発者が習得しなければならない技術です。最近の調査によると、画像形式は 100 以上あります。それらはさまざまな目的で開発されました。Web サイトに適したものもあれば、オンラインでの配布に適さないものもあります。この記事では、Web 用に画像を圧縮する最適な方法を紹介します。これにより、Web サイトを最適化し、ページの読み込みを高速化できます。

ウェブサイトの画像を圧縮する

パート1:Web用の画像を圧縮する利点

大きな画像は Web ページの速度を低下させる可能性があります。その結果、ユーザー エクスペリエンスが最適ではなくなります。Web サイトの画像を圧縮すると、ファイル サイズが小さくなります。HTTP Archive によると、画像は Web ページ全体の平均 21% を占めます。Web サイトの画像を圧縮する主な利点は次のとおりです。

  • Webページの読み込み速度を改善します。
  • SEOを改善します。 画像ファイルが小さいほど、サイトの速度が上がり、検索エンジンの結果で上位になります。
  • バックアップを高速化します。
  • ファイルサイズが小さいほど使用する帯域幅が少ないため、訪問者に優しい。
  • サーバーに必要なストレージスペースが少なくなります。

パート2:ウェブサイトの画像を圧縮する最も簡単な方法

ウェブベースのユーティリティは、ウェブ用に画像を圧縮する最も簡単な方法ですが、ファイルサイズの制限など、いくつかの欠点があります。この点から、 Apeaksoft無料オンラインイメージ圧縮ウェブサイトの画像をオンラインで圧縮するために必要なすべての機能を備えています。

Apeaksoft無料オンラインイメージ圧縮

  • オンラインでバッチで最大40個の画像を圧縮します。
  • 制限なしで完全に無料です。
  • 圧縮画像に透かしやロゴを追加しないでください。
  • 圧縮中に画像品質を可能な限り保護します。
  • 各圧縮イメージを個別にダウンロードするか、ZIPアーカイブ内のすべてのイメージをダウンロードします。

簡単に言えば、Free Online Image Compressor は、初心者や一般の人が Web 用に画像を圧縮するのに適した出発点です。

Web画像をオンラインで圧縮する方法

ステップ1Webブラウザーを開き、 オンライン画像圧縮機 直接。

ステップ2クリック 画像を追加 ボタンをクリックしてファイルを開くダイアログを起動します。ウェブサイトに投稿したい画像を見つけて選択し、 Open ボタンをクリックしてアップロードします。または、ハードドライブからページに画像をドラッグ アンド ドロップして直接アップロードします。

画像を追加
先端 Web アプリは最大 40 枚の画像を処理でき、各画像は 5 MB 未満です。サポートされている画像形式には、JPEG、PNG、SVG、GIF などがあります。

ステップ3アップロードが完了すると、ウェブアプリはすぐに圧縮を開始します。ウェブ画像の圧縮後、 ダウンロード 各ファイルのボタン。 または すべてのダウンロード すべての圧縮画像を ZIP アーカイブとして取得するためのボタン。

画像をダウンロードする

パート3:PhotoshopでWeb用の画像を圧縮する方法

Photoshop は、Web サイトの画像を圧縮するもう 1 つの方法です。オンライン画像圧縮ツールと比較すると、Photoshop は幅広いカスタム オプションと画像編集ツールを提供しています。そのため、上級ユーザーに適しています。コンピューターに Photoshop がすでにインストールされている場合は、以下の手順でワークフローを明確にすることができます。

ステップ1Photoshopを実行し、Webサイトに使用する画像を開きます。 を開く File 上部のリボンのメニューから選択します Web用に保存。 Photoshopの一部のバージョンでは、 Web用に保存 オプションは隠されています 転送 タブの File メニュー。

Web Photoshopとして保存

ステップ2「Web用に保存」ダイアログでは、元の画像と圧縮された結果をプレビューできます。 元の最適化 タブ。右側のパネルを見つけると、いくつかのオプションが表示されます。

ステップ3まず、調整 ファイル形式 右上隅に表示されます。デフォルトでは JPEGですが、他の画像形式に変更することもできます。 品質必要に応じて値を調整してください。値が高いほど、ファイル サイズが大きくなります。画質を圧縮しすぎると、画像がぼやけてしまいます。

Web Photoshopダイアログ用に保存

ステップ4次に、横のボックスをチェックします 最適化次にsRGBに変換するかどうかを決めます。画像のサイズを小さくするには、 幅(Width)高さ オプション 画像サイズ エリア。

ステップ5左下隅のファイルサイズを確認します。問題がなければ、 クリックします ボタン。プロファイル ダイアログで保存先フォルダーを選択し、画像に名前を付けてハード ドライブに保存します。

メモ 次に、上記の手順を繰り返して、他の画像を Web 用に圧縮します。残念ながら、Photoshop では複数の画像を一括処理することはできません。

パート4:Web用の画像の圧縮に関するFAQ

質問1:Webに適した画像サイズとは何ですか?

回答: Web サイトの画像を圧縮することに加えて、画像のサイズも重要な要素です。 オンラインでの表示に大きな影響を与える可能性があります。 幅 1500 ~ 2500 ピクセルの画像を使用することをお勧めします。 1500 ピクセルより小さい画像は、引き伸ばすとぼやけたり、ピクセル化する場合があります。

質問2:Webイメージは何KBにする必要がありますか?

回答: 200KB のルールがあります。 ほとんどの Web 開発者は、画像の最大ファイル サイズは 200 KB であることに同意しています。 この数値は、画像の平均サイズ、形式、Web ページごとの画像の数など、いくつかの要素を組み合わせてテストされ、導き出されました。 Web 用に画像を圧縮する場合も、このルールに従うことができます。

質問3:ウェブ、JPG、PNGのどちらが良いですか?

回答:JPGとPNGには利点と欠点があるため、状況に応じて適切なものを選択する必要があります。 実際には、写真にはJPGを使用し、グラフィックとスクリーンショットにはPNGを使用する必要があります。

まとめ

この記事では、Web サイトの画像を圧縮する方法を説明しました。まず、画像圧縮は SEO と Web サイト構築の重要な部分です。さらに、Web ページを最適化する簡単な方法でもあります。Photoshop は、さまざまなパラメーターを使用して Web サイトの画像を最適化できます。よりシンプルなツールをお探しの場合は、Apeaksoft Free Online Image Compressor をお試しください。さらに質問がありますか? この投稿の下のコメント エリアにメッセージを残してください。

関連ガイド