WordPressの画像サイズの説明

公開: 2020-10-21

WordPressの画像サイズは、少し謎に包まれている場合があります。管理エリアでこのメディア設定ページを見て、それが何であるか疑問に思ったことはありますか？

この記事では、WordPressの画像サイズ、それらのすべて、およびこれがアップロード時間などにどのように影響するかについて説明します。さらに、WordPressがWebサイトのレイアウトでこれらのさまざまな画像サイズをどのように利用しているかについても見ていきます。最後に、不要な画像サイズを削除したり、独自のカスタムサイズを追加したりする方法を見ていきます。

WordPressでの画像サイズの役割は何ですか？

あなたのウェブサイト上の画像が見栄えが良く、鮮明で高品質であることが本当に重要です。画像の物理的なサイズ（サイズとファイルサイズの両方）や画像の解像度など、これを決定する要素がいくつかあります。画像が大きすぎて（たとえば、幅が10,000ピクセル）、ファイルサイズが大きすぎる場合（つまり、1 MBを超える場合）、Webサイトの読み込み速度が遅くなり始めます。逆に、画像サイズが小さすぎると、画像の品質が低下する可能性があります。つまり、ぼやけたり、ざらざらしたりし始める可能性があります。

WordPressは、画像の場所に応じて最適な画像サイズを提供することでバランスをとろうとします。これは、WordPressメディアライブラリに画像をアップロードするたびに3つの異なる画像サイズを作成することによって行われます。これらは、それぞれ150×150ピクセル、300×300ピクセル（最大）、1024×1024ピクセル（最大）の寸法の「サムネイルサイズ」、「中サイズ」、「大サイズ」です。最後に、アップロードされた画像の元のサイズである「フルサイズ」の画像も保存されます。

これらのサイズと後で説明する追加のサイズは、WordPressによってフロントエンドレイアウトのさまざまな位置で使用されます。これは、a）見栄えが良く、b）読み込みが速い画像の両方を使用するために行われます。

WordPressの画像サイズをより詳細に調べる

WordPressに画像をアップロードするときに、「舞台裏」で何が起こっているかを正確に確認できるように、例を実行してみましょう。この例では、「post1-feature-image」という名前の画像をアップロードします。サイズは294KBで、サイズは2089×1175ピクセルです。これは、デフォルトのWordPress Twenty Twentyテーマをアクティブにして行います（他のテーマによって、WordPressによる画像の処理方法が変わる場合があります）。

WordPressメディアライブラリを介してこの画像をアップロードすると、FTPクライアントを使用してサイトに接続できます。アップロードフォルダに移動すると、画像の複数のバージョンが作成されていることがわかります。

赤で強調表示されているので、デフォルトの画像サイズが表示されます。サムネイルは、メディア設定でデフォルトとして設定されているため、トリミングされています。

「中サイズ」と「大サイズ」は、画像の実際の比率が変更されないようにサイズ変更されています。そのため、たとえば「中サイズ」は300×300ではなく300×169になります。生成された残りの画像は、いくつかのWordPressコアファイルとTwentyTwentyテーマのコードの結果です。

技術的になる！

追加の画像サイズが作成されたときに何が起こっているのかという背後にあるコードに興味がある場合は、記事のこのセクションが役に立ちます。そうでない場合は、次の章に進んでください。

WordPressは、wp-includes/フォルダー内にあるmedia.phpというファイルから命令を取得しています。これに進むと、4861行目で次のように表示されます。

 /** * Add additional default image sub-sizes. * * These sizes are meant to enhance the way WordPress displays images on the front-end on larger, * high-density devices. They make it possible to generate more suitable `srcset` and `sizes` attributes * when the users upload large images. * * The sizes can be changed or removed by themes and plugins but that is not recommended. * The size "names" reflect the image dimensions, so changing the sizes would be quite misleading. * * @since 5.3.0 * @access private */ function _wp_add_additional_image_sizes() { // 2x medium_large size. add_image_size( '1536x1536', 1536, 1536 ); // 2x large size. add_image_size( '2048x2048', 2048, 2048 ); }

post1-feature-image-768x432.jpgは、応答性の高い画像サポートのためにWordPressバージョン4.4で追加された「medium_large」サイズの結果として作成されており、さまざまなポータブルデバイスで表示できます。これは、ファイルschema.phpの522行目の「wp-admin/includes」フォルダーで定義されています。

 // 4.4.0 'medium_large_size_w' => 768, 'medium_large_size_h' => 0,

で要求された 86行目のimage.phpファイル：

 } elseif ( 'medium_large' === $size ) { $max_width = intval( get_option( 'medium_large_size_w' ) ); $max_height = intval( get_option( 'medium_large_size_h' ) );

post1-feature-image-1200x675.jpgおよびpost1-feature-image-1980x1114.jpgは、53行目のfunctions.phpファイル内の「TwentyTwenty」テーマから生成されます。

 /* * Enable support for Post Thumbnails on posts and pages. * * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ */ add_theme_support( 'post-thumbnails' ); // Set post thumbnail size. set_post_thumbnail_size( 1200, 9999 ); // Add custom image size used in Cover Template. add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );

これは、TwentyTwentyテーマが注目画像の画像サイズとして1200pxを使用するために行われます。テスト投稿を作成して注目の画像を追加し、フロントエンドの単一投稿ページで、注目の画像を右クリックしてブラウザのインスペクタを見ると、このサイズがどのように使用されているかを確認できます。

最後に、1980pxの画像は、他の投稿テンプレートの注目の画像に使用されるサイズです。これは、テスト投稿テンプレートを「カバーテンプレート」に変更することで確認できます。次に、カバー画像のHTML要素のインスペクターCSSで、このサイズがどのように使用されているかを確認できます。

アップロードする画像は、鮮明に表示するために、注目画像と表紙の画像の幅よりも広いことを常に確認する価値があります。 WordPressは画像サイズを効果的に縮小できますが、小さな画像を拡大して見栄えを良くすることはできません。

不要なWordPress画像サイズを削除する

これまで見てきたように、WordPressは、メディアライブラリに画像をアップロードするたびに、さまざまな画像サイズの作成に忙しくしています。しかし、これらすべての画像が本当に必要なのでしょうか。実際には、そうではありません。 WordPressがバックグラウンドでこれらのさまざまな画像サイズを作成する必要があるため、画像のアップロード速度が遅くなるだけでなく、サーバーで使用する必要のないストレージも消費します。では、WordPressが不要な画像サイズを作成するのをどのように止めればよいのでしょうか。読んで調べてください！

注：デモWebサイトでこれらの手順に従わない限り、子テーマのfunctions.phpファイルに以下に概説する変更を実装することをお勧めします。 親テーマのfunctions.phpファイルに加えられた変更は、次にテーマが更新されたときに消去されます。

WordPressのデフォルトの画像サイズを削除する

これは、テーマのfunctions.phpを編集し、次のコードを追加することで簡単に実行できます。

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); // Remove default image sizes here. function prefix_remove_default_images( $sizes ) { unset( $sizes['thumbnail']); // 150x150 pixels unset( $sizes['medium']); // 300x300 pixels(maximum) unset( $sizes['large']); // 1024x1024 pixels(maximum) unset( $sizes['medium_large']); // 768px width return $sizes; }

テストするために、新しい画像（この例ではpost2-featured-imageと呼ばれます）をメディアライブラリにアップロードし、アップロードフォルダーのFTPビューを更新しましょう。

ご覧のとおり、functions.phpファイルを介して4つのデフォルトの画像サイズを削除するようにWordPressに指示することで、メディアフォルダーにこれらを作成するためにWordPressを停止しました。今後、テーマコードをこのように簡単に更新することで、不要な画像サイズでサーバーが詰まることはありません。これにより、スペースが節約され、画像のアップロードプロセスが高速化されます。

メディアライブラリから古い画像サイズを削除する

アップロードした新しい画像に対して4つのデフォルトの画像サイズが作成されていないことに気付いたかもしれませんが、以前にアップロードされた画像には、8つのバリエーションすべてがメディアライブラリに保存されています。おそらく、これがまったく新しいWebサイトでない限り、数百ではないにしても数十の画像がアップロードされ、すべての場合でこれらの「余分な」サイズが作成されます。じゃあ何をすればいいの？

最初に確認するのは、これらの画像が必要ですか？ WordPressで生成された画像の削除に進む前に、これらのサイズが使用されていないことを確認する必要があります。ブログの投稿、注目の画像、およびWebサイトの他の部分をチェックして、古いサイズがまだ使用されていないことを確認してください。

古い画像のこれらの不要なファイルを処理するための優れた方法は、サムネイルを再生成する強制プラグインを使用することです。このプラグインは、それらを通過して自動的に削除します。プラグインをインストールしてアクティブ化し、プラグインメニュー内から[すべてのサムネイルを再生成]ボタンを押します（[ツール]-> [サムネイルの強制再生成]）。

FTPメディアフォルダビューを更新すると、デフォルトのWordPress画像がなくなっていることがわかります。良い！

デフォルトのサイズで同じ結果を得るもう1つの簡単な方法は、wp-adminの[設定]>[メディア]から寸法値を「0」に変更することです。次に、次のようなものが表示されます。

別の方法は、update_option（'SIZE_w / h'、0）;を変更することです。 Functions.php内。後でテーマを更新するときに変更が失われないように、子テーマのfunctions.phpファイルに対してこれを行うことを忘れないでください。

 update_option( 'thumbnail_size_h', 0 ); update_option( 'thumbnail_size_w', 0 ); update_option( 'medium_size_h', 0 ); update_option( 'medium_size_w', 0 ); update_option( 'large_size_h', 0 ); update_option( 'large_size_w', 0 );

この更新が行われると、（WP Admin内からの）メディア設定のディメンション値を反映するものが0に更新されたことがわかります。

追加のテーマ画像サイズを削除する

これで、WordPressコアによって生成されたデフォルトの画像を正常に処理できました。これで、テーマ（この場合はTwenty Twenty）によって作成された画像に進んで取り組むことができます。デフォルトの画像サイズのように、これらは不要であると結論付けた場合は、テーマコードにいくつかの変更を加えて、WordPressが将来これらのサイズを生成しないようにすることができます。

これを行うには、initフックとremove_image_sizeコア関数を使用します。以下のコードをコピーして、functions.phpファイルに貼り付けます。ここにあるようにTwentyTwentyテーマを使用していない場合は、「post-thumbnail」と「twentytwenty-fullscreen」の名前をアクティブなテーマの名前に置き換えます。

 function remove_extra_image_sizes() { foreach ( get_intermediate_image_sizes() as $size ) { if ( in_array( $size, array( 'post-thumbnail', 'twentytwenty-fullscreen' ) ) ) { remove_image_size( $size ); } } } add_action('init', 'remove_extra_image_sizes');

ここで新しい画像をアップロードし、FTPクライアントを介してアップロードフォルダを確認すると、「post-thumbnail」と「twentytwenty-fullscreen」を除くすべてのサイズが生成されていることがわかります。

独自のカスタム画像サイズを追加する

WordPressで冗長な画像サイズを削除する方法を学習したので、テンプレートのニーズに応じて独自のカスタム画像サイズを追加する方法を見てみましょう。

必要な画像サイズをどのように決定しますか？

特徴画像が上にあり、投稿コンテンツが下にある、幅960pxのメイン列を持つWebサイトがあるとします。その場合、希望する画像サイズは960pxになります。 CSSのパディングがある場合は、それも計算することを忘れないでください。たとえば、親要素に合計20pxのパディングがある場合、画像の適切な幅は920pxになります。 960pxから左のパディングの20pxを引いたものから右のパディングの20pxを引いたものです。

新しい画像サイズを登録する

新しいサイズを登録する簡単な方法の1つは、WordPressが提供する組み込みのadd_image_size（）関数を使用することです。関数の構造は次のとおりです。

 add_image_size( name, width, height, crop )

これらのオプションのほとんどは自明です。最後のオプション（切り抜き）は、WordPressがサイズ変更時に画像の比率を尊重するかどうか、または画像を切り抜くかどうかを指定します。切り抜きオプションが「true」に設定されている場合、画像は切り抜かれ、比率は尊重されません。切り抜きオプションをスキップするかfalseに設定すると、画像の比率が尊重されます。

これを実際に試して、2089×1175ピクセルのテスト画像を使用して結果を監視してみましょう。

まず、このコードを追加しましょう。

 add_image_size( 'new-post-thumb', 220, 180 );

これにより、cropが設定されていない（false）ため、uploadsフォルダーに220×180ではなくpost2-feature-image-220x124.jpgが生成されます。以下を挿入した場合も同じことが起こります。

 add_image_size( 'new-post-thumb', 220, 180, false );

ただし、このように切り抜きをtrueに設定すると、画像post2-feature-image-220x180.jpgが保存されます。

 add_image_size( 'new-post-thumb', 220, 180, true );

最後に、作物の配置方法を指定できます。 'true'の代わりに、'left'または'top'、あるいはその両方のようなオプションを使用してください。

 add_image_size( 'custom-size', 220, 220, array( 'left', 'top' ) );

配列は切り抜きの場所を指定します。使用できる値は次のとおりです。

x_crop_positionの場合：「左」、「中央」、または「右」。
y_crop_positionの場合：「top」、「center」、または「bottom」。

いずれの場合も、出力は元の画像の異なる部分になります。ここではいくつかの例を示します。

テーマにコードを追加して手動でこれを行う代わりに、SimpleImageSizesなどのプラグインを使用することもできます。それでも、このようなプラグインを使用している場合でも、舞台裏で何が起こっているのかを理解することは役に立ちます。

結論

WordPressで正しい画像サイズを使用することは重要です。ウェブサイトのビューアに鮮明で高解像度の画像を表示することで高品質のユーザーエクスペリエンスを保証するだけでなく、読み込み時間とサーバーの使用量にも大きな影響を与えます。この記事が、WordPressの画像サイズの重要性と、画像サイズをオーバーライド、削除、または拡張してWebサイトのニーズを満たす方法、およびWordPressを停止することでサーバースペースを大幅に節約できる方法を理解するのに役立つことを願っています。アップロードする各画像の不要なサイズを生成します。