Awwwards
TopDesignKing

Media Column with File Dimensions and Size

Your ability to manage and optimize images before uploading them to Media gallery will have a significant impact on the speed of your WordPress site, whether it uses WooCommerce or not.

The image you upload will be compressed and cropped by WordPress, but it doesn’t mean you shouldn’t edit it first.

What’s important for us is the actual file size (kb / mb).

You can use a service like TinyPNG, ShortPixel, Smush, or something similar. In either case, make sure your image is optimized, ideally before uploading.

add_filter( 'manage_media_columns', 'weszty_web_create_filesize_column' );
function weszty_web_create_filesize_column( $posts_columns ) {
    $posts_columns['filesize'] = esc_html__( 'Size & Dimensions', 'wesztyweb' );
    return $posts_columns; 
}

add_action( 'manage_media_custom_column', 'wesztyweb_get_filesize_data', 10, 2 );
function wesztyweb_get_filesize_data( $column_name, $post_id ) {
    if ( 'filesize' !== $column_name ) return;

    $picture_data = wp_get_attachment_metadata( $post_id );
    $bytes = filesize( get_attached_file( $post_id ) );

    echo size_format( $bytes, 2 );
    echo '<br />';
    echo $picture_data['width'].' x '.$picture_data['height'];
}

add_action( 'admin_print_styles-upload.php', 'wesztyweb_filesize_column_css' );
function wesztyweb_filesize_column_css() {
    echo '<style> .fixed .column-filesize { width: 12%; color:red; } </style>'; 
}

Don't be weird.

Would you like more information or do you have a question?

scroll
10%
Drag View Close play