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' );