How to Use Optimized image (automatically)?

Support
#1

Hello,

I use EWWW IO to optimize media (images) I upload to my website, and WP Offload Media to offload all media to S3 and serve from there. Creating layouts/templates with cornerstone, I’ve noticed that the posts using the layout don’t seem to use the optimized images, but only use the original size, thus taking longer to load and increasing overall page size.

Example post [spanish language only] : https://www.kevinmaschke.com/la-estrella-mas-hermosa-yukio-mishima/

The Book cover image in the “hero” area uses the original full sized image, instead of one of the optimized sizes. Just for demonstration, I’ve added the same image inside the post, where it uses a different optimized image depending on screen size, and at the bottom, the rating section includes the same image too and uses a small version.

What do I have to do for the top image to use one of the optimized ones too?

I have also noticed that on the home page (https://www.kevinmaschke.com/), using the blog layout the thumbnails also don’t use optimized versions…

Thanks!

Edit: added secure note with details

#2

Hey Kevin,

We don’t have a feature to automatically replace images. But, some image optimizers like Imagify optimizes images automatically out of the box. It looks like it works differently than EWWW which we don’t have experience using.

#3

Hi @christian

I think I didn’t explain it well. As far as I understand it, in Wordpress different sizes are normally delivered for smaller viewports via srcset, which I can see happens inside the content of pages, posts, etc. But using the Single Layout, the Book Cover image in the “hero” area does not seem to do this, but uses the original full sized image.
The same seems to happen on the Pro Theme Ethos Stack Blog homepage (latests posts homepage).

Regards,
Kevin

#4

Hi @christian

Testing a bit more I just noticed the Attachment Srcset option:

image
image656×565 31.2 KB

I’ve enabled it, but it still seems to use the full sized image. To insert the image, I’m using the Image element, and the source is the following:

{{dc:post:meta key="book_cover"}}

This is a custom field I’ve created in ACF and which outputs an image ID:

image
image1471×994 50 KB

#5

Doing some further testing using the Attachment Srcset option, it seems it adds the code to the html, but as you can see, the src used is different.

For the Image in the Top:

src="https://cdn.kevinmaschke.com/wp-content/uploads/2025/11/02122132/La-Estrella-mas-hermosa_Yukio-Mishima_portada.webp"

(full)

<img src="https://cdn.kevinmaschke.com/wp-content/uploads/2025/11/02122132/La-Estrella-mas-hermosa_Yukio-Mishima_portada.webp" srcset="https://cdn.kevinmaschke.com/wp-content/uploads/2025/11/02122132/La-Estrella-mas-hermosa_Yukio-Mishima_portada.webp 3000w, https://cdn.kevinmaschke.com/wp-content/uploads/2025/11/02122132/La-Estrella-mas-hermosa_Yukio-Mishima_portada-264x400.webp 264w, https://cdn.kevinmaschke.com/wp-content/uploads/2025/11/02122132/La-Estrella-mas-hermosa_Yukio-Mishima_portada-676x1024.webp 676w, https://cdn.kevinmaschke.com/wp-content/uploads/2025/11/02122132/La-Estrella-mas-hermosa_Yukio-Mishima_portada-66x100.webp 66w, https://cdn.kevinmaschke.com/wp-content/uploads/2025/11/02122132/La-Estrella-mas-hermosa_Yukio-Mishima_portada-1015x1536.webp 1015w, https://cdn.kevinmaschke.com/wp-content/uploads/2025/11/02122132/La-Estrella-mas-hermosa_Yukio-Mishima_portada-1353x2048.webp 1353w, https://cdn.kevinmaschke.com/wp-content/uploads/2025/11/02122132/La-Estrella-mas-hermosa_Yukio-Mishima_portada-100x151.webp 100w, https://cdn.kevinmaschke.com/wp-content/uploads/2025/11/02122132/La-Estrella-mas-hermosa_Yukio-Mishima_portada-1095x1658.webp 1095w, https://cdn.kevinmaschke.com/wp-content/uploads/2025/11/02122132/La-Estrella-mas-hermosa_Yukio-Mishima_portada-1500x2271.webp 1500w" sizes="(max-width: 3000px) 100vw, 3000px" alt="Image" loading="lazy">

In the content:

src="https://cdn.kevinmaschke.com/wp-content/uploads/2025/11/02122132/La-Estrella-mas-hermosa_Yukio-Mishima_portada-676x1024.webp"

(full)

<img loading="lazy" decoding="async" width="676" height="1024" src="https://cdn.kevinmaschke.com/wp-content/uploads/2025/11/02122132/La-Estrella-mas-hermosa_Yukio-Mishima_portada-676x1024.webp" alt="" class="wp-image-8939" srcset="https://cdn.kevinmaschke.com/wp-content/uploads/2025/11/02122132/La-Estrella-mas-hermosa_Yukio-Mishima_portada-676x1024.webp 676w, https://cdn.kevinmaschke.com/wp-content/uploads/2025/11/02122132/La-Estrella-mas-hermosa_Yukio-Mishima_portada-264x400.webp 264w, https://cdn.kevinmaschke.com/wp-content/uploads/2025/11/02122132/La-Estrella-mas-hermosa_Yukio-Mishima_portada-66x100.webp 66w, https://cdn.kevinmaschke.com/wp-content/uploads/2025/11/02122132/La-Estrella-mas-hermosa_Yukio-Mishima_portada-1015x1536.webp 1015w, https://cdn.kevinmaschke.com/wp-content/uploads/2025/11/02122132/La-Estrella-mas-hermosa_Yukio-Mishima_portada-1353x2048.webp 1353w, https://cdn.kevinmaschke.com/wp-content/uploads/2025/11/02122132/La-Estrella-mas-hermosa_Yukio-Mishima_portada-100x151.webp 100w, https://cdn.kevinmaschke.com/wp-content/uploads/2025/11/02122132/La-Estrella-mas-hermosa_Yukio-Mishima_portada-1095x1658.webp 1095w, https://cdn.kevinmaschke.com/wp-content/uploads/2025/11/02122132/La-Estrella-mas-hermosa_Yukio-Mishima_portada-1500x2271.webp 1500w" sizes="auto, (max-width: 676px) 100vw, 676px">
#6

Hello Kevin,

When you use the Post Image as a background image, WordPress will not generate responsive image sources — background images don’t support the srcset attribute. If you need responsive image sizes, you’ll need to use the Image element and enable Attachment Srcset options. Also, when you use dynamic content to pull the image, it returns the image ID from your ACF meta field(select the meta box return type as ID). WordPress then uses that ID to look up the attachment metadata in the database and automatically builds the srcset list (thumbnail, medium, large, etc.). That’s why srcset only works when the image is loaded through the Image element rather than as a background image.

Thanks

#7

Hi @prakash_s

I’m not using the post image as a background image, but inserting it using the Image Element.

Regards,
Kevin