Fallback for missing srcset images

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"
     src="example.com/img.png"
     alt="responsive-image"

I appreciate all the help.

Thank you

Topic responsive images Wordpress

Category Web


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.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.