Change featured thumbnail based on screen size

Question

My theme has the option( like any other theme I guess) to chose a predefined featured image size( thumbnail, medium ...etc). I chose the image to be thumbnail, made it 150x150 in media settings but my problem is with 480px screens. Here I want the thumbnail to be full width instead of 150px. If I add width: 100%; rule in CSS I get 150px images stretched to 480px and they look awfull.

The code that outputs my featured images is this:

function omega_entry() {

    if ( is_home() || is_archive() || is_search() ) {
        if(omega_get_setting( 'content_archive_thumbnail' )) {
            get_the_image( array( 'meta_key' => 'Thumbnail', 'default_size' => omega_get_setting( 'image_size' ) ) ); 
        }
        ...etc}
...etc}

and I want to have another featured image size for max. 480px, nothing fancy, just as that:

<?php the_post_thumbnail('thumbnail', array('class' => 'myclass')); ?>  

I know that resolution may be obsolete but I want my website to look decent on most devices, event the lowend ones. I guess CSS media queries can't help me here and beside those my knowledge is limited.

Thank you so much for any help.

Answer 1

As a rule of thumb, responsive design should not be handled on the server side. The two main reasons for this is:

1. The only kind of detection you can do on the server side is User-agent sniffing. Responsive design should be based on feature detection, not user agents.

2. It's too easy to run into caching problems etc. (Ie. mobile users get a cached desktop version).

For responsive images, here's what I normally do:

<img src="small.jpg" data-lg="large.jpg" data-sm="small.jpg"> and I use JavaScript to switch out the src attribute, depending on either window.screen or window.innerWidth.

You can also have two image tags and use CSS media queries to swap between them. but then, of course, you have two images where you should really just have one.

switching out the src of a single img tag most closely resembles what's going on in the new picture element with srcset.

Answer 2

Just use responsive design techniques so instead of using the 'thumbnail' version of the image use the 'Large' or 'Medium' size instead and then use CSS to scale down the image for you.

<style>
img {
width: 100%;
height: auto;
}
</style>