In this post with an admittedly bulky title I would like to give an insight into the automatic conversion of images into the defined image sizes, which takes place in WordPress. To put it more simply: What actually happens in the background when you upload an image to the WordPress media library?
WordPress creates several images in different image formats and sizes for each uploaded image in the media library. The original original image is converted and saved in several files.
The whole point is to optimally display images in the correct size and format on the website. By generating smaller images, the file size of the images is reduced, which improves the loading times of your website.
Standard WordPress image sizes
WordPress defines three different sizes for images:
- Thumbnail: 150 x 150 pixels
- Medium: 300 x 300 pixels
- Large: 1024 x 1024 pixels
You can change the standard sizes in the WordPress backend under Settings> Media .
In addition, the image is of course also saved in its original size, which corresponds to the size
full . In addition to the standard image sizes of the core, themes and plugins can also define and add their own sizes.
Difference between image resizing and image cropping
When converting images to the specified sizes, WordPress distinguishes between two different cropping methods: Image Resizing (Soft Crop) and Image Cropping (Hard Crop).
That sounds terribly complicated at first.
So a first look at the Wikipedia definition of cropping :
Cropping is the cutting of the edges of an image in order to adopt the image format in another format without creating black borders or distorting the image.
For each created image size, in addition to the width and height in pixels, the cropping method is also specified: soft crop or hard crop.
So far so good. Now let's look at the exact differences.
Image resizing (soft crop)
The first method maintains the proportions of the original image. Regardless of whether the picture comes in 16:10, 4: 3 or 2: 5 format - the converted pictures will have the same format.
WordPress only reduces the images accordingly, which is why we also speak of image resizing. So the image is not really cropped, but only reduced in size.
For the standard sizes, WordPress automatically uses the soft crop mode for the sizes
large . This is why the options are also named "Maximum Width" and "Maximum Height".
Image cropping (hard crop)
In hard crop mode, the image is converted to the specified width and height and, if necessary, cropped. The proportions of the original image are therefore not necessarily retained, but changed under certain circumstances.
A cropping of the image is always necessary if the format of the uploaded image deviates from the format of the defined image size. If the image is cropped, parts of the original image are also lost here. Depending on the picture format, the picture will be cut off left & right or top & bottom.
In addition to cropping the image to the correct format, the image is of course also reduced to the specified size.
Note: By the way, the cropping method can be selected for preview images in the media settings; Hard Image Cropping is activated by default (check box: Crop the preview image to the exact size ).
Conversion of uploaded images into images of different sizes
To illustrate the image sizes and cropping methods, I would now like to show two examples of an uploaded image and the files generated from it.
A new image image.jpg with a size of 1200 x 900 pixels (format 4: 3) is uploaded.
WordPress creates the following image files in the media library or in the / wp-content / uploads / folder.
- image.jpg (original)
- image-150 × 150.jpg (preview image)
- image-300 × 225.jpg (medium)
- image-1024 × 768.jpg (Large)
First, the image is saved in the original. A separate image is then created for each defined size, with the width and height specified in the name.
The preview image has a width and height of 150 pixels and hard cropping activated. The picture has therefore been cut to this size and now has a new format (1: 1).
To do this, the picture was cut left and right. The chain on the left is therefore missing in our preview image.
The soft crop mode is used for the medium size. The format of 4: 3 is therefore retained. The image has been reduced to a width of 300 pixels, the height proportionally adjusted to 225 pixels (not 300px).
A second picture test.jpg with a size of 600 x 1200 pixels (format 1: 2) is uploaded.
As a result, we can now find these image files in the / wp-content / uploads / folder.
- test.jpg (original)
- test-150 × 150.jpg (preview image)
- test-150 × 300.jpg (medium)
- test-512 × 1024.jpg (large)
Here, too, the preview image is cut to fit exactly.
The middle picture is only reduced in size again. Due to the vertical format of 1: 2, the image was reduced to a height of 300 pixels and the width was adjusted proportionally to 150 pixels.
These image sizes are therefore also available for inserting the images in the visual editor.
Relevance for featured images
The conversion of images to different image sizes affects all uploaded images, not just featured images. Nevertheless, in the context of the article series, I wanted to go into the topic of image conversion with this article for a better understanding, because featured images are also directly influenced by it.
For featured images, additional, individual sizes are usually defined by the theme. In contrast to inserting in the visual editor, the theme determines the size used in the frontend, not the user. We will deal with the exact technical implementation of featured images in the theme in the next article in the series.
Why you should use sufficiently large images
WordPress will reduce and crop uploaded images, but generally cannot enlarge images. Enlarged images would only lose their image quality and would appear blurred.
For a theme with a defined size of 1200 x 900 pixels for featured images, images of at least this size must be uploaded. Otherwise there may be white areas left in the layout that the too small image cannot fill.
Defined image sizes can therefore also be understood as minimum sizes.