Web用に画像のサイズを変更する方法

この投稿では、Web用に画像のサイズを変更する方法について説明します。 まずピクセル単位で、画像がWebページに正しく収まるようにします。 次に、キロバイト単位で、画像をあまり劣化させずにファイルサイズを縮小します。

Web用に画像のサイズを変更するのはなぜですか？

画面上で画像の見栄えを良くし、ウェブサイトの訪問者がすばやくダウンロードできるようにしたいと考えています。

画像の読み込みが速いウェブサイトは、検索エンジンで上位にランク付けされます。

検索エンジンは、優れたエクスペリエンスを提供するWebサイトにユーザーを送ることを好むためです。

画像の高速読み込みには2つのステップがあります。

• 最初のステップは、画像のサイズをピクセル単位で変更することです。最初に実行する必要があります。
  それが幅と高さです。 それはウェブサイト上のその場所にちょうどいいサイズである必要があります。
  レスポンシブウェブサイトの導入以来、画像のサイズ設定にはいくつかの奇妙な点があります。
  画像は、モバイル、タブレット、デスクトップ、テレビに適したサイズである必要があります。これについては後で説明します。
• 2番目のステップは、画像のサイズをキロバイト単位で縮小することです。これは圧縮と呼ばれます。
  圧縮すると、画像内の色が縮小または結合されるため、サイズがキロバイト単位で縮小されます。 品質をあまり落とさずにこれを行うことが可能です。

サイズ変更と圧縮の両方のタスクを実行することは、Web用の画像の最適化として知られています。

画像のサイズを変更するためのベストプラクティスとその方法を紹介します。

レスポンシブ画像の合併症

まず、レスポンシブ画像（さまざまな画面サイズで見栄えがするようにサイズを変更する画像）を見てみましょう。

私たちは最初にモバイル向けに設計しているので、まずモバイル版のWebサイトを参照します。

モバイルウェブサイトでは、画像は通常、画面の全幅に広がります。 画像はテキストの上に積み重ねられ、ユーザーはモバイルフレンドリーな長いウェブページをすばやく下にスクロールすることに非常に慣れています。

モバイルデバイスの場合、画像の非常に適切な幅は640ピクセルです。 高さはあなたが望むものなら何でもかまいません。

しかし、画像のサイズ設定はそれだけではありません。 1つのサイズですべてに対応できるわけではありません。

さまざまなデバイス上の画像

特大のモニターやテレビ画面で同じ画像について考えてみましょう。そうです、スマートテレビからウェブサイトにアクセスできるようになりました。

画像はテキストの左側の列に表示される場合があります。

モバイル版の場合と同様に、画面の幅にまたがる場合があります。 これらをヒーロー画像と呼びます。

その画像を今どれだけ大きくする必要があるか想像してみてください。

テレビの場合、ピクセル単位の完全な画像は幅1920ピクセル以上になります。

モバイル用に画像をすでに640ピクセルに縮小している場合、1920ピクセルに拡大しようとすると、ひどく見えます。 あなたはそれを400％以上伸ばすでしょう。

画像を拡大すると見栄えが悪くなります。ピクセルが伸びて画像がぼやけて見えます。

画像を1920ピクセルに維持するように設定しても、問題は解決しません。 これらは、特に遅いインターネット接続では、ダウンロードが非常に遅くなります。

複雑さを増すために：画像はページで使用するための正確なピクセルサイズでなければなりません。 検索エンジンは、寸法と呼ばれる幅と高さをよく把握することを好みます。

ご覧のとおり、標準サイズはなく、すべてが非常に複雑になります。 私たちにできることは最善です。

アダプティブ画像用のWordPressプラグイン

アダプティブイメージと呼ばれる、デバイスに正しいイメージサイズを提供するのに役立つWordPressプラグインがいくつかあります。

基本的に、小さな画像が最初にダウンロードされます–それがサイズであろうと解像度であろうと。

画面の解像度が大きい場合、プラグインはより大きなバージョンを提供します。 これにより、訪問者の待ち時間が短縮されます。

これは、大きなヒーロー画像を使用したいが、ダウンロード時間が心配な場合の解決策です。

これが私が好きな2つの適応画像プラグインです：

• NevmaによるWordPressの適応画像
  小さいバージョンの画像をモバイルデバイスに送信するだけなので、アクティベーション後に設定が保存されるとジョブを実行する非常に基本的なプラグインです。
• ShortPixelによるShortpixelアダプティブイメージ
  このプラグインは賢いです。 アクティブ化されるとすぐに、さまざまな画面の画像のトリミングと圧縮が開始されます。 ただし、必要に応じてより細かく制御できます。 ShortPixelのドキュメントも包括的です。 圧縮前後の画像を画像圧縮テストと比較することもできます。
  

だから、私がすることは、これらの適応プラグインを使用することですが、それらに完全に依存して、カメラから直接WordPressサイトに写真をダンプしないでください。 メディアライブラリをクリーンに保ちます。

最初にイメージのサイズを変更し、KBを下げるために最小限に圧縮します。 WordPressにアップロードすると、残りはアダプティブイメージプラグインが行います。

Web用に画像のサイズ変更を始めましょう。

ウェブ用に画像のサイズを変更します–ピクセル単位

これまでに説明したすべてのことを念頭に置いて、画像の幅を選択してください。

• 写真家は優れた品質の画像を必要とします。 特大のモニターで全画面幅で表示するには、かなり大きな画像が必要です。 写真のサイズを1920ピクセル以上にします。
• 他の人は、1200ピクセルにすることをお勧めします。 これは良いバランスです。 特大のモニターを使用している人は、全幅の画像でピクセル化が見られますが、画像の読み込みが速いとトレードオフになります。

私自身のウェブサイトとブログでは、幅が最大1200ピクセルの画像を使用していますが、ページにある画像のほとんどは800ピクセルです。理由は次のとおりです。

• 全幅の画像が私のウェブサイトで使用されることはありません。 私はすべてを本当にスピーディーに保つのが好きです。
• 私のビジネスは特に視覚的ではありません。人々は私の写真をそれほど高い解像度で見る必要はありません。
• 私はOpenGraphに個別の正確なサイズの画像を使用しており、1200より大きいものは必要ありません。
• Google Analyticsから、私のサイトにアクセスする人々がハンドヘルドデバイスまたはラップトップを使用していることがわかります。 有用な情報。

私はあなたの裁量に任せます。

無料の画像編集ソフトウェア

オンラインで利用できる無料のツールや、ダウンロードできる画像編集プログラムがたくさんあります。

写真の場合はJPEGファイル形式に固執します。これについては、ここで説明します。

ベクトルについては、PNGまたはSVGを選択してください。これは、将来のチュートリアル用です。

GIMP画像編集ソフトウェア

「GIMP」（GNU画像操作プログラム）は完全に無料の画像エディタです。

WebサイトからGIMPの現在の安定バージョンをダウンロードします。

GIMPは、画像（スケール）のサイズ（寸法）を変更するためのチュートリアルを提供します。

オンライン画像編集者

Googleで「オンラインサイズ変更画像」をすばやく検索すると、Jpegのアップロード、サイズ変更、圧縮、ダウンロードを可能にするさまざまなオプションが表示されます。

私が最初に見つけた結果はresizeimage.netでした。 使い方はとても簡単です–画像のトリミング、サイズ変更、圧縮を行います。

画像を切り抜く場合は、オプション番号2を使用しますが、それをバイパスして、オプション番号4に直接移動し、ピクセル単位でサイズを変更できます。

1200を幅フィールドに入力し、高さをNanにして、ボックスにチェックマークを付けてアスペクト比を維持します。

出力画像形式はJPGになります。

圧縮オプションを選択します。

プログレッシブ圧縮では、訪問者がページにアクセスするとすぐに、ピクセル化されたバージョンのJPEGが表示されます。 残りの情報はプログレッシブダウンロードされ、最終的なイメージが作成されます。 訪問者が待つことを知っているので、私はこのオプションがとても好きです。

どれだけ冷酷になりたいかにもよりますが、画像の品質を約75％下げます。

KB単位の画像のサイズ変更–圧縮

圧縮はサイズ変更とは大きく異なります。 アダプティブイメージプラグインを使用している場合でも、アップロードする前にすべてのイメージを圧縮する必要があります。

圧縮はピクセルを減らすことによって画像のファイルサイズを小さくするので、ダウンロードが速くなります。

圧縮段階では、画像の品質をあまり妥協しないようにしてください。

見栄えの良い画像とすばやくダウンロードすることのバランスをとるようにしてください。

GIMPソフトウェアを使用して画像を圧縮することもできます。

Jpegのサイズ（FileSize）の変更に関するGIMPチュートリアル。