WordPress で画像を編集およびサイズ変更する方法
公開: 2023-06-16WordPress Web サイトにビジュアルを追加することは、ページをより魅力的なものにするための優れた方法です。 しかし、完璧な画像を見つけるだけでは、まだ半分しか終わっていません。 場合によっては、グラフィックの表示方法を調整して、グラフィックをより魅力的にしたり、Web パフォーマンスを最適化したりする必要があります。
幸いなことに、WordPress で画像を編集するのは簡単です。 写真のサイズを完全に変更したり、無関係なセクションを切り取ったり、WooCommerce 製品ページ用に最適化することもできます。
この記事ではWordPressで画像を編集する方法を紹介します。 次に、画像の最適化と、それによって読み込み時間がどのように改善されるかについて説明します。 始めましょう！
WordPress で画像を簡単に編集する方法 (8 つの方法)
WordPress で画像を編集するにはいくつかの方法があります。 まずはサイズ変更について話しましょう。
1.WordPressで画像のサイズを変更する方法
小さい画像はより速く読み込まれるため、WordPress で画像のサイズを変更することをお勧めします。 サイトに写真が 1 枚か 2 枚しかない場合は、目立った違いが生じない可能性があります。 ただし、画像を大量に使用するサイトでは、コンテンツを読み込むために多くの処理が必要になります。
さらに、デザイン目的で画像のサイズを特定のサイズに変更することもできます。
WordPress で画像のサイズを変更するには、 「メディア」 → 「ライブラリ」に移動します。 次に、新しいファイルをアップロードするか、既存のファイルを選択します。 次に、 「画像の編集」をクリックします。
[画像の拡大縮小]で、新しい寸法を入力し、正確な幅と高さを指定します。 次に、 「スケール」を押します。
サイズ変更した写真を使用するには、メディア ライブラリに戻って写真を選択します。 次に、ファイルの URL をコピーします。
最後に、サイト上の使用したい場所に URL を貼り付けます。
または、ページ上の画像ブロックに画像を再挿入することもできます。
2.WordPressで画像をトリミングする方法
画像をトリミングすると、写真全体のサイズが変更されるのではなく、トリミングされます。 したがって、画像の重要度の低い部分を切り取って、フレーム内の特定のオブジェクトに焦点を当てることができます。
WordPress で画像をトリミングするには、 「メディア」 → 「ライブラリ」に移動します。 次に、写真をアップロードします。 次に、 [画像の編集]をクリックし、 [トリミング]を選択します。
この時点で、エディターを物理的にドラッグして、画像の不要な部分を切り取ることができるようになります。
新しい写真に満足したら、もう一度「切り抜き」をクリックして変更を実行します。 次に、 「保存」をクリックします。
3. 画像を反転する方法
WordPress で画像を反転したい場合もあります。 他の画像編集ほど一般的ではありませんが、反転は素晴らしい芸術的効果をもたらす可能性があります。
たとえば、反転することで写真の焦点を調整し、訪問者の目を重要な要素に導くことができます。 さらに、画像内のテーマを強化したり、特定の感情を呼び起こしたりすることもできます。
WordPress で画像を反転するには、 [メディア] → [ライブラリ] → [画像の編集]に進みます。 次のアクションは、画像をどのように反転するかによって異なります。 [垂直方向に反転]または[水平方向に反転]を選択できます。
垂直方向に反転すると画像が逆さまに表示され、水平方向のオプションでは鏡像効果が作成されます。 変更内容に問題がなければ、 「保存」をクリックします。
4. 画像を回転する方法
WordPress では、画像を反時計回りまたは時計回りに回転して画像を回転することもできます。 これは、ページ上の一致または配置の問題を修正する簡単な方法です。
開始するには、 [メディア] → [ライブラリ] → [画像の編集]に移動する必要があります。 そこで、 「左に回転」または「右に回転」をクリックします。
このアクションにより、 毎回画像を 90 度回転します。 したがって、画像を 180 度回転させたい場合は、適切なボタンを 2 回クリックします。
画像の編集中に間違いを犯した場合は、 [元に戻す]を選択するだけで最後の操作を消去できることに注意してください。 写真の編集が完了したら、 「保存」をクリックします。
5. 画像を位置合わせする方法
画像の配置は、WordPress で写真を編集する最も簡単な方法の 1 つです。 これにより、他のコンテンツと相対的にグラフィックをページ上のどこに配置するかが決まります。 配置設定は、投稿またはページに画像を追加した後でのみ適用できます。
まず、画像ブロックを使用して写真をページに挿入します。 次に、ブロックの上にあるツールバーに移動します。
「整列」アイコンをクリックします。
ご覧のとおり、画像を左または右に配置したり、中央に配置したりできます。 さらに、この段階で幅のバリエーションを変更して、画像を[全幅]または[広幅]にすることができます。
6. イメージを元のバージョンに復元する方法
WordPress で写真を編集しているときに、誤って間違いを犯したり、望ましくない変更を適用したりする可能性があります。 幸いなことに、編集を元に戻して画像を元のバージョンに復元するのは簡単です。
前に説明したように、元に戻したい操作が 1 つだけの場合は、画像エディター内で[元に戻す]をクリックします。
または、写真のサイズを変更し、間違った寸法を入力した場合は、 [画像を復元] を選択します。
場合によっては、この設定はデフォルトで非表示になっています。 この場合、この機能を見つけるには、 [元のイメージの復元]タブを展開する必要があります。 写真がリセットされ、写真に適用した変更が削除されます。
7. WordPress で画像のサイズを一括変更する方法
現在、WordPress で画像のサイズを一括変更するデフォルトの方法はありません。 ただし、Imsanity などのプラグインを使用してその機能を追加できます。 これは無料のツールなので、WordPress 内に直接インストールできます。
次に、 「設定」 → 「Imsanity」に移動します。
サイト上のすべての画像のサイズを変更する場合は、この操作により投稿やページのレイアウトが大幅に変更される可能性があることに注意することが重要です。 したがって、開始する前にサイトの新しいバックアップを作成することをお勧めします。
Jetpack VaultPress Backup は、優れた自動バックアップ プラグインです。 サイトがオフラインの場合でも、モバイル アプリを使用してワンクリックでサイトを復元できます。 さらに良いことに、このツールはすべてのファイル、WooCommerce データ、データベースをバックアップできます。
Imsanity を使用してすべての WordPress 画像のサイズを変更する場合は、写真の最大の高さと幅を選択します。 次に、変更を保存します。
または、メディア ライブラリのリスト ビューアイコンをクリックします。 をクリックして画像のサイズを選択します。
ここで、特定の写真を選択し、 [画像のサイズ変更]を選択します。
8. WooCommerce の画像を編集およびサイズ変更する方法
e コマース ストアを運営している場合は、WooCommerce で商品画像を編集することもできます。 結局のところ、顧客に商品の購入を説得するには、高品質の写真が必要です。
幸いなことに、WooCommerce Customizer を使用してほとんどの変更を加えることができます。 開始するには、 「外観」→「カスタマイズ」→「WooCommerce」→「製品画像」に進みます。
ここでは、メイン画像とサムネイルの幅を調整し、正方形、カスタム、またはトリミングなしのいずれかを選択できます。
さらに、コーディングの知識があるユーザーの場合は、フックを使用して WooCommerce 画像サイズを制御できます。 たとえば、wc_get_image_size 関数は画像サイズの定義を変更します。
さらに、WooCommerce バージョン 3.3 以降では、サムネイルの自動サイズ変更にアクセスできます。 あるいは、サムネイルの強制再生成などのプラグインをインストールして、このプロセスを処理することもできます。
読み込み速度を向上させるために画像を最適化する方法
これまでは主に、ビジュアル デザイン上の理由から写真を編集することについて説明してきました。 それでも、同様に重要な考慮事項があります。それは、画像の最適化です。
前述したように、重い画像ファイルはページの読み込み速度に悪影響を及ぼし、訪問者をイライラさせる可能性があります。 そのため、WordPress Web サイト用に写真を最適化することがベスト プラクティスです。
以下に、作業を開始するためのいくつかの手順を示します。
ステップ 1: Jetpack と Jetpack Boost をインストールする
サイトでのコンテンツ配信を最適化する最も簡単な方法の 1 つは、Jetpack や Jetpack Boost などのプラグインをインストールすることです。
Jetpack には、訪問者に最も近い場所から画像を提供する無料の画像 CDN があります。 これにより、世界中のユーザーの読み込み時間を短縮できます。 CDN は、パフォーマンスが低下する傾向にある画像を大量に使用する Web サイトに特に役立ちます。
しかし、Jetpack CDN の Photon テクノロジーは、通常の CDN よりもはるかに優れた機能を備えています。 画像をより軽量で最新の形式に自動的に再エンコードします。 個々の訪問者のニーズに基づいてサイズが自動的に変更され、速度とビジュアル品質の両方の点で可能な限り最高のエクスペリエンスが提供されます。
Jetpack Boost を使用すると、画像の遅延読み込みを簡単に実装できるほか、JavaScript の遅延や重要な CSS の生成など、速度を向上させる追加オプションも付属しています。
さらに良いことに、どちらのツールもサイトのバックグラウンドで動作するため、継続的なメンテナンスはほとんど必要ありません。 さらに、Jetpack Boost を使用すると、デスクトップとモバイルで明確なサイト パフォーマンス スコアを含むクイック レポートにアクセスできます。
Jetpack Boost を無料の WordPress プラグインとしてインストールすることも、追加の最適化機能を提供する有料プランのいずれかにアップグレードすることもできます。 次に、 「プラグイン」→「新規追加」に移動して、ツールをインストールしてアクティブ化します。
同じプロセスに従って Jetpack プラグインをダウンロードします。
ステップ 2: 遅延読み込みと CDN を有効にする
遅延読み込みは、コンテンツ配信を高速化する最良の方法の 1 つです。 この設定により、訪問者がページ上の現在の位置まで下にスクロールするまで画像が読み込まれなくなります。 したがって、Web サイトではすべてのビジュアル コンテンツを同時に読み込む必要はありません。
幸いなことに、これは Jetpack Boost で利用できる無料機能の 1 つです。 プラグインの使用を開始するには、プラグインを WordPress.com アカウントに接続する必要があります。 アカウントをお持ちでない場合は、完全に無料で作成できます。
次に、 「Jetpack」→「Boost」に移動して設定を構成します。
ここで、トグルを使用して画像の遅延読み込みを有効にします。
CDN を有効にするには、 「Jetpack」 → 「設定」に進み、 「パフォーマンス」タブを開きます。
「パフォーマンスと速度」というセクションを探してください。 次に、 [サイト アクセラレータを有効にする] をオンにします。
ステップ 3: 高速化のための追加設定を有効にする
Jetpack Boost ダッシュボード内に表示される最初の設定は、 [CSS 読み込みの最適化]です。 この設定をオンにすると、Jetpack は Web ページ用に重要な CSS を生成します。
これは、訪問者がページを下にスクロールするまで、「スクロールしなければ見えない部分」（ユーザーにすぐに表示されるページの部分）の CSS のみが読み込まれることを意味します。 そのため、特にモバイル デバイス上のコンテンツの読み込みが大幅に速くなります。
有料の Jetpack Boost プランを使用すると、自動クリティカル CSS で時間を節約できます。
こうすることで、必要に応じてサイトの変更を続けることができます。 Jetpack は、コンテンツを更新するたびに、Web サイトの重要な CSS とパフォーマンス スコアを自動的に再生成します。
Jetpack Boost を使用すると、必須ではない JavaScript の読み込みを延期することもできます。 これは、サイトがスタイルや画像などの最も目に見える要素を最初に読み込み、他のタスクを後回しにすることを意味します。 このプロセスにより、サーバーの負担が軽減されます。
WordPress での画像編集に関するよくある質問
それでは、WordPress での画像の編集と最適化に関する最もよくある質問のいくつかに答えてみましょう。
WordPress に最適な画像形式は何ですか?
WordPress メディア ライブラリは現在、JPEG/JPG、PNG、および WebP 画像をサポートしています。 通常、JPEG と PNG が最も一般的な形式であり、異なる圧縮プロセスが使用されます。
JPEG は、圧縮タイプにより高画質が維持されるため、写真ポートフォリオやその他の視覚的なコンテンツに最適なオプションです。
一方、PNG は透明な背景をサポートしているため、グラフィック デザインの目的でよく使用されます。 さらに、スクリーンショットやアイコンにも適しています。
WebP の人気は高まっています。 Web での使用のために特別に設計された画像形式であるため、他の形式よりも圧縮率が高く、ファイル サイズが小さくなります。
WordPress にアップロードする前に画像のサイズを変更した方がよいでしょうか?
高速な読み込み時間を維持するには、WordPress にアップロードする前に画像のサイズを変更することをお勧めします。 こうすることで、ファイル サイズを可能な限り小さく保つことができます。
もちろん、WordPress 内で画像のサイズをさらに変更することもできます。 サイトに写真を追加すると、メディア ライブラリ内でサイズ変更やトリミングなどの追加の編集を適用できるようになります。
画像の圧縮と最適化は重要ですか?
画像を圧縮すると、より小さなファイルが作成されます。 遅延読み込みなどの追加機能を使用して画像を最適化することもできます。
画像の圧縮と最適化は両方とも、全体的な読み込み速度を向上させるため重要です。 Google は速度をランキング要素として使用するため、これは不可欠です。
さらに、高速な Web サイトはユーザーフレンドリーです。 訪問者がサイトでより多くの時間を過ごすよう奨励することで、直帰率を減らすことができます。
Core Web Vitals では速度も重要です。 これは、ユーザーが Web ページをどのように体験するかを明らかにする一連の標準化された指標です。 画像の圧縮と最適化により、First Contentful Paint (FCP) と Largest Contentful Paint (LCP) という 2 つの重要な指標を向上させることができます。
WordPress で画像を編集および最適化する
美しい写真を撮ったり、ユニークなイラストを作成したりすることは、Web デザインに磨きをかける素晴らしい方法です。 ただし、場合によっては、画像の編集や調整が必要になる場合があります。
幸いなことに、WordPress では画像のサイズ変更、トリミング、整列、反転、回転を簡単に行うことができます。 さらに良いことに、プラグインを使用して写真のサイズを一括変更できます。 WooCommerce の商品画像やサムネイルのサイズを変更するのも簡単です。
画像の最適化は、高速な読み込み時間を維持し、より良いユーザー エクスペリエンスを生み出すために不可欠です。 画像を最適化する最も簡単な方法は、Jetpack Boost を使用することです。 このプラグインを使用すると、遅延読み込み、Critical CSS、Jetpack の CDN にアクセスできるようになります。 今すぐ Jetpack の計画をチェックして始めましょう!