How to get the URL of a each custom image size of a featured image

So, I finally noticed that what I was doing, was returning an array, and that I needed the [0] of that array. The code is on the ugly side, but it works.

<?php
    $thumb_id = get_post_thumbnail_id();
    $small_screen = wp_get_attachment_image_src($thumb_id,'small-screen', true);
    $medium_screen = wp_get_attachment_image_src($thumb_id,'medium-screen', true);
    $large_screen = wp_get_attachment_image_src($thumb_id,'large-screen', true);
    $extra_large_screen = wp_get_attachment_image_src($thumb_id,'extra-large-screen', true);
?>

–

<div class="container hero-w"
    data-background-large="<?php echo $large_screen[0]; ?>"
    data-background-extra-large="<?php echo $extra_large_screen[0]; ?>">

    <div class="inner-w">

        <div class="image-w hero">

            <?php if ( has_post_thumbnail() ) { ?>

                <img src="https://wordpress.stackexchange.com/questions/198740/<?php echo get_template_directory_uri(); ?>/images/2x1.png"
                    data-image-small="<?php echo $small_screen[0]; ?>"
                    data-image-medium="<?php echo $medium_screen[0]; ?>"
                    data-image-large="<?php echo $large_screen[0]; ?>"
                    alt="">

            <?php } else { ?>

                <img src="http://placehold.it/1600x800/333/&text=No featured image yet" alt="">

            <?php } ?>


        </div>

    </div>
</div>