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