0

I have the standard image sizes for thumbnails. I want to download 'medium' for mobile screens and 'large' for others. No matter what, the srcset settings download the 724px wide, large size to mobile because it want higher res. I don't care if mobile gets 300px image on a 2:1 screen dpi and it is kind of blurry. I want it because it is 9kb vs 35kb. I understand wp_get_attachment_image_attributes is what can modify. I guess I just need a working code example or idea. This is what I attempted to hack together which has improper syntax.

function assistancy_responsive_images( $attr, $attachment, $size ) {
if ( $size == 'Large' ) {
$attr['sizes'] = '(min-width: 451px) 724px, 100vw';
}
else {
$attr['sizes'] = ' (max-width: 450px) 300px, 100vw';
}
return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'assistancy_responsive_images', 10, 3 );*/

1 Answer 1

0

This seems to do what I need. Hero image is full res, blog feat. img for desktop is large and blog mobile featured image loads the medium file and ignores the device pixel ratio on mobile. Blog pages must call
echo get_the_post_thumbnail( get_the_ID() ,'large' );

where page templates w/ hero image using a feat. img must call 'Full'

function mobile_responsive_images( $attr, $attachment, $size ) {
  if ( $size == 'Full' ) {
    $attr['sizes'] = '100vw';
  } 
  elseif ( $size == 'large' ) {
    $attr['sizes'] = '50vw';
  } 
  
  else{
 // make any customizations based on other image sizes here
    $attr['sizes'] =  '(max-width: 500px) 300px, 50vw';
 // expand to include as many breakpoints as you like. List the larger ones first!
  }
  return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'mobile_responsive_images', 10, 3 );

If you see any optimization/proper code to rewrite this please let me know.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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