New to the community? Start here

Properly size images though I have Automatic Resizing enabled in Smush CDN

I have enabled Automatic Resizing in Smush Pro CDN but performance report is suggesting to
properly size images. When I check the source of the images, I see they are loading the images from CDN but still using the larger dimension. Please help fix the issue. Its causing me Trouble.

Wed, 20 Nov 2019 8:12:43
More Smush Pro discussions
Smush Pro
  • Panos
    • SLS

    Hi Mohit !

    Smush can’t calculate the image’s size by css, it checks the image’s size, width and height attributes. Having a closer look to the image, it has set :
    width="800" and height="500"
    which is the full size of the image. The theme tries to pull full image at that part, specifically in file
    generatepress/inc/structure/featured-images.php line ~35

    So the image sizes are correct based on theme. There is some custom css that narrows down that image though:

    .post-image img {
width: 250px;
height: 188px;
}

    So the image that is loaded is bigger size than it’s container.

    I would suggest to use a smaller size for images on the home page, that match the size specified in the custom css. I have already created a temp ftp account and I added the following snippet in a mu-plugin:

    add_filter( 'generate_page_header_default_size', function( $size ){

	if ( is_home() ){
		return array( 250, 180 );
	}

	return $size;
} );

    The mu-plugin file path is:
    wp-content/mu-plugins/generatepress-home-img-sizes.php

    Now the img tags in homepage should have the width and height as set in your custom css.

    I preferred to use a mu-plugin in stead of adding this snippet in your theme’s functions.php, as I noticed that you are not using a child theme. That means that on next theme update that snippet would be gone. I would suggest to consider using a child theme.

    Kind regards!