Imagens responsivas no Wordpress

Boa tarde a todos!

Pessoal estou com dificuldade para alterar a imagem do post de acordo com o tamanho da tela do usuário.

Configurei o arquivo functions.php para criar os seguintes tamanhos de thumbs:

//Tamanho para thumbs para post type corpo-clinico
add_image_size('thumb_corpo_clinico',251,251,true);

//Tamanho para thumbs para post type notícias
add_image_size('thumb_noticias',366,225,true);

O que eu preciso fazer é:

Quando o site for acessado por um Desktop, carregaria a imagem normal.

Quando o site for acessado por um tablet, carregaria a imagem de tamanho 366x366.

Quando o site for acessado por um smartphone, carregaria a imagem de tamanho 251x251.

Atualmente, independente de qual dispositivo o site é acessado ele carrega a maior imagem.

Abaixo está o código da página que mostra o post.

<?php get_header();?>

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

 <article id="single-noticias" class="container">

 <header>

 <figure>

 <?php the_post_thumbnail('thumb_servico',array(''));?>

 </figure>

 <h1><?php the_title();?></h1>

 <h2><?php the_field('subtitulo_da_noticia');?></h2>

 </header>

 <?php the_content(); ?>

 </article><!-- /.corpo-clinico -->

<?php endwhile; else: ?>

<?php endif; ?>

<?php get_footer();?>

Desde já, agradeço a todos que puderem me ajudar!