ナビゲーション

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

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

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

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

大きな画像を使用すると、Web ページの速度が低下する可能性があります。 これにより、最適とは言えないユーザー エクスペリエンスが生み出されます。 Web サイトの画像の圧縮は、ファイル サイズを小さくするプロセスです。 HTTP Archive によると、画像は Web ページの総重量の平均 21% を占めています。 Web における画像圧縮の主な利点は次のとおりです。

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

パート 2: Web サイト用に画像を圧縮する最も簡単な方法

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

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

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

簡単に言うと、Free Online Image Compressor は、初心者や一般の人が Web 用に画像を圧縮するための良い出発点となります。

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

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

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

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

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

画像をダウンロードする

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

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

ステップ1Photoshopを実行し、Webサイトに使用する画像を開きます。 を開く File 上部のリボンのメニューから選択します ウェブ用に保存。 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 無料オンライン画像圧縮ツールを試してみることをお勧めします。 さらに質問を? この投稿の下のコメント欄にメッセージを残してください。

関連ガイド