WordPressサイトに画像をアップロードしようとしていますが、画像のサイズやファイルタイプがわかりませんか？ Web用に画像のサイズを変更して圧縮するプロセスに慣れていませんか？ この記事では、適切な画像サイズを使用することがWebサイトにとって重要である理由を説明し、無料の写真エディターGIMPを使用して画像のサイズを変更および圧縮する方法を示します。
ウェブサイトの画像のサイズ変更が重要な理由
まず、Web サイトの画像のサイズ変更が非常に重要な理由から始めましょう。
による WordPress.org、画像の全体的な「物理サイズ」は、Web サイト ページのパフォーマンスに大きな影響を与えます。 「[画像の] ファイル サイズによって、ページの読み込みにかかる時間が決まります。 ファイル サイズが大きいほど、[ページ] の読み込みに時間がかかります。」 つまり、大きなファイル サイズを Web サイトにアップロードすると、コンテンツを追加するページのパフォーマンスが低下し、通常はサイトの分析データでページの読み込み速度が遅くなります。
「[画像の] ファイル サイズによって、ページの読み込みにかかる時間が決まります。 ファイル サイズが大きいほど、[ページ] の読み込みに時間がかかります。」
-WordPress.org
ページの読み込み速度。単に「」とも呼ばれます。ページスピード、」は「ページのコンテンツの読み込み速度」です。 SEOサイトMoz。 ページが遅いと、「直帰率これは、サイト訪問者が XNUMX つのページを閲覧した後にサイトを離れたセッションを表す凝った指標です。 ページの速度が遅いと、訪問者がサイトのページに費やす時間を短縮することもできます。これは、ページのコンテンツが読み込まれるのを待ちきれずにサイトを離れてしまう可能性があるためです。
通常、ユーザーがサイトでより多くの時間を費やし、サイト全体でより多くのページを閲覧することを望んでいるため、これらの指標は重要です。
また、検索エンジンの結果ページ (「SERP」) でのサイトのランク付けに影響を与えるため、重要です。 SERPs Google に単語やフレーズを入力して Enter キーを押したときに表示される結果ページです。 大きな画像は Web デザインの慣行が不十分であることを示しており、サイトでのユーザー エクスペリエンスに悪影響を与えるため、Google などの検索エンジンは ペナルティ これらの大きな画像と 他のウェブサイトよりもパフォーマンスの高いウェブサイトをランク付けする.
たとえば、Google でのウェブサイトのランクが低いほど、サイトへのトラフィックが少なくなり、検索結果で上位にランクされている競合他社へのトラフィックが増えます。
Web サイトの画像のファイル サイズを小さくすることで、パフォーマンスを向上させることができます。 ページスピード したがって、次のような他の指標を改善します 直帰率 及び ページ滞在時間e 最終的に検索エンジンでのランキングを向上させます。
検索ランキングには他にも多くの重要な変数があることに注意してください。 SEO (検索エンジン最適化) 戦略。 ただし、サイトのトラフィックを増やすために、Google などの場所でサイトのランクを高くすることは非常に重要です。
GIMPでWordPressの画像のサイズを変更する方法
では、WordPressの画像のサイズを適切に変更するにはどうすればよいですか？
を使用して画像全体のサイズを縮小するだけで、画像のファイル サイズを縮小できます。 スケーリング 及び トリミング ウェブサイトにアップロードする前に。 さらに、いわゆる「 」を画像に追加して、サイズをさらに縮小します。
無料でオープンソースのフォト エディターである GIMP は、これらすべてのタスクを実行しながら、推奨される「次世代」ファイル形式にエクスポートして、画像のファイル サイズをさらに縮小し、サイトのパフォーマンスを向上させることができます。
画像のスケーリング
このプロセスを開始するには、サイトにアップロードする画像を GIMP で開きます。 これを行うには、画像をコンピューターから GIMP の画像ウィンドウにドラッグ アンド ドロップするか、GIMP 内で [ファイル] > [開く] を選択します。
[ファイル]>[開く]方法を使用している場合は、表示される[画像を開く]ダイアログ内からコンピューター上の画像の場所に移動し、画像ファイルを見つけたらダブルクリックしてGIMPで開きます（またはダイアログウィンドウの右下隅にある「開く」ボタン）。
GIMPウィンドウの最上部には、「タイトルバー」（上の画像の赤い矢印）と呼ばれる機能があります。 ここに、画像の現在のサイズが表示されます（写真の拡大された緑色のボックス）。 私の画像は1920×1280です。最初の数字1920は画像の幅（ピクセル単位）を表し、1280番目の数字XNUMXは画像の高さを表します。 画像に使用する最終的な画像のサイズは、WordPressのどこで画像を使用するか、および使用しているテーマによって異なります。
このチュートリアルでは、ブログ投稿画像に推奨される標準の1200×630ピクセルサイズに画像のサイズを変更します。
このことを念頭に置いて、最初に実行したいのは、元の画像のアスペクト比が推奨サイズのアスペクト比と一致するように画像をトリミングすることです。 これを行うには、キーボードのShift + Cを押すか、GIMPツールボックスの切り抜きツールアイコン（上の画像の赤い矢印）をクリックして、切り抜きツールを取得します。
次に、このツールの[ツールオプション]で、[固定]（緑色の矢印）の横にあるチェックボックスをオンにし、ドロップダウンをクリックして[アスペクト比]（青色の矢印）を選択します。
ドロップダウン (黄色の矢印) の下のテキスト フィールドに縦横比を設定するために、「1200:630」と入力します。 これは、最終的な画像にしたい推奨画像サイズの縦横比と一致します。
切り抜きツールを使用して、画像上でマウスをクリックしてドラッグし、切り抜き領域を描画します。 マウスを放すと、トリミング領域の外側はすべて淡色表示になります (上の画像の赤い矢印 – ツール オプションで [ハイライト] がオンになっていると仮定します。通常はデフォルトでオンになっています)。
デフォルトでは、トリミング領域にはガイドが「中心線」として設定されています (上の画像の黄色の矢印)。 ツール オプションの下部にあるガイド ドロップダウンを使用して、この設定を変更できます。 たとえば、ガイドを「Rule of Thirds」(緑色の矢印) に変更します。 ここにあるさまざまなガイド オプションは、写真の原則に基づいているため、これらの原則を使用して構図を簡単に組み立てることができます。
マウスをトリミング領域の任意の側面またはコーナー (つまり、上の画像の赤い矢印で示されている強調表示された領域) の上に置き、クリック アンド ドラッグしてトリミング領域の境界のサイズを変更できます。 ツールオプションにある「サイズ」フィールドで、トリミング領域のサイズをいつでも確認できることに注意してください（上の画像で緑色で囲まれています）。 トリミング領域の全体のサイズは、画像の最終サイズ 1200×630 よりも大きくする必要があります。
切り抜き領域の中央（赤い矢印）でマウスをクリックしてドラッグし、画像上の切り抜きの位置を変更することもできます。
画像をトリミングする準備ができたら、トリミング領域内を XNUMX 回クリックすると、画像がトリミングされます。
[ツールオプション]の[トリミングされたピクセルを削除する]オプションがオフになっている場合（上の画像の緑色の矢印）、元の画像の境界は黄色の点線（赤い矢印）で画像の周囲に表示されます。 [画像]>[キャンバスをレイヤーに合わせる]に移動すると、元の画像を復元してトリミングを元に戻すことができます。 キャンバス境界内の画像の領域のみがエクスポートされます。
画像は必要な縦横比にトリミングされましたが、「タイトルバー」の画像のサイズをもう一度見ると、画像が 1532×804 であることがわかります (上の写真では緑色で囲まれ、拡大されています –画像にトリミング領域を描画した大きさに基づいて、寸法が若干異なる可能性があります)。 目的の寸法に合わせて画像をスケーリングする必要があります。
これを行うには、[画像]> [画像の拡大縮小]（赤い矢印）に移動します。
表示される「画像のスケール」ボックスの「画像サイズ」の下で、「幅」ボックスと「高さ」ボックスの横にあるチェーン リンク アイコンがリンクされていることを確認します (上の写真の赤い矢印)。 次に、画像の「幅」を 1200 (緑色の矢印) に変更します。 タブキーを押します。 画像の高さは自動的に「630」に更新されます。 「品質」の下で、「補間」ドロップダウン (青い矢印) が「NoHalo」または「LoHalo」に設定されていることを確認して、スケーリング後に最高の画質を実現します。 (補間の詳細については、 この件に関する私のチュートリアルをチェックしてください).
「拡大縮小」ボタンを押して、画像を拡大縮小します（黄色の矢印）。
スケーリングが完了したら、タイトル バーで画像のサイズを確認します。 1200×630 の画像サイズが表示されるはずです。まさに必要なサイズです。 今から何をする？
WebPにエクスポートして画像を圧縮する
画像の切り抜きと拡大縮小により、画像の高さを1920ピクセルから1200ピクセルに、幅を1280ピクセルから630ピクセルに減らすことでファイルサイズを縮小しましたが、画像をエクスポートするときに圧縮を適用することで、画像サイズをさらに縮小できます。
そのため、画像の品質を著しく低下させることなく画像に圧縮を適用するファイル形式に画像をエクスポートする必要があります。 JPEG は常に適切なオプションですが、さらに優れたオプションを利用できるようになりました。 WebP.
WebP 形式は、JPEG よりも画像の品質に影響を与えずに、JPEG よりも多くの圧縮を適用します。 つまり、より小さなファイル サイズで見栄えの良い画像が得られます。 さらに、WebP 形式は上位 5 つの Web ブラウザーすべてでサポートされています。
WebP にエクスポートするには、[ファイル] > [名前を付けてエクスポート] (赤い矢印) に移動します。
[場所]セクション（緑色で囲まれている）のフォルダーのいずれかをクリックして、画像を保存するコンピューター上の画像を選択します。 フォルダをダブルクリックして入力するだけで、「フォルダに保存」タイトル（赤い矢印）の横にあるフォルダを確認できます。 次に、画像の名前を任意の名前に変更します。画像名の末尾に拡張子「.webp」（青い矢印）を付けて、画像をWebP形式でエクスポートしてください。 準備ができたら、ウィンドウの右下隅にある[エクスポート]をクリックします（黄色の矢印）。
次に、「画像をWebPとしてエクスポート」ダイアログが表示されます。 「ロスレス」がオフになっていることを確認します（赤い矢印）。 私は通常、「画質」を80に設定します（青い矢印–これはパーセントであるため、パーセンテージが低いほど画像の品質は低くなりますが、画像ファイルのサイズは小さくなります）。 画像に透明度が含まれていない場合（つまり、背景のないロゴ）、「アルファ品質」スライダーについて心配する必要はありません（実際、私が行った実験では、アルファ品質を100から90にわずかに下げました背景が透明な画像のファイルサイズを8.50kbから8.52kbに増やしました。 「ソースタイプ」ドロップダウンは「デフォルト」に設定したままにすることができます。
Exif データ、ITPC データ、XMP データなどのメタデータ オプションをオンにするかオフにするかは、ユーザー次第です。 Exif および XMP データは、通常、カメラによって割り当てられるメタデータであり、使用されたカメラのモデルや使用されたレンズの種類など、写真に関する情報を記述します。 一方、ITPC は報道関係者によって使用され、所有権、権利、ライセンスなどの情報を画像に割り当てます。 何をすべきかわからない場合は、これらのオプションをチェックしたままにしてください。
同様に、ほとんどのブラウザは自動的に sRGB 色空間を使用して画像を表示するため、[カラー プロファイルを保存] オプションをオフのままにしても問題ありません。これは GIMP が使用するものです。 別のカラー プロファイルを使用している場合は、これをチェックしたままにしておきます。 また、特定のブラウザで画像が正しく表示されないことが心配な場合は、チェックを入れたままにしておくと、全体の画像サイズが数 kb しか増えません。
最後に、「サムネイルを保存」オプションをオフのままにしておくと、さらに数キロバイト節約できます.
「エクスポート」（上の画像の黄色の矢印）をクリックして、画像をWebP形式にエクスポートします。 エクスポートされたWebPファイルを同じサイズで品質が「80」に設定されているJPEGファイルと比較すると、WebP画像のサイズはJPEGよりも約30 kb、つまり約25％小さくなっています。
これで、WordPressサイトにログインして、画像をアップロードするページまたは投稿に移動したり、メインナビゲーションを使用して[メディア]セクションに移動したり、画像をメディアライブラリにドラッグアンドドロップしたりできます。 私の場合、メインナビゲーション（上の画像の赤い矢印）を使用して[投稿]に移動し、[ブログ投稿1]（青い矢印）をクリックしてそのブログ投稿を編集します。
次に、投稿設定サイドバー (赤い矢印) を開き、[おすすめの画像] セクションまで下にスクロールして、このセクションを展開します (青い矢印)。 次に、画像をクリックして新しい画像に置き換えます。
[ファイルのアップロード] タブ (赤い矢印) に移動し、画像をコンピューターから WordPress にドラッグ アンド ドロップします (青い矢印)。
最後に、[アイキャッチ画像を設定] をクリックして、この変更を適用します (赤い矢印)。
「更新」（赤い矢印）をクリックして、新しい注目の画像でページを更新します。
「投稿を表示」（青い矢印）をクリックすると…
…ブログの上部に新しい注目の画像が表示されます。
このチュートリアルは以上です。 WordPress ウェブサイトのデザインについて詳しく知りたい場合は、私の記事をチェックすることをお勧めします。 WordPress 6.0 for Non-Coders コース! または、GIMP について詳しく知りたい場合は、私の UdemyのGIMP 2.10マスタークラス!
