Home > Help Center > Applications > WordPress > WordPress Media Settings

WordPress Media Settings

The Settings Media Screen controls the various settings related to images that are used in writing posts and pages.

wordpress media settings

Image sizes

wordpress media settings

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:

wordpress media settings

Let's take a look at the box below:

wordpress media settings

The dropdown menu allows us to select between different image sizes where 150x150 and 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 525x507?

Let's open the upload directory with FTP program to check what images are been processed by WordPress.

wordpress media settings

In addition to the sizes we've listed, we see three more images - 1280x1200, 100x100 and 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:

wordpress media settings

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 525x507 pixels?

Theme Image Functions

Click on Appearance > Editor and on the Edit Themes screen in the right bar click on Theme Functions (functions.php).

Scroll down slowly and find the same place as the image below:

wordpress media settings

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 function:

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 2000x1200px.

Let's check if that is true?

We are going to upload three images:

  • alsatian2200w.jpg – 2200x900 (should be cropped to 2000x900)
  • alsatian1400h.jpg – 1800x1400 (should be cropped to 1800x1200)
  • alsatian.jpg – 2560x1882 (should be cropped to 2000x1200)

Let's see what we've got:

wordpress media settings

We have copies with exact dimensions, we also have a thumbnail avatar copy 100x100 of each image created from the next add_image_size() function:

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).

wordpress media settings

wordpress media settings

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:

wordpress media settings

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:

wordpress media settings

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:

wordpress media settings

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 )

wordpress media settings

function twentyseventeen_post_thumbnail_sizes_attr( $attr, $attachment, $size )

wordpress media settings

Let's check in the FTP how many images were processed this time – only four instead of seven in the previous example:

wordpress media settings

When you delete an image from Media Library all copies of the original file are also deleted.

Summary

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

Still not finding what you're looking for?

Contact our support team with any additional questions or concerns.

Contact support