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

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.