The file size of the image that you should pay attention to to speed up the page display.

It’s not the vertical and horizontal size of the image! !! The size of the file! !!

Nowadays, if you upload a photo taken with a digital camera or smartphone as it is, it will often be a megabyte-class file size.

WordPress adjusts it to 90% fineness as standard at the same time as uploading, and based on that, creates an image of “large” “medium” “small” + the size specified by the plugin or theme … ・ What did you do, and the image you casually inserted in your post is displayed. It’s great ~ It’s wonderful ~.

However, if there are many such images … The overall page size will be amazing, which will slow down the display and make processing difficult on sites with a large number of accesses. In some cases, the waiting time may increase.

The file size of the image is an important factor for optimizing the page display, but you can check it by clicking the edit link of each image. But it’s a little troublesome to check each one, right? Therefore, the theme of this time is to see the file size information in the media list.

If you display the file size by this method, it will look like the red frame part of the image below.

You can create a page with higher usability by finding the image “It’s a little big file size” in the list and replacing it with a lighter image by making full use of plug-ins.

We are planning to publish another information on how to compress and replace images, so please look forward to it!

This article introduces the code (reference at the end of the sentence) that I searched for and arrived at almost as it is, so I will publish it as my personal memorandum.

In the latter half, we will introduce how to display the vertical and horizontal sizes of the image together with the file size, so please use the one you need.

How to display the file size in the media list

This customization is easily achieved by adding code to the theme’s functions.php. However, the theme functions.php is a very important file for WordPress, so what is functions.php? I think it’s safer to see them off.

The code to add is as follows

/***** Show file size on media *****/
/** Add column to media list **/
if ( !function_exists( 'hab_media_columns_filesize' ) ):
function hab_media_columns_filesize( $posts_columns ) {
	$posts_columns['filesize'] = __( 'File Size', 'my-theme-text-domain' );

	return $posts_columns;
}
add_filter( 'manage_media_columns', 'hab_media_columns_filesize' );
endif;

/** Show size **/
if ( !function_exists( 'hab_media_custom_column_filesize' ) ):
function hab_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( 'manage_media_custom_column', 'hab_media_custom_column_filesize', 10, 2 );
endif;

/** Column width adjustment **/
if ( !function_exists( 'hab_filesize_column_filesize' ) ):
function hab_filesize_column_filesize() {
	echo
	'<style>
		.fixed .column-filesize {
			width: 10%;
		}
	</style>';
}
add_action( 'admin_print_styles-upload.php', 'hab_filesize_column_filesize' );
endif;

If you add the above code to the end of the theme’s functions.php, you don’t have to do anything else.

Will be displayed as.

This time it’s a simple customization, but making management convenient in this way is also the first step to mastering WordPress.

reference:WordPressメディアライブラリのファイルサイズ管理列

How to display both file size (KB) + vertical and horizontal size of image (px)

In addition to the file size (capacity) mentioned above, I was able to display the width and height of the image below it, so I will introduce it as an additional item.

Use the following code to implement it.

Replace it exactly with the code introduced above (if you simply add it, the code introduced above will take precedence).

/***** Show file size on media *****/
/* Add column to user-defined media list */
if ( !function_exists( 'hab_media_columns_filesize' ) ){
function hab_media_columns_filesize( $posts_columns ) {
	$posts_columns['filesize'] = __( 'File Size', 'ha-basic' );

	return $posts_columns;
}
}

/* Show user-defined size */
if ( !function_exists( 'hab_media_custom_column_filesize' ) ){
function hab_media_custom_column_filesize( $column_name, $post_id ) {
	if ( 'filesize' !== $column_name ) {
		return;
	}

	$bytes = filesize( get_attached_file( $post_id ) );
    $meta = wp_get_attachment_metadata($id);
	
		echo size_format( $bytes, 2 ).'<br>';
           echo 'W'.$meta['width'].' x h'.$meta['height'].'(px)';
}
}

/* Adjusting the width of user-defined columns */
if ( !function_exists( 'hab_filesize_column_filesize' ) ){
function hab_filesize_column_filesize() {
	echo
	'<style>
		.fixed .column-filesize {
			width: 12%;
		}
	</style>';
}
}

/* activation */
add_filter( 'manage_media_columns', 'hab_media_columns_filesize' );
add_action( 'manage_media_custom_column', 'hab_media_custom_column_filesize', 10, 2 );	
add_action( 'admin_print_styles-upload.php', 'hab_filesize_column_filesize' );</code></pre>

Once the code is enabled, the media list will look like the one shown.

The page that was used as a reference for function implementation

This function is based on the code introduced on the following page.

How to Add Dimensions Column to WordPress Media Library

Show file size in WordPress Media library

Update (change) history of this article