How to Use Optimized image (automatically)?

[Lunatic_Zorr]

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

[christian]

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.

[Lunatic_Zorr]

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

[Lunatic_Zorr]

Hi @christian

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

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:

[Lunatic_Zorr]

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">

[prakash_s]

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

[Lunatic_Zorr]

Hi @prakash_s

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

Regards,
Kevin

[ruenel]

Hello Kevin,

The featured image size in the WP Review is “medium” while the image added above is the full size. It is because when using this {{dc:post:meta key="book_cover"}} dynamic content, it returns the ID and the default size will be the full image size. I would recommend using {{dc:post:meta key="book_cover" type="image" size="medium"}}. The size has to be set so the it will only load the defined size and not the full image.

Hope this make sense.

[Lunatic_Zorr]

Thanks for the reply @ruenel

I’ve tried the change you recommend but don’t see it making any difference.
I found this article: https://www.accentuate.io/blogs/wiki/understanding-and-utilizing-custom-fields-image-array-in-wordpress, and changed the custom field in ACF to be an image array, because

An image array in ACF consists of various properties of an image file, such as the URL, alt text, caption, sizes, and more. By making use of this data, developers can create versatile and responsive image displays on their websites.

The image displays, and the code still shows the srcset. I’m not sure if it’s showing the image I would expect, but for now I think I’m going to leave it like this, and concentrate on other parts.

Thank you!

[ruenel]

Hey Kevin,

Try this instead:
{{dc:post:meta key="book_cover"}}:medium

Just make sure that ACF book_cover field will only return the ID of the image.

Kindly let us know how it goes.

[Lunatic_Zorr]

Hi @ruenel

Sorry for the delay. Adding :medium at the end does seem to make a difference! I can see that this causes the smaller image to actually be shown. That’s awesome!

I guess there’s no way of using something like :auto so it automatically chooses based on display size?

Either way, this allows me to set medium or large for example, and display more appropriately sized images instead of the original one, which is already great!

Where did you get medium from? Is this based on the image sizes defined by the theme and plugins?

Regards,
Kevin

[ruenel]

Hello Kevin,

Normally, in the Image element, when you insert an image, you will have {n}:size where {n} is the image attachment ID and the size can be registered image sizes such as thumbnail, medium, large, or full. If no size is defined, it will display the full image size by default.

Hope this helps.

[Lunatic_Zorr]

Ah! Awesome thank you!

[christian]

You’re welcome, Kevin.