Image Resizing: Will affect how the images show up on my site

Hello, a lot of the images on my site are not the correct size. If I use the Smush Pro image resizing feature, will this affect how the images show up on my site or just reduce the file size of them. Any advice you have to ways to bulk edit image sizes to fit containers on the site would be awesome, as we have over 1k images. Is this something you can help with?

Little nervous to make a blanket change without knowing how it might affect the site.

Thanks,
Samuel

  • Nithin

    Hi Samuel,

    Hope you are doing good today. :slight_smile:

    What "Resize my full size images" feature in Smush does is to allow users to scale an image according to the content width of the image in the theme. However, I'm afraid, there isn't any feature setting in the plugin to automatically resize the image sizes, as the content width can vary from one theme to another.

    What the plugin could do is detect such images when "Detect and show incorrectly sized images" option is enabled, so you could manually resize to the specified image size individually.

    The plugin at the moment can only detect unnecessarily large oversized images on your pages, and then reduce their size to the values assigned as max-width, and max-height.

    Such issue occurs, when the theme doesn't have enough image sizes registered, if you are looking more for an automatic method, and since you have over 1K images, easiest would be to register image size for such thumbnails in your site, so that the correct image thumbnails would get generated, and smushed out of the box.

    For example, if the content width of the image to which you are looking to resize is 500px X 500px

    add_action( 'init',  'wpmu_add_new_image_size'  );
    function wpmu_add_new_image_size() {
     add_image_size( 'wpmu-thumbnail-custom', 500, 500 );
    }

    The above code,would register a new image size, and will list a new image checkbox under "Automatic Smush" section in the Smush Settings, which once checked, and smushed will make sure the images are smushed.

    You can implement the above code as a mu-plugins, or inside the functions.php of your child theme.

    I hope this helps. Please let us know if you have any further query. Have a great day ahead. :slight_smile:

    Best Regards,
    Nithin

  • Samuel

    Hi Nithin,
    Thanks for the insight and help here. So, for example, if I had a new image size of 120x120 with the sample code you've provided above, Smush will create an image of that size and use it in the containers on the site that are 120x120 in size? Or would I still need to change the size of the image manually for the container it is uploaded too?

    See this image example below where the recommendation is to reduce the size to 120x120. If I add more sizes, will this issue be corrected across the site?

    Thanks for your help!
    Samuel

  • Nithin

    Hey Samuel,

    Smush will create an image of that size and use it in the containers on the site that are 120x120 in size? Or would I still need to change the size of the image manually for the container it is uploaded too?

    Yes, it should get used in the container automatically. No need to manually change the size if the code is added.

    Smush only helps with optimizing images in WordPress. What the above code does is help WordPress create a new image thumbnail size for example 120px X 120px, which the theme hasn't registered, and hence listing as not optimized.

    Adding the code will in turn allow Smush to optimze the images for such missing thumbnails. Using the code will make sure you don't have to manually resize the image size, it should smush automatically.

    So, in your above given screenshot, 120px X 120px should be the size of your images which fits the content width, since you don't want to manually resize the image sizes, just adding the following code should work across all your site, and will automatically fix the content width for 120px:

    add_action( 'init',  'wpmu_add_new_image_size'  );
    function wpmu_add_new_image_size() {
     add_image_size( 'wpmu-thumbnail-custom', 120, 120 );
    }

    Once done, you'll see the new image size listed in Smush settings, which needs to be checked for the images to optimize, so that it works for bulk smush, and automatic smush.

    You can add more image size in the above code one after, another, for example:

    add_image_size( 'wpmu-thumbnail-custom-two', 300, 300 );
     add_image_size( 'wpmu-thumbnail-custom-three', 500, 500 );

    I hope this helps. Please let us know if you have any further query. Have a great day ahead. :slight_smile:

    Best Regards,
    Nithin

  • Nithin

    Hi Samuel,

    Where specifically on the site should I paste the code you mention above? Is there a specific location it should be placed? (I'm asking to direct our engineers to add the code for me)

    As mentioned in the initial reply, you can implement the code as a mu-plugins, or add the code under functions.php of your child theme.

    Please check this article to know more about how to implement as mu-plugins:
    https://premium.wpmudev.org/manuals/wpmu-manual-2/using-mu-plugins/

    Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.