Adaptive images don’t work

Hi there,

This is quite tricky to deal with as we’re at the mercy of what size the browser picks on the srcset.

The best we can do is add more variants of the image sizes.

Here’s a good explanation about this issue.

Hello @ejcabquina , thanks for replying

I think I have not understood your answer well.

In the code that I sent you, you can see 3 sizes of the same image: 400w, 768w and 980w. The problem is that the browser always displays the full size 980w image for the wp show post views, even when I choose 3 or 4 column or mobile view. Is this operation normal?

If this is the case, what do you recommend me to optimize the delivery of images in different screen sizes?

PS: I don’t see the explanation you mean in your answer haha.

Thanks!

Oh my bad. There should’ve been a link to an article at the end of my reply.

It’s this one. https://stackoverflow.com/a/51345189

You may want to consider using the beta version for this –
https://wpshowposts.com/wp-show-posts-1-2-0/#:~:text=Image%20Sizes,it%20is%20now.

So you can specify the image size to be used by the thumbnails. ??

Thank you very much for the reply.

I will review the documentation you send me.

One more question: I am using version 1.1.3. where I can also set the size of the images (width and height in pixels). Would it be a good practice to set exactly the size of any of the sizes that wordpress does by default? For example 300px x 150px if I know that views will never display with a width greater than 300px.

How could I set only one of the dimensions (width or height) and leave the other in auto? How would it be done?

Thanks !

The ideal is to register an image size that you want and then set that registered image size for use by WPSP’s thumbnail.

That’s actually why the beta version changed how the image was sized. It was so the users can use their preferred image size name from the site’s registered image sizes on the new image size field. ??

Say, for example, you want 300px by 150px thumbnail. You’ll need to register an image size for that and generate the newly registered image size for all the images. You then assign this newly registered and generated image size to the image size field of the beta version so the thumbnails will be sized width=”300″ height=”150″ on its <img> attribute.

ok, thanks @ejcabquina

Just to clarify it. Let’s imagine I want the WPSP thumbnails to be 400x200px. So in WordPress media options I set one of the image sizes to 400x200px.

Then, i would have the following image sizes available:

1) Original image: https://dominio.com/wp-content/uploads/imagen.jpg (1024x512px)
2) Image width 400w: https://dominio.com/wp-content/uploads/imagen-400×200.jpg 400w
3) Image width 750w: https://dominio.com/wp-content/uploads/imagen-750×375.jpg 750w

So, if I don’t set the size to 400x200px I have this HTML:

https://ibb.co/Sx3X5mc

<img width="1024" height="512" src="https://dominio.com/wp-content/uploads/imagen.jpg" class="attachment-full size-full wp-post-image" alt="" loading="lazy" itemprop="image" srcset="https://dominio.com/wp-content/uploads/imagen-1.jpg 1024w, https://dominio.com/wp-content/uploads/imagen-400x200.jpg 400w, https://dominio.com/wp-content/uploads/imagen-750x375.jpg 750w, https://dominio.com/wp-content/uploads/imagen-768x384.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px">

However, if I set image size 400x200px in WPSP I’ll get this HTML code:

https://ibb.co/2NymxLx

<img src="https://dominio.com/wp-content/uploads/imagen-400x200.jpg" alt="Texto Alternativo" itemprop="image" class="center">

Is that so? I see that when I configure the image size in WPSP the image I want is chosen, but the “lazy load” attribute is lost.