How can I serve different images depending on screen size with wordpress

Question

I am creating a responsive WordPress website with a mobile-first approach.

When my client uploads an image for a blog post, I would like WordPress to then generate smaller versions of the image (with a smaller file size!) which then get served to smaller screen sizes?

Even if the user has to upload several versions of the image themselves, this would still be a good solution.

I am aware there is a function called add_image_size, however I believe this only changes the dimensions of the image, and not the actual file size. The different file sizes are the most important thing here.

So is there any plugin or code I have to write to enable this?

I look forward to hearing any help or advice on this question.

Thanks

Answer 1

add_image_size does change the actual size of the image file.

What I hava tried:

function odevice_image_sizes() {
    add_image_size( 'iphone-size', 300, 100, true );//OF course the dimensions are not correct...
    add_image_size( 'tablet-size', 600, 300, true );
}


function show_odevice_at_img_select($sizes) {
    $sizes['iphone-size'] = __( 'Image size for iphone' );
    $sizes['tablet-size'] = __( 'image size for tablet' );

    return $sizes;
}
add_action( 'init', 'odevice_image_sizes' );
add_filter('image_size_names_choose', 'show_odevice_at_img_select');

When checking for the device type (iphone or tablet), you can use the custom images like this

<?php the_post_thumbnail( 'iphone-size' ); ?>

I can't sent you a screen shot since I don't have the reputation needed. But you can see at the uploads folder, that the images entered with your custom dimensions, will have different size (at the disk), so they will consume different bandwidth. Smaller the dimensions, lesser the bandwidth.

Answer 2

The easiest way is using css

I use the following code to my site.

.your_div img {
height:auto;
max-width:100%;
}

I hope the above css code can help you.

Answer 3

panos got it right. You can use add_image_size to create different size images for different purposes. To continue a bit further with your question, I want to add:

Once you've created different image sizes with add_image_size, you can serve them for different devices by using Wordpress plugin Mobble (or any other php-based device recognition) http://wordpress.org/plugins/mobble

Just do a simple if else statement something like this:

if ( is_mobile() ) : the_post_thumbnail( 'mobile-size' );
elseif( is_tablet() ) : the_post_thumbnail( 'tablet-size' );
else : the_post_thumbnail( 'full' );
endif;