Hestia does not offer responsive images, even with Optimole

This problem is visible on the Hestia theme demo site:
https://demo.themeisle.com/hestia/

The image loaded for the Big Title section is:
https://s20206.pcdn.co/hestia/wp-content/uploads/sites/89/2017/01/Mountains_comp.jpg

which is not even loaded from Optimole.

Similar problem with the ‘Subscribe to our newsletter’ section, where this image is loaded, from Optimole this time:
https://mllj2j8xvfl0.i.optimole.com/YyZCPVs-MsqrOEoq/w:auto/h:auto/q:90/https://s20206.pcdn.co/hestia/wp-content/uploads/sites/89/2017/01/buildings_comp.jpg

This image is 1920 x 1200, which makes no sense on a mobile screen.

The ‘Contact Us’ image has the same issue:
https://mllj2j8xvfl0.i.optimole.com/YyZCPVs-ylvq-JFG/w:auto/h:auto/q:90/https://s20206.pcdn.co/wp-content/themes/hestia/assets/img/contact.jpg

It’s 1024 x 683, which is way too wide for a mobile screen (portrait mode).

The only places where I see Optimole working properly is on already smaller images: team images, testimonial images, and so on.

Right now, it looks to me that the Hestia theme does not provide adequate support for responsive images, even with Optimole.

Another way to look at this issue:

1) Laptop
Size of resources: 8.8 MB

2) Mobile
Size of resources: 9.5 MB

Somehow the theme has even bigger assets on a mobile screen.

Hello @chamois_blanc!

Optimole doesn’t make the images responsive, it optimizes them. The images used on the big title, subscribe and contact us sections are background images and they can’t be resized. Those are full-width sections and as a result, the background image is designed to cover the entire section, from top to bottom. This is the reason why the same image can’t look exactly the same on every device. A small mobile device doesn’t have the physical possibility to display the entire picture, while at the same time keeping the image ratio and all its properties. You can find out more about this here. As you mentioned, all the other images are properly optimized with Optimole, so there is no issue between Hestia and Optimole.

Have a nice day!

Hi @luciamarinescu, thank you for your answer though I am not quite understanding your response.

Optimole usually returns smaller images for smaller screens. Granted it’s not exactly the same as responsive images (with srcset/sizes), but at least people do not have to load 1920 x 1400 images on their smaller mobile devices when the screen size is less than half of that.

> The images used on the big title, subscribe and contact us sections are background images and they can’t be resized.

I read the article you pointed me to. Now a possible solution would be to allow the user to specify different images based on the current screen size, ensuring the large image has enough resolution for a big screen, and a smaller image loads faster on a smaller screen.

> As you mentioned, all the other images are properly optimized with Optimole, so there is no issue between Hestia and Optimole.

I cannot agree with your conclusion. A mobile view of a site should be able to load smaller image assets, as a rule of thumb. If you’re saying you’re not willing to provide a solution to the issue, then that’s fair and I would understand.

Hi @chamois_blanc!

It’s possible to set a different background image for mobile devices using custom CSS. For example, for the about section the code would look like below and it will let you set a different image only for mobile devices.

@media(max-width: 768px){
.home .hestia-about {
    background-image: url(IMAGE_URL) !important;
}
}

“IMAGE_URL” should be replaced with the URL of the desired image you would like to set.

I hope this helps!

Have a nice day!

Most people who use the theme want to be able to choose their images from the WP Customizer. Therefore this is not a sustainable solution.

Hello @chamois_blanc!

At the moment using custom CSS is the only solution to add different images for mobile devices. However, we may take your suggestion into consideration.

Thanks for understanding and have a nice day!