In a template I’m pulling in an image from the media library with:
<?php echo wp_get_attachment_image( 33894, 'full', "", array( "class" => "lazyload" ) ); ?>
This is working as I need it to, pulling in a nice large image for desktop.
Then when I look on the frontend, I see WordPress has generated images at different widths using srcset for a variety of widths, which is great for optimisation.
<img width="1240" height="831" src="https://www.mywebsite.com/wp-content/uploads/2021/12/cow-image.jpg" data-src="https://www.mywebsite.com/wp-content/uploads/2021/12/cow-image.jpg" class=" ls-is-cached lazyloaded " alt="My alt description" data-srcset="https://www.mywebsite.com/wp-content/uploads/2021/12/cow-image.jpg 1240w, https://www.mywebsite.com/wp-content/uploads/2021/12/cow-image-300x201.jpg 300w, https://www.mywebsite.com/wp-content/uploads/2021/12/cow-image-1024x686.jpg 1024w, https://www.mywebsite.com/wp-content/uploads/2021/12/cow-image-768x515.jpg 768w, https://www.mywebsite.com/wp-content/uploads/2021/12/cow-image-400x268.jpg 400w, https://www.mywebsite.com/wp-content/uploads/2021/12/cow-image-650x436.jpg 650w, https://www.mywebsite.com/wp-content/uploads/2021/12/cow-image-600x402.jpg 600w" data-sizes="(max-width: 1240px) 100vw, 1240px" sizes="(max-width: 1240px) 100vw, 1240px" srcset="https://www.mywebsite.com/wp-content/uploads/2021/12/cow-image.jpg 1240w, https://www.mywebsite.com/wp-content/uploads/2021/12/cow-image-300x201.jpg 300w, https://www.mywebsite.com/wp-content/uploads/2021/12/cow-image-1024x686.jpg 1024w, https://www.mywebsite.com/wp-content/uploads/2021/12/cow-image-768x515.jpg 768w, https://www.mywebsite.com/wp-content/uploads/2021/12/cow-image-400x268.jpg 400w, https://www.mywebsite.com/wp-content/uploads/2021/12/cow-image-650x436.jpg 650w, https://www.mywebsite.com/wp-content/uploads/2021/12/cow-image-600x402.jpg 600w">
Is it possible for me to write a function to hook into srcset and have an entirely different image for >768?
So use cow-image.jpg for desktop and duck-image.jpg for mobile/tablet?