Wrong thumbnail trying to load on Android phone

Hey zimbo,

Thank you for the inquiry.

What happens when you remove the srcset and sizes attribute from the image? The size 180×101px should be good enough for desktop and mobile view.

<img loading="lazy" decoding="async" aria-describedby="caption-attachment-7644" class="size-square wp-image-7644" src="https://www.americanroadtrips.net/wp-content/uploads/2019/11/Hotel-Nevada-180x101.jpg" alt="Hotel Nevada at night" width="180" height="101">

Best regards,
Ismael

Hi,

Thank you for the update.

…but this gets translated on the live page to the img code with srcset and sizes that I posted above.

Have you tried using a different size of the image instead? Please provide the login details in the private field so that we can check the issue further.

Best regards,
Ismael

Hi,

Sorry for the late response. Looks like the image with the size 495×279 is still being selected on smaller screens. Please try to add this code in the functions.php file to remove the size in the srcset attribute.

function avf_remove_specific_image_size_from_srcset( $sources, $size_array, $image_src, $image_meta, $attachment_id ) {
    foreach ( $sources as $source => $source_data ) {
        if ( strpos( $source, '495x279' ) !== false ) {
            unset( $sources[$source] );
        }
    }
    return $sources;
}
add_filter( 'wp_calculate_image_srcset', 'avf_remove_specific_image_size_from_srcset', 10, 5 );

You can also disable the srcset completely by toggling the Enfold > Performance > Responsive Images option or by adding this code in the functions.php file:

add_filter( 'wp_calculate_image_srcset', '__return_false' );

Best regards,
Ismael

Hi,

I removed the 495px image from the equation to simplify matters.

Yes, but this size is still included in the srcset attribute and is being selected for display on smaller screens. Did you try the filter above? It will remove the size from the srcset attribute, forcing the browser to select a different size.

Best regards,
Ismael

Hi,

We adjusted the filter a bit. Please try it again:

function avf_remove_specific_image_size_from_srcset( $sources, $size_array, $image_src, $image_meta, $attachment_id ) {
    if ( isset( $sources[495] ) ) {
        unset( $sources[495] );
    }

    return $sources;
}
add_filter( 'wp_calculate_image_srcset', 'avf_remove_specific_image_size_from_srcset', 10, 5 );

Best regards,
Ismael

Hi,

It seems to be loading the correct image (180x101px) on our end. Are you using any plugins related to images? Try to add this filter to force the browser to load the 180px image when the screen width is less than 768px.

add_filter( 'wp_calculate_image_srcset_sizes', 'avf_wp_calculate_image_srcset_sizes_mod', 10, 2 );
function avf_wp_calculate_image_srcset_sizes_mod( $sizes, $size ) {
    if ( 180 === $size[0] && 101 === $size[1] ) {
        return '(max-width: 768px) 180px, 700px';
    }

    return $sizes;
}

Best regards,
Ismael

Hi,

One final question: on the ‘remove 495 image code’ if there were other sizes I wanted to get rid of, is this the code for multiple sizes?

For other sizes, you can duplicate the if block.

function avf_remove_specific_image_size_from_srcset( $sources, $size_array, $image_src, $image_meta, $attachment_id ) {
    if ( isset( $sources[495] ) ) {
        unset( $sources[495] );
    }

    if ( isset( $sources[295] ) ) {
        unset( $sources[295] );
    }

    return $sources;
}
add_filter( 'wp_calculate_image_srcset', 'avf_remove_specific_image_size_from_srcset', 10, 5 );

Best regards,
Ismael

Hi,
Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike