WordPress Images: Everything You Need To Know

ScreamingFrog

The easiest way is to download ScreamingFrog and do a crawl of your website. ScreamingFrog is free for websites with less than 500 URL’s – if you have more than that you will need to purchase a license, or you can ask us to run a crawl for you for $50.

Once the crawl is complete you can then filter to view only images that are over 100KB so you can see your largest images and where they are located on your website. Below is a screenshot of how it looks.

Finding Oversized Images in WordPress Option 1

This is a much slower way – but free! You can click on your images one by one in the admin to see the File Size in the details box as shown below. (To do it this way we recommend you have your media gallery set to the GRID option located to the left of your media filters).

But doing it this way allows you to use the arrows to easily move back and forth – and you can click the EDIT IMAGE button below the image to do the resizing. You can see below that this image is 144kb and is 1200 by 433 pixels – if we are happy with it we can hit the arrow right and move on to the next.

Finding Oversized Images In WordPress Option 2

Alternately – if you feel comfortable adding some code to your functions.php file, you can add the code below which will show a column in the media area with the image sizes for you to see them a little easier. To see the image sizes you will need to use the LIST style media option instead of the grid format.

Once you add the code to your functions file you will see a column called FILE SIZE as shown in the image below. Then you can just scroll through your media pages to see which ones need to be resized.

add_filter( 'manage_media_columns', 'td_media_columns_filesize' );
/**
 * Filter the Media list table columns to add a File Size column.
 *
 * @param array $posts_columns Existing array of columns displayed in the Media list table.
 * @return array Amended array of columns to be displayed in the Media list table.
 */
function td_media_columns_filesize( $posts_columns ) {
	$posts_columns['filesize'] = __( 'File Size', 'text-domain' );
	return $posts_columns;
}
add_action( 'manage_media_custom_column', 'td_media_custom_column_filesize', 10, 2 );
/**
 * Display File Size custom column in the Media list table.
 *
 * @param string $column_name Name of the custom column.
 * @param int    $post_id Current Attachment ID.
 */
function td_media_custom_column_filesize( $column_name, $post_id ) {
	if ( 'filesize' !== $column_name ) {
		return;
	}
	$bytes = filesize( get_attached_file( $post_id ) );
	echo size_format( $bytes, 2 );
}
add_action( 'admin_print_styles-upload.php', 'td_filesize_column_filesize' );
/**
 * Adjust File Size column on Media Library page in WP admin
 */
function td_filesize_column_filesize() {
	echo
	'<style>
		.fixed .column-filesize {
			width: 10%;
		}
	</style>';
}

Resizing Images

Option 1: Resizing Images Within WordPress

1. Go to the MEDIA area in your WordPress admin
2. Hover over the image you want to edit and click the EDIT link
3. Click the EDIT IMAGE button under the image
4. Enter the maximum width or height in the Scale Image box (we typically suggest about 1200px as a max width – but this will vary based on your website needs)
5. Click Scale
6. Go to the page or post in WordPress admin that has the image
7. Replace the image on the page with the one you just resized.

You can even crop your images in this area if you want more control. Just click the crop tool, drag the lines to your crop area and hit the crop tool again. If it looks good hit save.

If you are updated to the latest version of WordPress 5.3, below outlines exactly what happens when you upload an image. For this example we are using a huge image that came right out of the camera so you can see how the latest version of WordPress handles the resizing for you.

The quick list of what happens is:

1. You upload your image and if it is over 2560 pixels in height or width (you can change this setting) – WordPress will scale it down for you to 2560 pixels.
2. WordPress will store the original upload, the scaled down version, some new responsive images and all other sizes your theme calls for in your uploads folder.
3. WordPress will display the appropriately uploaded size in the various locations on your website.

Below we will address each of these items in more detail and will also outline some tips for properly using images throughout your website.

I uploaded an image named cleo.jpg to my website which measured 5616 x 3744 and is 5.9MB in size.

In the image below you can see what WordPress did to that image to scale it down. You can see the new file name is now cleo-scaled.jpg, the image now measures 2560 x 1707 and is 439KB in size.

That is a HUGE savings right off the bat and we actually are big fans of this new addition to WordPress for those that do not properly optimize their images before uploading them.

All other images that our website creates are also stored in the uploads folder on our server as you can see below.

cleo.jpg is my original upload (you will not see this image available in WordPress anywhere, it is stored on the server only. You can use code to pull it into your theme if you need to)
cleo-scaled.jpg is what WordPress scaled it to as a max usage size
cleo-300×300.jpg is WordPress media setting thumbnail
cleo-450×300.jpg is WordPress media setting medium
cleo-900×600.jpg is WordPress media settings large

Additional Sizes New In 5.3
cleo-768×512.jpg is WordPress created medium_large size
cleo-2048×1365.jpg is WordPress created
cleo-1536×1024.jpg is WordPress created

The new images being added are in addition to the images your website media settings is set to which you can see by going to SETTINGS > MEDIA in your WordPress admin.

Here you will see image size options for the following:

• Thumbnails – typically set to 150px square
• Medium – typically set to 300px maximum size (width or height)
• Large – typically set to 1024px maximum size (width or height)

Below are the settings that are in my media settings for 2 Dogs Media.

If 2560 pixels is not big enough for your needs, there is a filter you can add to your functions file to create a larger scaled size of the image.

Copy the below function into your functions.php file and it will modify your image size to adjust to 4096 pixels instead of the default 2560 pixels.

Just change the 4096 pixels to whatever size you want the scaled version to be – you can make it smaller too!

function td_big_image_size_threshold( $threshold, $imagesize, $file, $attachment_id ) {
    return 4096;
}
add_filter( 'big_image_size_threshold', 'td_big_image_size_threshold', 10, 4 );

You can see in the image below our scaled image is now 4096 pixels instead of the default 2560 pixels.