diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..7d08e22
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,13 @@
+{
+	"extends": [ "plugin:@wordpress/eslint-plugin/recommended" ],
+	"env": {
+		"browser": true
+	},
+	"rules": {
+		"import/no-extraneous-dependencies": [ "off" ],
+		"jsdoc/no-undefined-types": [ "off" ],
+		"jsdoc/check-line-alignment": [ "warn" ],
+		"jsdoc/check-tag-names": [ "warn" ],
+		"prettier/prettier": [ "off" ]
+	}
+}
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 1c4e984..46882a5 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -41,6 +41,6 @@ jobs:
     uses: ./.github/workflows/node.yml
     secrets: inherit
 
-  php:
-    uses: ./.github/workflows/php.yml
-    secrets: inherit
+  # php:
+  #   uses: ./.github/workflows/php.yml
+  #   secrets: inherit
diff --git a/altis-media-weight.php b/altis-media-weight.php
index 4994e11..69d9321 100644
--- a/altis-media-weight.php
+++ b/altis-media-weight.php
@@ -16,74 +16,8 @@
 	exit; // Exit if accessed directly.
 }
 
-/**
- * Connect namespace functions to actions and hooks.
- */
-function bootstrap() : void {
-	add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\\register_block_plugin_editor_scripts' );
-	add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\\maybe_warn_on_script_debug_mode' );
-}
-// Initialize plugin.
-bootstrap();
-
-/**
- * Registers the block plugin script bundle.
- */
-function register_block_plugin_editor_scripts() {
-	$asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');
-
-	if ( $asset_file === false ) {
-		return;
-	}
+require_once __DIR__ . '/inc/namespace.php';
+require_once __DIR__ . '/inc/assets.php';
 
-	wp_enqueue_script(
-		'hm-media-weight',
-		plugins_url( 'build/index.js', __FILE__ ),
-		$asset_file['dependencies'],
-		$asset_file['version']
-	);
-
-	wp_localize_script(
-		'hm-media-weight',
-		'mediaWeightData',
-		[
-			'mediaThreshold' => apply_filters( 'altis_media_weight_threshold', 2.50 ),
-		]
-	);
-}
-
-/**
- * Show a warning if SCRIPT_DEBUG is off while we're running the dev server.
- */
-function maybe_warn_on_script_debug_mode() {
-	// Only render this notice in the post editor.
-	if ( ( get_current_screen()->base ?? '' ) !== 'post' ) {
-		return;
-	}
-
-	$asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');
-
-	if ( ! in_array( 'wp-react-refresh-runtime', $asset_file['dependencies'] ?? [], true ) ) {
-		// Either not in hot-reload mode, or plugin isn't currently built.
-		return;
-	}
-
-	if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {
-		// SCRIPT_DEBUG configured correctly.
-		return;
-	}
-
-	ob_start();
-	?>
-	wp.domReady( () => {
-		wp.data.dispatch( 'core/notices' ).createNotice(
-			'warning',
-			"<?php echo esc_attr__( 'HM Media Weight plugin is running in hot-reload mode, but SCRIPT_DEBUG is not set.', 'hm-media-weight' ); ?>",
-			{
-				isDismissible: false,
-			}
-		);
-	} );
-	<?php
-	wp_add_inline_script( 'wp-data', (string) ob_get_clean() );
-}
+bootstrap();
+Assets\bootstrap();
diff --git a/inc/assets.php b/inc/assets.php
new file mode 100644
index 0000000..3c8f9c1
--- /dev/null
+++ b/inc/assets.php
@@ -0,0 +1,191 @@
+<?php
+/**
+ * Asset-related functionality.
+ */
+
+declare( strict_types=1 );
+
+namespace HM_Media_Weight\Assets;
+
+/**
+ * Connect namespace functions to actions and hooks.
+ */
+function bootstrap() : void {
+	add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\\register_block_plugin_editor_scripts' );
+	add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\\maybe_warn_on_script_debug_mode' );
+}
+
+/**
+ * Registers the block plugin script bundle.
+ */
+function register_block_plugin_editor_scripts() {
+	$asset_file_path = plugin_dir_path( __DIR__ ) . 'build/index.asset.php';
+	$asset_file = include( $asset_file_path );
+
+	if ( $asset_file === false ) {
+		return;
+	}
+
+	$asset_uri = plugins_url( 'build/index.js', __DIR__ );
+
+	// Check whether a runtime chunk exists, and inject it as a dependency if it does.
+	if ( includes_hmr_dependency( $asset_file['dependencies'] ) ) {
+		// Try to infer and depend upon our custom runtime chunk (see webpack.config.js).
+		$runtime_handle = detect_and_register_runtime_chunk( $asset_file_path, $asset_uri );
+		if ( ! empty( $runtime_handle ) ) {
+			$asset_file['dependencies'][] = $runtime_handle;
+		}
+	}
+
+	wp_enqueue_script(
+		'hm-media-weight',
+		$asset_uri,
+		$asset_file['dependencies'],
+		( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? time() : $asset_file['version']
+	);
+
+	wp_localize_script(
+		'hm-media-weight',
+		'mediaWeightData',
+		[
+			/**
+			 * Filter the threshold at which a post is deemed "too heavy" due to media weight.
+			 *
+			 * @param float $threshold Maxmimum number of megabytes of media permitted per post.
+			 */
+			'mediaThreshold' => apply_filters( 'hm_media_weight_threshold', 2.50 ),
+			/**
+			 * Filter the expected maximum width (in pixels) for a desktop featured image.
+			 */
+			'featuredImageSize' => apply_filters( 'hm_media_weight_featured_image_size_slug', 'large' ),
+		]
+	);
+}
+
+/**
+ * Show a warning if SCRIPT_DEBUG is off while we're running the dev server.
+ */
+function maybe_warn_on_script_debug_mode() {
+	if ( wp_get_environment_type() !== 'local' ) {
+		return;
+	}
+
+	if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {
+		// SCRIPT_DEBUG configured correctly.
+		return;
+	}
+
+	// Only render this notice in the post editor.
+	if ( ( get_current_screen()->base ?? '' ) !== 'post' ) {
+		return;
+	}
+
+	$asset_file = include( plugin_dir_path( __DIR__ ) . 'build/index.asset.php');
+
+	if ( ! in_array( 'wp-react-refresh-runtime', $asset_file['dependencies'] ?? [], true ) ) {
+		// Either not in hot-reload mode, or plugin isn't currently built.
+		return;
+	}
+
+	ob_start();
+	?>
+	wp.domReady( () => {
+		wp.data.dispatch( 'core/notices' ).createNotice(
+			'warning',
+			"<?php echo esc_attr__( 'HM Media Weight plugin is running in hot-reload mode, but SCRIPT_DEBUG is not set.', 'hm-media-weight' ); ?>",
+			{
+				isDismissible: false,
+			}
+		);
+	} );
+	<?php
+	wp_add_inline_script( 'wp-data', (string) ob_get_clean() );
+}
+
+/**
+ * Check whether a given dependencies array includes any of the handles for HMR
+ * runtimes that WordPress will inject by default.
+ *
+ * @param string[] $dependencies Array of dependency script handles.
+ * @return bool Whether any dependency is a react-refresh runtime.
+ */
+function includes_hmr_dependency( array $dependencies ) : bool {
+	return array_reduce(
+		$dependencies,
+		function( $depends_on_runtime, $dependency_script_handle ) {
+			return $depends_on_runtime || $dependency_script_handle === 'wp-react-refresh-runtime';
+		},
+		false
+	);
+}
+
+/**
+ * Check for a runtime file on disk based on the path of the assets file which
+ * requires hot-reloading.
+ *
+ * @param string $asset_file_path Path to a script's asset.php file.
+ * @param string $script_uri      Public URI of the script file, used to infer
+ *                                the public URI of the runtime.
+ * @return string URI to a valid runtime.js file, or empty string if not found.
+ */
+function infer_runtime_file_uri( $asset_file_path, $script_uri ) : string {
+	// Heuristic: the runtime is expected to be in the same folder, or a parent
+	// folder one level up from the target script.
+	$expected_runtime_file = dirname( $asset_file_path ) . '/runtime.js';
+	if ( is_readable( $expected_runtime_file ) ) {
+		// Runtime is a sibling to the target file.
+		return str_replace(
+			// The contents after the final / will be the script filename.
+			// Replace that with runtime.js to load the sibling URI.
+			preg_replace( '#.*/#', '', $script_uri ),
+			'runtime.js',
+			$script_uri
+		);
+	}
+
+	$expected_runtime_file = dirname( $asset_file_path, 2 ) . '/runtime.js';
+	if ( is_readable( $expected_runtime_file ) ) {
+		// Runtime is in the parent folder of the target file.
+		return str_replace(
+			// Trim off one additional folder of hierarchy from the script URI
+			// to get the URI of the runtime file in the parent folder.
+			preg_replace( '#.*/([^/]+/[^/]+)$#', '$1', $script_uri ),
+			'runtime.js',
+			$script_uri
+		);
+		return $expected_runtime_file;
+	}
+
+	// No runtime found in the asset directory or asset's parent directory.
+	return '';
+}
+
+/**
+ * Try to identify the location of a runtime chunk file relative to a requested
+ * asset, register that chunk as a script if it hasn't been registered already,
+ * then return the script handle for use as a script dependency.
+ *
+ * @param string $asset_file_path Path to a script's asset.php file.
+ * @param string $script_uri      Public URI of the script file, used to infer
+ *                                the public URI of the runtime.
+ * @return string Handle of registered script runtime, or empty string if not found.
+ */
+function detect_and_register_runtime_chunk( string $asset_file_path, string $script_uri ) : string {
+	$runtime_uri = infer_runtime_file_uri( $asset_file_path, $script_uri );
+	if ( empty( $runtime_uri ) ) {
+		return '';
+	}
+
+	// We may have multiple runtimes active, so add a path hash into the handle.
+	$runtime_handle = sprintf( 'runtime-%s', md5( $runtime_uri ) );
+	if ( ! wp_script_is( $runtime_handle, 'registered' ) ) {
+		wp_register_script(
+			$runtime_handle,
+			$runtime_uri,
+			[],
+			filemtime( $asset_file_path )
+		);
+	}
+
+	return $runtime_handle;
+}
diff --git a/inc/namespace.php b/inc/namespace.php
new file mode 100644
index 0000000..3917add
--- /dev/null
+++ b/inc/namespace.php
@@ -0,0 +1,137 @@
+<?php
+/**
+ * Main plugin namespace.
+ */
+
+namespace HM_Media_Weight;
+
+const ATTACHMENT_SIZE_CRON_ID = 'hm-media-weight-attachment-check';
+const ATTACHMENT_SIZE_META_KEY = 'intermediate_image_filesizes';
+
+/**
+ * Connect namespace functions to actions and hooks.
+ */
+function bootstrap() : void {
+	add_action( 'init', __NAMESPACE__ . '\register_attachment_meta' );
+	add_action( 'add_attachment', __NAMESPACE__ . '\\schedule_file_size_check' );
+	add_action( ATTACHMENT_SIZE_CRON_ID, __NAMESPACE__ . '\\store_intermediate_file_sizes' );
+	add_action( 'rest_prepare_attachment', __NAMESPACE__ . '\\lookup_file_sizes_as_needed_during_rest_response', 10, 3 );
+}
+
+/**
+ * Registers the _image_file_sizes meta field for the attachment post type.
+ */
+function register_attachment_meta() {
+	register_post_meta( 'attachment', ATTACHMENT_SIZE_META_KEY, [
+		'type'         => 'object',
+		'description'  => 'File sizes for all intermediate image sizes of an attachment.',
+		'single'       => true,
+		'show_in_rest' => [
+			'schema' => [
+				'type' => 'object',
+				'additionalProperties' => [
+					'type' => 'integer',
+				],
+			],
+		],
+		'auth_callback' => function() {
+			return current_user_can( 'edit_posts' );
+		},
+	] );
+}
+
+/**
+ * Schedules a cron job to check file sizes for the uploaded attachment.
+ *
+ * @param int $attachment_id The ID of the uploaded attachment.
+ */
+function schedule_file_size_check( $attachment_id ) {
+	if ( ! in_array( get_post_mime_type( $attachment_id ), [ 'image/jpeg', 'image/png', 'image/gif' ], true ) ) {
+		return;
+	}
+
+	if ( ! wp_next_scheduled( ATTACHMENT_SIZE_CRON_ID, [ $attachment_id ] ) ) {
+		// Ensure the cron job is scheduled for later as fallback.
+		wp_schedule_single_event( time(), ATTACHMENT_SIZE_CRON_ID, [ $attachment_id ] );
+	}
+}
+
+/**
+ * Logs the file sizes for each image size of the uploaded attachment.
+ *
+ * @param int $attachment_id The ID of the uploaded attachment.
+ */
+function store_intermediate_file_sizes( $attachment_id ) {
+	$image_sizes = get_intermediate_image_sizes();
+	$file_sizes  = [];
+
+	foreach ( $image_sizes as $size ) {
+		$image_url = wp_get_attachment_image_url( $attachment_id, $size );
+
+		if ( ! $image_url ) {
+			continue;
+		}
+
+		$response = wp_remote_head( $image_url );
+
+		if ( is_wp_error( $response ) ) {
+			continue;
+		}
+
+		$headers = wp_remote_retrieve_headers( $response );
+		if ( isset( $headers['content-length'] ) ) {
+			$file_sizes[ $size ] = (int) $headers['content-length'];
+		}
+	}
+
+	// Save the file sizes to the attachment meta.
+	update_post_meta( $attachment_id, ATTACHMENT_SIZE_META_KEY, $file_sizes );
+}
+
+/**
+ * Retrieves the file sizes for an attachment.
+ *
+ * @param int $attachment_id The ID of the attachment.
+ * @return array|null The array of file sizes keyed by URL, or null if not available.
+ */
+function get_file_sizes( $attachment_id ) {
+	return get_post_meta( $attachment_id, ATTACHMENT_SIZE_META_KEY, true ) ?: [];
+}
+
+/**
+ * Conditionally request and fill in missing file size meta before fulfilling
+ * an edit-context REST request for an image.
+ *
+ * @param WP_REST_Response $response The response object.
+ * @param WP_Post          $post     The original attachment post.
+ * @param WP_REST_Request  $request  Request used to generate the response.
+ * @return WP_REST_Response The filtered response.
+ */
+function lookup_file_sizes_as_needed_during_rest_response( $response, $post, $request ) {
+	if ( $request->get_param( 'context' ) !== 'edit' ) {
+		return $response;
+	}
+
+	if ( ! empty( $response->data['meta'][ ATTACHMENT_SIZE_META_KEY ] ?? null ) ) {
+		return $response;
+	}
+
+	$meta_field_included = rest_is_field_included(
+		'meta.' . ATTACHMENT_SIZE_META_KEY,
+		get_post_type_object( 'attachment' )->get_rest_controller()->get_fields_for_response( $request ) ?? []
+	);
+	if ( ! $meta_field_included ) {
+		return $response;
+	}
+
+	// Update post meta and then append the stored values to the response.
+	store_intermediate_file_sizes( $post->ID );
+	$response->data['meta'][ ATTACHMENT_SIZE_META_KEY ] = get_file_sizes( $post->ID );
+
+	// Ensure we consistently return object-shaped JSON, not `[]` for empty.
+	if ( empty( $response->data['meta'][ ATTACHMENT_SIZE_META_KEY ] ) && isset( $response->data['meta'][ ATTACHMENT_SIZE_META_KEY ] ) ) {
+		$response->data['meta'][ ATTACHMENT_SIZE_META_KEY ] = (object) [];
+	}
+
+	return $response;
+}
diff --git a/src/assets/scale-icon.svg b/src/assets/scale-icon.svg
new file mode 100644
index 0000000..b0055e4
--- /dev/null
+++ b/src/assets/scale-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 102.72" style="enable-background:new 0 0 122.88 102.72" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><path class="st0" d="M65.61,20.91v72.74h35.63c0.38,0,0.68,0.31,0.68,0.69v7.7c0,0.38-0.31,0.69-0.68,0.69H22.84 c-0.38,0-0.69-0.31-0.69-0.69v-7.7c0-0.38,0.31-0.69,0.69-0.69h35.63l0-72.71c-3.1-1.08-5.56-3.53-6.64-6.63H29.3v3.43 c0,0.38-0.31,0.68-0.68,0.68h-5.78c-0.38,0-0.69-0.31-0.69-0.68v-3.43h-5.73c-0.44,0-0.8-0.31-0.8-0.68V7.84 c0-0.38,0.36-0.69,0.8-0.69h35.43C53.33,2.99,57.31,0,61.99,0c4.68,0,8.66,2.99,10.14,7.16h35.53c0.44,0,0.8,0.31,0.8,0.69v5.78 c0,0.38-0.36,0.68-0.8,0.68h-6.46v3.43c0,0.38-0.31,0.68-0.68,0.68h-5.78c-0.38,0-0.69-0.31-0.69-0.68v-3.43H72.16 C71.09,17.38,68.67,19.81,65.61,20.91L65.61,20.91z M99.66,22.3l22.91,40.48c0.2,0.35,0.29,0.73,0.28,1.1h0.02c0,0.05,0,0.1,0,0.15 c0,9.64-11.35,17.46-25.35,17.46c-13.85,0-25.1-7.65-25.34-17.15c-0.04-0.16-0.06-0.34-0.06-0.51c0-0.44,0.14-0.86,0.37-1.2 l23.43-40.43c0.59-1.02,1.89-1.37,2.91-0.78C99.2,21.65,99.48,21.95,99.66,22.3L99.66,22.3z M99.75,31.11v30.6h17.32L99.75,31.11 L99.75,31.11z M95.67,61.7V31.16L77.96,61.7H95.67L95.67,61.7z M27.54,22.3l22.91,40.48c0.2,0.35,0.29,0.73,0.28,1.1h0.02 c0,0.05,0,0.1,0,0.15c0,9.64-11.35,17.46-25.35,17.46c-13.85,0-25.1-7.65-25.34-17.15C0.02,64.19,0,64.02,0,63.84 c0-0.44,0.14-0.86,0.37-1.2L23.8,22.21c0.59-1.02,1.89-1.37,2.91-0.78C27.08,21.65,27.36,21.95,27.54,22.3L27.54,22.3z M27.63,31.11v30.6h17.32L27.63,31.11L27.63,31.11z M23.54,61.7V31.16L5.84,61.7H23.54L23.54,61.7z M61.99,6.07 c2.59,0,4.69,2.1,4.69,4.69c0,2.59-2.1,4.69-4.69,4.69c-2.59,0-4.69-2.1-4.69-4.69C57.3,8.17,59.4,6.07,61.99,6.07L61.99,6.07z"/></g></svg>
\ No newline at end of file
diff --git a/src/edit.js b/src/edit.js
deleted file mode 100644
index a127175..0000000
--- a/src/edit.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Retrieves the translation of text.
- *
- * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * React hook that is used to mark the block wrapper element.
- * It provides all the necessary props like the class name.
- *
- * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
- */
-import { useBlockProps } from '@wordpress/block-editor';
-
-/**
- * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
- * Those files can contain any CSS code that gets applied to the editor.
- *
- * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
- */
-import './editor.scss';
-
-/**
- * The edit function describes the structure of your block in the context of the
- * editor. This represents what the editor will render when the block is used.
- *
- * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
- *
- * @return {Element} Element to render.
- */
-export default function Edit() {
-	return (
-		<p { ...useBlockProps() }>
-			{ __(
-				'HM Media Weight – hello from the editor!',
-				'hm-media-weight'
-			) }
-		</p>
-	);
-}
diff --git a/src/index.js b/src/index.js
index 116649b..516c30d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import { __, sprintf } from '@wordpress/i18n';
-import { media } from '@wordpress/icons';
 import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/editor';
 import { PanelRow, PanelBody, Button } from '@wordpress/components';
 import { registerPlugin, unregisterPlugin } from '@wordpress/plugins';
@@ -8,10 +7,14 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useEntityRecords } from '@wordpress/core-data';
 
-const { mediaThreshold } = window.mediaWeightData;
+import { ReactComponent as ScalesIcon } from './assets/scale-icon.svg';
+
+const { mediaThreshold, featuredImageSize } = window.mediaWeightData;
 
 const PLUGIN_NAME = 'hm-media-weight';
 const SIDEBAR_NAME = PLUGIN_NAME;
+const MB_IN_B = 1024 * 1024;
+const KB_IN_B = 1024;
 
 const getMediaBlocks = ( blocks ) => blocks.reduce(
 	( mediaBlocks, block ) => {
@@ -27,14 +30,15 @@ const getMediaBlocks = ( blocks ) => blocks.reduce(
 );
 
 const useMediaBlocks = () => {
-	const blocks = useSelect( ( select ) => select( blockEditorStore ).getBlocks() );
+	const mediaBlocks = useSelect( ( select ) => getMediaBlocks( select( blockEditorStore ).getBlocks() ) );
 	const featuredImageId = useSelect( ( select ) => select( 'core/editor' ).getEditedPostAttribute( 'featured_media' ) );
+
+	/* eslint-disable no-shadow */
 	const { imageIds, videoIds, blocksByAttributeId } = useMemo( () => {
-		const mediaBlocks = getMediaBlocks( blocks );
 		const imageIds = [];
 		const videoIds = [];
 		const blocksByAttributeId = {};
-		for ( let block of mediaBlocks ) {
+		for ( const block of mediaBlocks ) {
 			if ( ! block.attributes?.id ) {
 				continue;
 			}
@@ -49,7 +53,9 @@ const useMediaBlocks = () => {
 			imageIds.push( featuredImageId );
 		}
 		return { imageIds, videoIds, blocksByAttributeId };
-	}, [ blocks, featuredImageId ] );
+	}, [ mediaBlocks, featuredImageId ] );
+	/* eslint-enable no-shadow */
+
 	const imageRecords = useEntityRecords( 'postType', 'attachment', {
 		per_page: imageIds.length,
 		include: imageIds,
@@ -58,20 +64,23 @@ const useMediaBlocks = () => {
 		per_page: videoIds.length,
 		include: videoIds,
 	} )?.records || [];
+
 	return {
 		attachments: imageRecords.concat( videoRecords ),
 		featuredImageId,
 		blocksByAttributeId,
+		mediaBlocks,
 		imageCount: imageIds.length,
 		videoCount: videoIds.length,
 	};
 };
 
-const HMMediaWeightSidebar = ( ...args ) => {
+const HMMediaWeightSidebar = () => {
 	const {
 		attachments,
 		featuredImageId,
 		blocksByAttributeId,
+		mediaBlocks,
 		imageCount,
 		videoCount
 	} = useMediaBlocks();
@@ -79,8 +88,9 @@ const HMMediaWeightSidebar = ( ...args ) => {
 	let imagesSize = 0;
 	let videosSize = 0;
 
+	// eslint-disable-next-line no-shadow
 	const DisplayTotal = ( { imagesSize, videosSize } ) => {
-		const total = ( imagesSize + videosSize ).toFixed( 2 );
+		const total = ( ( imagesSize + videosSize ) / MB_IN_B ).toFixed( 2 );
 		let sizeColor;
 
 		if ( total >= 0 && total <= ( mediaThreshold / 2 ) ) {
@@ -94,6 +104,7 @@ const HMMediaWeightSidebar = ( ...args ) => {
 		const warningMsg = total >= mediaThreshold ? (
 			<p className="description">
 				{ sprintf(
+					/* translators: %f: Maximum allowed size (in megabytes) for all media on page. */
 					__( 'Warning! The media in this page exceeds the recommended threshold of %fmb', 'hm-media-weight' ),
 					mediaThreshold
 				) }
@@ -102,8 +113,6 @@ const HMMediaWeightSidebar = ( ...args ) => {
 
 		return (
 			<>
-				<p>{ __( 'Images total', 'hm-media-weight' ) }: { imagesSize.toFixed( 2 ) }mb</p>
-				<p>{ __( 'Videos total', 'hm-media-weight' ) }: { videosSize.toFixed( 2 ) }mb</p>
 				<p>
 					<strong>
 						{ __( 'Total media size', 'hm-media-weight' ) }: { ' ' }
@@ -119,11 +128,53 @@ const HMMediaWeightSidebar = ( ...args ) => {
 						</span>
 					</strong>
 				</p>
+				<p>{ __( 'Images total', 'hm-media-weight' ) }: { ( imagesSize / MB_IN_B ).toFixed( 2 ) }mb</p>
+				<p>{ __( 'Videos total', 'hm-media-weight' ) }: { ( videosSize / MB_IN_B ).toFixed( 2 ) }mb</p>
 				{ warningMsg }
 			</>
 		);
 	}
 
+	const attachmentSizeDetails = attachments.map( ( attachment ) => {
+		const associatedBlockClientId = blocksByAttributeId[ attachment.id ];
+		const blockButton = attachment.id !== featuredImageId ? (
+			<Button
+				className="components-button is-compact is-secondary"
+				onClick={ () => selectBlock( associatedBlockClientId ) }
+			>
+				{ __( 'Select associated block', 'hm-media-weight' ) }
+			</Button> ) : '';
+
+		let type = attachment.media_type === 'image' ? __( 'Image', 'hm-media-weight' ) : __( 'Video', 'hm-media-weight' );
+		if ( attachment.id === featuredImageId ) {
+			type = __( 'Featured image', 'hm-media-weight' );
+		}
+		let mediaSize = attachment.media_details.filesize;
+
+		if ( attachment.media_type === 'image' ) {
+			const requestedSize = attachment.id !== featuredImageId
+				? mediaBlocks.find( ( block ) => block.clientId === associatedBlockClientId )?.attributes?.sizeSlug
+				: ( featuredImageSize || 'full' );
+			// Swap in the actual measured size of the target image, if available.
+			mediaSize = attachment.meta?.intermediate_image_filesizes?.[ requestedSize ] || mediaSize;
+			imagesSize = imagesSize + mediaSize;
+		} else {
+			videosSize = videosSize + mediaSize;
+		}
+
+		const thumbnail = attachment.media_type === 'image'
+			? ( attachment?.media_details?.sizes?.thumbnail?.source_url || attachment.source_url )
+			: null;
+
+		return {
+			attachment,
+			thumbnail,
+			type,
+			mediaSize,
+			blockButton
+		};
+	} );
+
 	return (
 		<>
 			<PluginSidebarMoreMenuItem target={ SIDEBAR_NAME }>
@@ -131,51 +182,48 @@ const HMMediaWeightSidebar = ( ...args ) => {
 			</PluginSidebarMoreMenuItem>
 			<PluginSidebar className={ SIDEBAR_NAME } name={ SIDEBAR_NAME } title={ __( 'Media Weight', 'hm-media-weight' ) }>
 				<PanelBody
-					initialOpen={ false }
+					initialOpen={ true }
 					title={ __( 'Total Media Items', 'hm-media-weight' ) }
 				>
 					<p>Images: { imageCount }</p>
 					<p>Videos: { videoCount }</p>
+
+					<DisplayTotal
+						imagesSize={ imagesSize }
+						videosSize={ videosSize }
+					/>
 				</PanelBody>
 
 				<PanelBody
 					initialOpen={ false }
 					title={ __( 'Individual Media Items', 'hm-media-weight' ) }
 				>
-					{ attachments.map( ( attachment ) => {
-						const blockButton = attachment.id !== featuredImageId ? (
-							<Button
-								className="components-button is-compact is-secondary"
-								onClick={ () => selectBlock( blocksByAttributeId[ attachment.id ] ) }
-							>
-								{ __( 'Select associated block', 'hm-media-weight' ) }
-							</Button> ) : '';
-
-						let type = attachment.media_type === 'image' ? __( 'Image', 'hm-media-weight' ) : __( 'Video', 'hm-media-weight' );
-						if ( attachment.id === featuredImageId ) {
-							type = __( 'Featured image', 'hm-media-weight' );
-						}
-						const mediaSize = attachment.media_details.filesize /  1000000;
-
-						if ( attachment.media_type === 'image' ) {
-							imagesSize = imagesSize + mediaSize;
-						} else {
-							videosSize = videosSize + mediaSize;
-						}
+					{ attachmentSizeDetails.map( ( { attachment, thumbnail, type, mediaSize, blockButton } ) => {
 
 						return (
 							<PanelRow key={ `media-details-${ attachment.id }` }>
 								<div>
+									{ thumbnail ? (
+										<img
+											src={ thumbnail }
+											alt=""
+											style={ { maxWidth: '100%' } }
+										/>
+									) : null }
 									<p>
 										<strong>
-											{ type }: { mediaSize.toFixed( 2 ) }mb
+											{ type }: {
+												( mediaSize < MB_IN_B )
+													? `${ ( mediaSize / KB_IN_B ).toFixed( 2 ) }kb`
+													: `${ ( mediaSize / MB_IN_B ).toFixed( 2 ) }mb`
+											}
 										</strong>
 									</p>
 									<p>
 										Attachment ID: { attachment.id }<br />
 										<small><a href={ attachment.link }>Go to the attachment post &rsaquo;</a></small>
 									</p>
-									<details style={ { margin: '0.5rem 0 1rem' } }>
+									<details style={ { display: 'none', margin: '0.5rem 0 1rem' } }>
 										<summary>{ __( 'View entity record JSON', 'hm-media-weight' ) }</summary>
 										<small>
 											<pre>
@@ -191,23 +239,13 @@ const HMMediaWeightSidebar = ( ...args ) => {
 						);
 					} ) }
 				</PanelBody>
-
-				<PanelBody
-					initialOpen
-					title={ __( 'Total Media Size', 'hm-media-weight' ) }
-				>
-					<DisplayTotal
-						imagesSize={ imagesSize }
-						videosSize={ videosSize }
-					/>
-				</PanelBody>
 			</PluginSidebar>
 		</>
 	);
 };
 
 registerPlugin( PLUGIN_NAME, {
-	icon: media,
+	icon: ScalesIcon,
 	render: HMMediaWeightSidebar,
 } );