Resizing WordPress Images

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.