I'm trying to optimize responsive images on our site. We use WordPress. Not all image thumbnails are generated because of aspect ratio needs to be proportion to the original image.

Some of our images are not rendering in chrome where it chooses images with 400w. But works fine on Firefox and Safari it chooses to render 500w images.

This is the PHP code

<img class="responsive-images"
     srcset="<?php echo esc_attr($imageSrcset); ?>"
     sizes="(min-width: 768px) 15vw, 50vw"
     src="<?php echo $image[0]; ?>"
     alt="responsive-image">, who is speaking at HLTH">

This is the HTML code generated in the browser

<img class="responsive-images"
     srcset="example.com/img-200.png 200w,
             example.com/img-350.png 350w,
             example.com/img-400.png 400w,
             example.com/img-500.png 500w,
             example.com/img-700.png 700w,
             example.com/img-800.png 800w,
             example.com/img-1000.png 1000w"
     sizes="(min-width: 768px) 25vw, 50vw"

I appreciate all the help.

Thank you


We did figure out a workaround for this problem, If you are using a plugin like Regenerate Thumbnail try to deactivate first some plugins that will affect your images when you regenerate new image thumbnails like ewww image optimizer. make sure that the original image width is more than the image size you set on your media settings to avoid missing size when WordPress generates a list of thumbnails.

But still, we would like to know if there is a workaround if an image srcset URL is missing that could avoid missing images in the browser.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.