How to display a different image size for mobile

Question

I have set up the following:

add_image_size( 'featured-image', 1600, 450, true );

which is used to serve a full width image on the website I'm building, but, as you can imagine, for mobile this is re-scaled to a ridiculously small height and looks really odd on mobile.

I have created a new image size which I've named 'featured-image-mobile' and has the dimensions 650px by 448px.

On the actual page I am displaying the full width image like so:

<img src="<?php the_post_thumbnail_url( 'featured-image' )?>"
    alt="<?php echo $altTag; ?>"
    title="<?php echo $titleTag; ?>">

Is there a way I can keep

the_post_thumbnail_url( 'featured-image' );

for everything except a screen resolution of 650px, and then change the image size to the following?

the_post_thumbnail_url( 'featured-image-mobile' );

Answer 1

WordPress wp_is_mobile() can be the function that you're looking for.

// Use the build-in function if WP
if(wp_is_mobile()) // On mobile
{
    the_post_thumbnail_url('featured-image-mobile');
}
else
{
    the_post_thumbnail_url('featured-image');
}

Answer 2

You could output both images and just switch between the two using css (I am just using basic bootstrap classes here and omitting unnecessary markup for clarity sake):

<div class="featured-image hidden-xs">
   <img src="<?php the_post_thumbnail_url( 'featured-image' )?>">
</div>

<div class="featured-image-mobile visible-xs-block">
   <img src="<?php the_post_thumbnail_url( 'featured-image-mobile' )?>">
</div>

Alternatively, you could add the mobile version of the image as a custom attribute:

<img src="<?php the_post_thumbnail_url( 'featured-image' )?>" data-mob-src="<?php the_post_thumbnail_url( 'featured-image-mobile' )?>">

And subsequently switch the source of the image with Javascript on mobile.

Answer 3

You need to do a conditional (if) to change or select the part for big devices or mobile, if you want to set different images.

function isMobile() {
    return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}

// Use the function
    if(isMobile()){
        // Do something for only mobile users
        the_post_thumbnail_url( 'featured-image-mobile' );
    }
    else {
        // Do something for only desktop users
        the_post_thumbnail_url( 'featured-image' );
    }

There are more examples here https://stackoverflow.com/questions/4117555/simplest-way-to-detect-a-mobile-device