画像をアップロードした時に自動で作成される画像の種類

WordPress では画像を記事に追加するために画像をアップロードすると WordPress に画像が保存されます。この時、オリジナルの画像だけが保存されるわけではなく、オリジナルの画像を決められたサイズに縮小した画像がいくつか自動的に作成されます。ここでは画像をアップロードした時に作成される画像の種類について解説します。

※ 画像の自動生成を停止する方法については「画像アップロード時に自動生成される画像の中で不要なものを作成しない」を参照されてください。

(Last modified: )

アップロードした画像が保存されるディレクトリ

最初に WordPress で画像や動画をアップロードした時に保存されるディレクトリについて確認しておきます。 

+- wp-admin
+- wp-includes
+- wp-content
    +- languages
    +- plugins
    +- themes
    +- uploads
        +- 2020
            +- 04
            +- 05
            +- 06

アップロードされた画像や動画の保存先は「/wp-content/uploads/」ディレクトリです。このディレクトリの下には年及び月毎にディレクトリが作成されており、例えば 2020 年 06 月にアップロードされたファイルは「/wp-content/uploads/2020/06/」ディレクトリの下に保存されます。

自動で作成される画像について

それでは実際に画像を WordPress にアップロードして、どのようなファイルが自動で作成されるのかを確認してみます。それでは新しい記事を作成し、「画像」ブロックを追加してください。

自動で作成される画像について(1)

「アップロード」をクリックして画像を WordPress にアップロードします。サイズの異なる 3 つの画像ファイルをアップロードして試してみます。

画像サイズが 4800 x 3200 の画像をアップロードした場合

最初にファイル名が「ham01.jpg」で画像サイズが 4800 x 3200 の画像をアップロードしました。

自動で作成される画像について(2)

それではどのようなファイルが自動で作成されたのかを確認します。 WordPress をインストールしたディレクトリの下にある「/wp-content/uploads/2020/06/」ディレクトリを確認します。

自動で作成される画像について(3)

オリジナルの「hama01.jpg」の他に全部で 9 個のファイルが自動で作成されています。 

ham01-150x150.jpg
ham01-300x200.jpg
ham01-768x512.jpg
ham01-1024x683.jpg
ham01-1200x800.jpg
ham01-1536x1024.jpg
ham01-1980x1320.jpg
ham01-2048x1365.jpg
ham01-scaled.jpg
ham01.jpg

すべての画像はオリジナルの画像を指定したサイズに縮小したものです。例えば ham01-768x512.jpg はオリジナル画像を 768 x 512 サイズに縮小したものです。 ham01-1980x1320.jpg はオリジナル画像を 1980 x 1320 サイズに縮小したものです。オリジナルの幅と高さの比率を維持したまま縮小されますが、 ham01-150x150.jpg は正方形の形にトリミングされて作成されます。

この中の ham01-150x150.jpg は画像サイズとして「サムネイル」を選択した時に使用されるファイルで、 ham01-300x200.jpg は画像サイズとして「中」を選択した時に使用されるファイルで、 ham01-1024x683.jpg は画像サイズとして「大」を選択した時のファイルです。

ファイル名に「scaled」が付いている ham01-scaled.jpg はオリジナルの画像の幅または高さが 2560px よりも大きいサイズの場合にだけ作成されるファイルです。オリジナル画像の幅又は高さの大きい方のサイズを 2560px になるように縮小した画像で、画像サイズとして「フルサイズ」を選択した場合にこのファイルが使用されます。

WordPress 5.3 において幅または高さが 2500px 以上の画像については幅またはた高さが 2500px になるように縮小された画像が作成されて「フルサイズ」を選択した時に使用されるようになりました。このファイルには「xxx-scaled.jpg」のような名前が付けられます。詳しくは WordPress の公式記事である「Introducing handling of big images in WordPress 5.3」を参照されてください。

いったん画像ブロックを削除し、アップロードした画像をメディアライブラリの画面から削除しました。なおメディアライブラリで該当の画像を削除すると、自動で作成されたすべての画像が削除されます。

画像サイズが 1800 x 1200 の画像をアップロードした場合

次にファイル名が「ham02.jpg」で画像サイズが 1800 x 1200 の画像をアップロードしました。

自動で作成される画像について(4)

それではどのようなファイルが自動で作成されたのかを確認します。 WordPress をインストールしたディレクトリの下にある「/wp-content/uploads/2020/06/」ディレクトリを確認します。

自動で作成される画像について(5)

オリジナルの「ham02.jpg」の他に全部で 6 個のファイルが自動で作成されています。 

ham02-150x150.jpg
ham02-300x200.jpg
ham02-768x512.jpg
ham02-1024x683.jpg
ham02-1200x800.jpg
ham02-1536x1024.jpg
ham02.jpg

先ほどよりも自動で作成された画像の数が少ないのは、オリジナル画像のサイズよりも大きい画像は作成されないためです。なおオリジナルの画像の幅および高さがどちらも 2560px よりも小さいので「scaled」が付いている画像は作成されません。画像サイズとしてフルサイズを選択するとオリジナル画像の「ham02.jpg」ファイルが使用されます。

画像サイズが 600 x 400 の画像をアップロードした場合

次にファイル名が「rab01.jpg」で画像サイズが 600 x 400 の画像をアップロードしました。

自動で作成される画像について(6)

それではどのようなファイルが自動で作成されたのかを確認します。 WordPress をインストールしたディレクトリの下にある「/wp-content/uploads/2020/06/」ディレクトリを確認します。

自動で作成される画像について(7)

オリジナルの「rab01.jpg」の他に全部で 2 個のファイルが自動で作成されています。 

rab01-150x150.jpg
rab01-300x200.jpg
rab01.jpg

オリジナル画像のサイズが 600x400 のため、画像サイズとして「大」を選択した時のファイルが作成されていません(「大」を選ぶと 1024px に縮小した画像を作成するため)。その為、画像ブロックで使用する画像のサイズとして「大」は選択することができません。

自動で作成される画像について(8)

全部で 3 種類のサイズの画像をアップロードした時に、どのような画像ファイルが自動で作成されるのかを確認しました。「サムネイル」「中」「大」に対応するサイズの画像を作成するほかに、オリジナルの画像のサイズまたは 2560px のサイズまでの画像がいくつか作成されます。「サムネイル」「中」「大」以外の画像が何に使われるのかははっきり分かりませんでした。

「サムネイル」「中」「大」を選択した時の画像サイズを変更する

記事の編集画面で選択できる画像のサイズは「サムネイル」「中」「大」「フルサイズ」があります。この中でも「サムネイル」「中」「大」をそれぞれ選択した時に使用される画像のサイズは変更することができます。例えばサムネイルのサイズとして 200 x 200 に変更すると、画像をアップロードした時に 200 x 200 のサイズの画像が自動で作成されることになります。

画像サイズの設定を行うには、画面左側「設定」の中にある「メディア」をクリックしてください。

「サムネイル」「中」「大」を選択した時の画像サイズを変更する(1)

「メディア設定」画面が表示されます。

「サムネイル」「中」「大」を選択した時の画像サイズを変更する(2)

「サムネイル」「中」「大」に対する画像サイズを設定できます。「サムネイル」に関しては指定した幅と高さにトリミングされ、「中」と「大」については幅と高さの比率を変えずに、それぞれ上限のサイズに収まる最大のサイズに縮小されます。

それでは例として「サムネイル」を幅 200 高さ 200 、「中」を幅の上限 400 高さの上限 400 、「大」を幅の上限 1200 高さの上限 1200 に変更します。

「サムネイル」「中」「大」を選択した時の画像サイズを変更する(3)

設定を変更したら画面下部の「変更を保存」をクリックしてください。

「サムネイル」「中」「大」を選択した時の画像サイズを変更する(4)

これで画像サイズの設定が変更されました。

それではあらためてファイル名が「ham01.jpg」で画像サイズが 4800 x 3200 の画像をアップロードしたあと、どのようなファイルが自動で作成されているのかを確認します。

自動で作成される画像について(8)

オリジナルの「hama01.jpg」の他に全部で 8 個のファイルが自動で作成されています。 

ham01-200x200.jpg
ham01-400x267.jpg
ham01-768x512.jpg
ham01-1200x800.jpg
ham01-1536x1024.jpg
ham01-1980x1320.jpg
ham01-2048x1365.jpg
ham01-scaled.jpg
ham01.jpg

「サムネイル」「中」「大」に対応する画像として新しく設定した画像サイズに対応した ham01-200x200.jpg 、 ham01-400x267.jpg 、 ham01-1200x800.jpg の3つのファイルが作成されています。

なおメディア設定で変更したサイズが反映されるのは、変更後にアップロードした画像に対してだけです。既にアップロード済みの画像が、新しいサイズに対応した画像を作り直すことはありません。

-- --

画像をアップロードした時に作成される画像の種類について解説しました。

( Written by Tatsuo Ikura )

プロフィール画像

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。