WordPress: Optimize images using WP-CLI

While working on my sister’s site, I noticed that every image was available in 10 different formats caused by 19 different images size definitions.

I do have to say that my sister is a professional photographer who keeps blogging regularly since 2012. Throughout the years she uploaded 6000+ images. Due to the various images sizes the upload folder of her site used 10 GB storage.

To save storage, I’ve analyzed which of the defined images sizes are actually used and which one can be replaced and removed. In the first step, I set the height and width of the obsolete images to zero pixels by adding the following snippet to my functions.php:

<?php
// Overwrite default image sizes.
add_action('init', 'smntcs_remove_image_sizes');
function smntcs_remove_image_sizes() {
	add_image_size( 'course_archive_thumbnail', 0 );
	add_image_size( 'course_single_thumbnail', 0 );
	add_image_size( 'lesson_archive_thumbnail', 0 );
	add_image_size( 'lesson_single_thumbnail', 0 );
	add_image_size( 'portfolio_horizontal', 0 );
	add_image_size( 'portfolio_slider', 0 );
	add_image_size( 'portfolio_vertical', 0 );
	add_image_size( 'shop_catalog', 0 );
	add_image_size( 'shop_thumbnail', 0 );
	add_image_size( 'woocommerce_gallery_thumbnail', 0 );
	add_image_size( 'woocommerce_single', 0 );
	add_image_size( 'woocommerce_thumbnail', 0 );
}

In the next step, I deleted the obsolete images sizes one by one using the following WP-CLI calls:

wp media regenerate --image_size=course_archive_thumbnail --yes
wp media regenerate --image_size=course_single_thumbnail --yes
wp media regenerate --image_size=lesson_archive_thumbnail --yes
wp media regenerate --image_size=lesson_single_thumbnail --yes
wp media regenerate --image_size=portfolio_horizontal --yes
wp media regenerate --image_size=portfolio_slider --yes
wp media regenerate --image_size=portfolio_vertical --yes
wp media regenerate --image_size=shop_catalog --yes
wp media regenerate --image_size=shop_thumbnail --yes
wp media regenerate --image_size=woocommerce_gallery_thumbnail --yes
wp media regenerate --image_size=woocommerce_single --yes
wp media regenerate --image_size=woocommerce_thumbnail --yes

While I could have skipped this step, I wanted to work on one image size at a time to be able to measure the impact of the change. After the first round of optimization the images sizes looked like this:

After checking the site to verify that no images are missing I then removed all obsolete image definitions by replacing the previous snippet with the following one:

<?php
// Remove default image sizes.
add_action('init', 'smntcs_remove_image_sizes');
function smntcs_remove_image_sizes() {
	remove_image_size( 'course_archive_thumbnail' );
	remove_image_size( 'course_single_thumbnail' );
	remove_image_size( 'lesson_archive_thumbnail' );
	remove_image_size( 'lesson_single_thumbnail' );
	remove_image_size( 'portfolio_horizontal' );
	remove_image_size( 'portfolio_slider' );
	remove_image_size( 'portfolio_vertical' );
	remove_image_size( 'shop_catalog' );
	remove_image_size( 'shop_thumbnail' );
	remove_image_size( 'woocommerce_gallery_thumbnail' );
	remove_image_size( 'woocommerce_single' );
	remove_image_size( 'woocommerce_thumbnail' );
}

After the second round of optimization the images sizes looked like this:

In a final step, I regenerated all images by running the following WP-CLI statement:

wp media regenerate --yes

While it’s not much, I was able to save 300 MB of space on the server. I assume that while I’ve deleted many images, I might have also created a few variations of images that haven’t existed yet. This is the final result.

Leave a Reply

Your email address will not be published. Required fields are marked *