Steps to display Responsive Featured Images In WordPress, using wp_is_mobile() function

To display featured image in post (single.php) or page (page.php), you can use below function:

[php]
<?php the_post_thumbnail(); ?>
[/php]

You can use any of the sizes defined by WordPress:

thumbnail Thumbnail: by default, a maximum of 150 × 150 pixels
medium Medium resolution: by default a maximum of 300 × 300 pixels
large Large resolution: by default, a maximum of 640 × 640 pixels
full Full resolution: the original uploaded size

you can define size as per your requirement too.

[php]<?php set_post_thumbnail_size( $width, $height, $crop ); ?>[/php]

To be used in the current theme’s functions.php file.

[php]
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 150, 150 );
[/php]

WP_IS_MOBILE() Conditional Tag checks if the user is visiting using a mobile device. This is a boolean function, meaning it returns either TRUE or FALSE. Works through the detection of the browser user agent string.

[php]
<?php
if (wp_is_mobile()) {
the_post_thumbnail(‘medium’);
} else {
the_post_thumbnail(‘large’);
}
?>
[/php]