WordPress Media Settings
The Settings Media Screen controls the various settings related to images that are used in writing posts and pages.
The sizes listed below determine the maximum dimensions in pixels to use when inserting an image into the body of a post or a page.
When you upload an image WordPress will automatically create copies of the original image with these sizes. No matter medium and large image settings look like square the
width / height ratio of the original image will be kept on resizing.
Let's insert an image into post to see how these settings work.
Open existing post or create new one and click Add Media button. On the Insert Media screen you are provided with options to either use an image from Media Library or to upload new image.
Click on the image and enter caption, alt tag and description:
Let's take a look at the box below:
The dropdown menu allows us to select between different image sizes where
300x290 are obviously the thumbnail and medium image from Settings > Media screen,
1280x1236 is the size of the uploaded image, but what to say about the image with dimensions
Let's open the upload directory with FTP program to check what images are been processed by WordPress.
In addition to the sizes we've listed, we see three more images -
768x742. Why did wordpress create these images?
Because they are defined in the active theme twentyseventeen.
Let's save the post and load it in the browser. Right click on the image and select Inspect element from the menu:
It turns out that WordPress uses the resized
1024x989 copy but how does it calculate the width of 525 pixels, according to which the image is resized to
Theme Image Functions
Click on Appearance > Editor and on the Edit Themes screen in the right bar click on Theme Functions (
Scroll down slowly and find the same place as the image below:
The active theme defines content width of 525 pixels, and upon this value all images are resized dinamically.
// Set the default content width. $GLOBALS['content_width'] = 525;
Notice the first
add_image_size( 'twentyseventeen-featured-image', 2000, 1200, true );
If we upload image wider than 2000 pixels WordPress will create a copy with exact width of 2000px and if we upload image longer than 1200px – a copy with exact height of 1200px will be created. If both sizes are bigger the image will be cropped to exact dimensions of
Let's check if that is true?
We are going to upload three images:
- alsatian2200w.jpg –
2200x900(should be cropped to
- alsatian1400h.jpg –
1800x1400(should be cropped to
- alsatian.jpg –
2560x1882(should be cropped to
Let's see what we've got:
We have copies with exact dimensions, we also have a thumbnail avatar copy
100x100 of each image created from the next
add_image_size( 'twentyseventeen-thumbnail-avatar', 100, 100, true );
If we add a featured image to the same post it must be the huge
alsatian-2000x1200.jpg (according to the function values).
Does it make sense to enter any values for thumbnails, medium and large images since WordPress uses the Theme settings instead of Media settings?
Click Settings > Media and enter zero in all boxes:
Click Save Changes button.
Delete the image
labrador.jpg from the Media Library and then upload the same image again. Insert it in the same post again and check the dropdown menu with image sizes:
Now we are not provided with any other options except the original file size.
Load again the post in the browser, right click on the image and click Inspect element in the dropdown menu:
Now we see different parameters in the source code and it looks like WordPress is using another method to resize the same image because the page looks absolutely the same.
Let's look further down the
functions.php file – as you can see in the below images there are two more functions that define image sizes and actually enhance responsive image functionality of the theme:
function twentyseventeen_content_image_sizes_attr( $sizes, $size )
function twentyseventeen_post_thumbnail_sizes_attr( $attr, $attachment, $size )
Let's check in the FTP how many images were processed this time – only four instead of seven in the previous example:
When you delete an image from Media Library all copies of the original file are also deleted.
The quality WordPress themes include complete image support and we do not need to define any image sizes in the Settings > Media for theme to work properly. It is safe to enter zeroes in the boxes on Media screen.
Now you know where to check what image sizes the theme will use - Appearance > Editor > Theme Functions.
If the theme defines content max-width we can define large image with the same width in Media screen and this image will be used by WordPress.
But if you just leave the defaults in Media screen the WordPress will generate three useless copies of every uploaded image and this is complete waste of disk space and processing resource.
We hope this article will help you understand better how WordPress works with images.
Images downloaded from: pixabay.com
#wordpress #images #settings