Wordpress画像アップロード時に複数サイズを自動生成させない方法

画像アップロードと同時に複数サイズの画像が生成され、不要画像も出てくるので容量を圧迫する原因になります。

管理画面やfunctions.phpに追記する事で、全ての画像の自動生成をコントロールする事ができます。

srcsetタグを有効にしてWEBページの読込速度を向上させるためにも、主要なサイズは生成するようにしましょう。

画像アップ時に複数サイズ画像が自動生成される

Wordpressで画像をアップロードする場合、オリジナル画像以外に様々なサイズの画像が自動的に作成されますよね。

この中には、実際には使われない画像もたくさんあるはずです。

第一、不要なものも存在するのが気持ち悪い人もいるでしょう。

本記事ではこれらの使わないサイズ画像について、アップロードする際に自動作成されない様にする設定をご紹介します。

様々な方法あり

自動生成させない方法は様々あり、Wordpress管理画面上でメイン種類の画像生成を簡単に止める事ができます。

それ以外にfunctions.phpに追記をすれば、全ての種類の画像生成をコントロール（生成ON・OFF）する事ができます。

しかし単に生成を止めるだけではいけません。最低限度のサイズは残すべきです。

それはレスポンシブルデザインに必要な、srcsetタグを有効にするためです。

本記事では生成を止めるデメリット、およびその理由についても解説していきます。

何もしないで画像をアップした場合

まずは何も設定をしないまま画像をアップロードし、どれくらいの種類の画像が自動生成されるのか確認してみます。

管理画面のメディアから、ローカルに保存されている適当な画像（元サイズ1920×1151）をアップロードしてみました。

サーバー上の画像ファイルを確認

次にFTPソフトで、このアップロードした画像ファイルを確認してみます。

上記の様に複数種類の画像が生成されることがわかりますね。

※上の画像では7種ですが、アップする画像のサイズによってもっと増える場合もあります。

実際にこれらを全て使うかどうかはテーマや設定によりますが、使われない画像は出てきます。

何もしないままだと画像がアップされる度に不要ファイルも増え、サーバー容量を圧迫する原因になる事は確かです。

サムネイル・中・大サイズの画像を生成させない

ではまずは管理画面からできる操作をご案内しましょう。

Wordpressの管理画面上から、画像アップロード時に「サムネイル」「中」「大」に対応した画像を作成しない設定ができます。

メディアページでの設定

管理画面「設定」メニューから「メディア」をクリックしましょう。

この画面では以下の基本的なサイズ指定が可能になっています。

上記のサイズ指定によって縮小された画像が、画像のアップ時に自動生成される訳です。

数値を0にする

この「幅と高さ」の欄をそれぞれ全て「0」に設定すれば、そのサイズに対応した画像は自動作成されなくなります。

上の様に「サムネイル」「中」「大」の値をそれぞれ「0」に設定してみます。

サーバー上の画像ファイルを確認

では自動生成される画像がどう変わるかを確認してみましょう。

先ほどアップした画像をメディアから削除し、改めて新しく先程と同じ画像（1920×1151）をアップロードしました。

その上でアップされた画像ファイルをFTPで確認してみましょう。

FTPで見た画像ファイル

上記3つが作成されていない事がわかりますね。

先程のメディアのページで「サムネイル」と「中」「大」の各画像サイズを「0」にしたため、生成されなくなった訳です。

これでかなりの画像生成省略につながりますね。

まだ自動生成ファイルは存在する

設定メニューの「メディア設定」にてサムネイル・中・大の画像については自動作成しないようにできました。

しかしFTPを確認する限り、まだ別のサイズ画像が自動生成されているのがわかります。

これらのサイズは、Wordpress管理画面の設定変更だけでは自動生成を止める事はできません。

functions.phpへの追記が必要になります。

functions.phpの編集

以下よりfunctions.phpへの追記方法をご紹介します。

functions.phpは、管理画面の外観メニューの「テーマエディタ」から直接編集する事ができます。

ダウンロードしたテーマ内のfunctions.phpを編集して、FTPで上書きしても良いでしょう。

functions.phpでの設定（add_image_size）

functions.phpの編集操作をする前に、一つしておく事があります。

先程の設定メニューからメディアのページを開いて、先ほど「0」にした数値を元に戻しておきましょう。

元に戻しておけば、7種の画像生成される状態になります。

add_image_size

それでは実際に追記していきましょう。

まずは、add_image_sizeをfunctions.phpに記述して、指定画像のサイズを0にする方法です。

先程のWordpress管理画面の「メディア設定」と同じ操作になりますが、以下の方法だと4種をブロックできます。

functions.phpへの追記

add_image_size('thumbnail', 0, 0); add_image_size('medium', 0, 0); add_image_size('large', 0, 0); add_image_size('medium_large', 0, 0);

「サムネイル」等は生成するサイズが変わることがありますが、サイズ名称で記述できるので問題はありません。

中と大の中間がmedium_largeとなり、元々の3つと合わせて合計4種の画像の生成を切ったことになります。

サーバー上の画像ファイルを確認

それでは確認してみましょう。

その上でアップしていた画像をメディアから削除し、改めて新しく先程と同じ画像（1920×1151）をアップロードします。

アップされた画像をFTPで確認してみましょう。

FTPで見た画像ファイル

上記の様に3種だけ残り、4種の画像ファイルが作成されていない事がわかりますね。

functions.phpでの設定（add_filter）

functions.phpに追記する方法はもう一つあります。

それが「add_filter」を使った記述です。

add_filter

add_filterは、条件にマッチするフィルター機能を掛ける命令です。

以下は対象となる条件（画像サイズ種類）を全く指定しない事で、画像生成を一切させない様にしています。

functions.phpへの追記

function not_create_image($sizes){ $sizes = array(); return $sizes; } add_filter('intermediate_image_sizes_advanced', 'not_create_image');

array();の中を空白にすることで実現しています。

サーバー上の画像ファイルを確認

その上でアップしていた画像をメディアから削除し、改めて新しく先程と同じ画像（1920×1151）をアップロードします。

アップされた画像をFTPで確認してみましょう。

FTPで見た画像ファイル

上記の様に、アップした実物ファイル以外の画像は一切生成されなくなります。

自動生成する画像をコントロールする

実は画像の自動生成がされるのには、明確な理由があります（理由は後述します）。

ですので画像の自動生成は全てOFFにするのではなく、削除する画像を選択するべきです。

削除する画像の指定

具体的には、先程のadd_filterの対象となる条件を入れて実現させます。

先程のfunctions.phpにあった「$sizes = array();」の部分を、次のように変更します。

以下はほとんどのサイズが入っていますが、実際には必要なサイズの記述を入れない様にしましょう。

functions.phpの編集

function not_create_image($sizes){ unset($sizes['thumbnail']); unset($sizes['medium']); unset($sizes['medium_large']); unset($sizes['post-thumbnail']); unset($sizes['1536x1536']); return $sizes; } add_filter('intermediate_image_sizes_advanced', 'not_create_image');

上記には「large」の記述がありません。large画像のみ自動生成させる設定となっています。

サーバー上の画像ファイルを確認

それでは確認してみましょう。

アップしていた画像をメディアから削除し、改めて新しく先程と同じ画像（1920×1151）をアップロードします。

そのうえでアップされた画像をFTPで確認してみます。

FTPで見た画像ファイル

上記の様にオリジナル画像以外に、largeのサイズ画像が生成されている事がわかります。

2つのカスタム設定

上の削除指定のうち上3つは共通の指定ですが、下2つは選択テーマ環境などで変わってきます。

それが「post-thumbnailの825x510画像」と「1536×921画像」です。

4行目…unset($sizes['post-thumbnail']);

本記事で削除操作をする際に利用しているテーマは「twentyfive」です。

このテーマのfunctions.php内に、サムネイル画像サイズ「post-thumbnail」の指定があります。

add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 825, 510, true );

825px×510pxの画像が生成されるのは、この設定が有効になっているためです。

4行目の様に「post-thumbnail」を指定すれば生成されません。

5行目…unset($sizes['1536x1536']);

さらに1536×921画像が残りがちです。

これはWordpress標準の生成サイズなので、必要ない場合は任意に止めてやる必要があります。

この時実際の画像サイズを指定するのではなく、「1536×1536」と指定する必要があります。

サイズ通りに「1536×921」と指定しても設定が効かず、画像が生成されてしまうためです。

自動生成を停止させるデメリット

このように画像をアップロードする際の自動生成は、簡単に停止する事ができる事がわかりました。

しかし自動生成の停止には大きなデメリットがあります。

それはHTMLのsrcset属性タグが出力されなくなる事です。

srcsetは最適な画像サイズを選別する

srcsetは、PCやスマホ等端末の画面サイズ（解像度）に合わせて適切な画像を出し分けるタグです。

Wordpressには標準搭載の機能ですが、今回の様に自動生成画像を全切りするとこのsrcsetが全く効かなくなります。

srcsetが無効という事は、どんな画面幅の端末でも「常にフルサイズの画像データ」が読み込まれる様になります。

WEBページの読込速度が遅くなる危険性

WEBページにおいて、画像は動画の次に重たいファイルですよね。

毎回フルサイズの画像を読み込んで、ページ表示速度が遅くなる事はWEBサイトにとって致命的です。

ユーザーエクスペリエンスはもちろん、Googleの検索評価も落としてしまう事になります。

自動生成には、srcsetを活用して画像を最適化し、表示速度を上げるという利点があるのです。

最低限度の種類は残すべき

WEBサイトの表示速度の遅延とサーバー容量圧迫の回避、どちらが大切かは明白ですよね。

※確かに引っ越しする時は大変ですが、そんなに頻繁にしませんしね。

画像を最適化するsrcset機能を維持するためにも、必要最低限のサイズで生成画像を残すべきです。

ある程度カバーできるサイズ帯を意識して、横幅300px（サムネイル）、768px（中）、1500px（大）の3種類程度は用意しておきましょう。

つまり自動生成される画像は、Wordpress管理画面の「メディア」設定で賄えますので数値をきちと入れましょう。

一押し人気コーナー紹介