Issue with Image Sizes in Cornerstone

[jnlinn]

I am using the latest version of WP and Pro.

When I add a Featured Image to a post, I receive a warning in Google’s PageSpeed Insights to “Properly Size Images”. Images are killing my performance metrics.

When I view the webpage source code I see the image source url is the original uploaded image, not any of the compressed sizes which are automatically created and stored in database. I also see in the webpage source code that a random width and height is assigned. Here is an example:

view-source:https://www.bellafsm.com/how-to-get-pressure-washing-jobs/

I highlighted featured image here:

In fact, any time I add a Cornerstone image element in a post, it has the same issue.

However, if I insert an image inside a Cornerstone text element, the image is responsive and uses the “data-srcset” attribute. Here is example from same webpage:

What is happening? How do I fix the Featured Image size and Cornerstone image sizes?

[prakash_s]

Hello @jnlinn,

Thanks for writing to us.

In case you want to resize the featured image I would suggest you please have a look at this thread to learn more about how to pull the resized image.

Use thumbnails in recent post

Hope it helps
Thanks

[jnlinn]

I saw that thread previously but unfortunately it does not apply to this issue.

The featured image should display full size on desktops and be responsive to the viewport, e.g., mobile.

Please see the snippet of code I supplied above. The first snippet is the featured image. The second snippet is an image I inserted directly which is responsive.

Why is Cornerstone not inserting responsive images for the featured image and image elements?

[ruenel]

Hello @jnlinn,

Most users prefer to have full control over the images. In the theme, we have disabled by default the srcsets. You can enable it back by using a code and putting it in your child theme’s functions.php file. Kindly check out this thread:

• Hook/filter Reference for Dynamic Content?
• Timeline for srcset implementation

Hope this helps.

[jnlinn]

Thank you. That works.

[ruenel]

You are most welcome, @jnlinn.