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

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

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.