Using Picturefill on images inside posts

Hey!

I have implemented the Picturefill method for responsive image serving for featured images of my posts. However, I would like to also implement this method for the images within the posts. I’m not sure how I should go about doing this as usually I just use the_content() to display the content of the posts.

The aim of this method is to serve images of different size depending on the screen size of the user, so as to not use more bandwidth than necessary. Here is how I have implemented the Picturefill method for featured images:

<?php
    $image_id = get_post_thumbnail_id();
    $image_url_thumb = wp_get_attachment_image_src($image_id, 'thumbnail', true);
    $image_url_medium = wp_get_attachment_image_src($image_id, 'medium', true);
    $image_url_large = wp_get_attachment_image_src($image_id, 'large', true);
    $image_url_extralarge = wp_get_attachment_image_src($image_id, 'extralarge', true);
    $image_url_full = wp_get_attachment_image_src($image_id, 'full', true);
    $alt = get_post_meta($thumb_id, '_wp_attachment_image_alt', true);
 ?>

<a href="<?php echo $image_url_full[0]; ?>">
    <picture>
        <!--[if IE 9]><video style="display: none;"><![endif]-->
        <source srcset="<?php echo $image_url_full[0]; ?>" media="(min-width: 2048px)">
        <source srcset="<?php echo $image_url_extralarge[0]; ?>" media="(min-width: 1024px)">
        <source srcset="<?php echo $image_url_large[0]; ?>" media="(min-width: 700px)">
        <source srcset="<?php echo $image_url_medium[0]; ?>" media="(min-width: 300px)">
        <source srcset="<?php echo $image_url_thumbnail[0]; ?>" media="(min-width: 1px)">
        <!--[if IE 9]></video><![endif]-->
        <img srcset="<?php echo $image_url_large[0]; ?>" alt="<?php echo $alt; ?>">
    </picture>
</a>