diff --git a/core/MAINTAINERS.txt b/core/MAINTAINERS.txt
index d937411..ca44316 100644
--- a/core/MAINTAINERS.txt
+++ b/core/MAINTAINERS.txt
@@ -239,6 +239,9 @@ Overlay module
 Path module
 - Dave Reid 'davereid' http://drupal.org/user/53892
 
+Picture module
+- Peter Droogmans 'attiks' http://drupal.org/user/105002
+
 PHP module
 - ?
 
diff --git a/core/modules/picture/lib/Drupal/picture/PictureMapping.php b/core/modules/picture/lib/Drupal/picture/PictureMapping.php
new file mode 100644
index 0000000..7bec6f8
--- /dev/null
+++ b/core/modules/picture/lib/Drupal/picture/PictureMapping.php
@@ -0,0 +1,123 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\picture\PictureMapping.
+ */
+
+namespace Drupal\picture;
+
+use Drupal\Core\Config\Entity\ConfigEntityBase;
+
+/**
+ * Defines the Picture entity.
+ */
+class PictureMapping extends ConfigEntityBase {
+
+  /**
+   * The Picture ID (machine name).
+   *
+   * @var string
+   */
+  public $id;
+
+  /**
+   * The Picture UUID.
+   *
+   * @var string
+   */
+  public $uuid;
+
+  /**
+   * The Picture label.
+   *
+   * @var string
+   */
+  public $label;
+
+  /**
+   * The Picture mappings.
+   *
+   * @var array
+   */
+  public $mappings = array();
+
+  /**
+   * The Picture BreakpointGroup.
+   *
+   * @var BreakpointGroup
+   */
+  public $breakpointGroup = '';
+
+  /**
+   * Overrides Drupal\config\ConfigEntityBase::__construct().
+   */
+  public function __construct(array $values = array(), $entity_type = 'picture_mapping') {
+    parent::__construct($values, $entity_type);
+    $this->loadBreakpointGroup();
+    $this->loadAllMappings();
+  }
+
+  /**
+   * Overrides Drupal\Core\Entity::save().
+   */
+  public function save() {
+    // Only save the keys, but return the full objects.
+    if (isset($this->breakpointGroup) && is_object($this->breakpointGroup)) {
+      $this->breakpointGroup = $this->breakpointGroup->id();
+    }
+    parent::save();
+    $this->loadBreakpointGroup();
+    $this->loadAllMappings();
+  }
+
+  /**
+   * Implements EntityInterface::createDuplicate().
+   */
+  public function createDuplicate() {
+    $duplicate = new PictureMapping();
+    $duplicate->id = '';
+    $duplicate->label = t('Clone of') . ' ' . $this->label();
+    $duplicate->mappings = $this->mappings;
+    return $duplicate;
+  }
+
+  /**
+   * Load breakpointGroup.
+   */
+  protected function loadBreakpointGroup() {
+    if ($this->breakpointGroup) {
+      $breakpoint_group = entity_load('breakpoint_group', $this->breakpointGroup);
+      $this->breakpointGroup = $breakpoint_group;
+    }
+  }
+
+  /**
+   * Load all mappings, remove non-existing ones.
+   */
+  protected function loadAllMappings() {
+    $loaded_mappings = $this->mappings;
+    $this->mappings = array();
+    if ($this->breakpointGroup) {
+      foreach ($this->breakpointGroup->breakpoints as $breakpoint_id => $breakpoint) {
+        // Get the mapping for the default multiplier.
+        $this->mappings[$breakpoint_id]['1x'] = '';
+        if (isset($loaded_mappings[$breakpoint_id]['1x'])) {
+          $this->mappings[$breakpoint_id]['1x'] = $loaded_mappings[$breakpoint_id]['1x'];
+        }
+
+        // Get the mapping for the other multipliers.
+        if (isset($breakpoint->multipliers) && !empty($breakpoint->multipliers)) {
+          foreach ($breakpoint->multipliers as $multiplier => $status) {
+            if ($status) {
+              $this->mappings[$breakpoint_id][$multiplier] = '';
+              if (isset($loaded_mappings[$breakpoint_id][$multiplier])) {
+                $this->mappings[$breakpoint_id][$multiplier] = $loaded_mappings[$breakpoint_id][$multiplier];
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/core/modules/picture/lib/Drupal/picture/PictureMappingFormController.php b/core/modules/picture/lib/Drupal/picture/PictureMappingFormController.php
new file mode 100644
index 0000000..f5aa3d3
--- /dev/null
+++ b/core/modules/picture/lib/Drupal/picture/PictureMappingFormController.php
@@ -0,0 +1,119 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\picture\PictureFormController.
+ */
+
+namespace Drupal\picture;
+
+use Drupal\Core\Entity\EntityInterface;
+use Drupal\Core\Entity\EntityFormController;
+use Drupal\picture\PictureMapping;
+
+/**
+ * Form controller for the picture edit/add forms.
+ */
+class PictureMappingFormController extends EntityFormController {
+
+  /**
+   * Overrides Drupal\Core\Entity\EntityFormController::form().
+   *
+   * @param array $form
+   *   A nested array form elements comprising the form.
+   * @param array $form_state
+   *   An associative array containing the current state of the form.
+   * @param \Drupal\picture\PictureMapping $picture_mapping
+   *   The entity being edited.
+   *
+   * @return array
+   *   The array containing the complete form.
+   */
+  public function form(array $form, array &$form_state, EntityInterface $picture_mapping) {
+    // Check if we need to duplicate the picture.
+    if ($this->operation == 'duplicate') {
+      $picture_mapping = $picture_mapping->createDuplicate();
+      $this->setEntity($picture_mapping, $form_state);
+    }
+    $form['label'] = array(
+      '#type' => 'textfield',
+      '#title' => t('Label'),
+      '#maxlength' => 255,
+      '#default_value' => $picture_mapping->label(),
+      '#description' => t("Example: 'Main content' or 'Sidebar'."),
+      '#required' => TRUE,
+    );
+    $form['id'] = array(
+      '#type' => 'machine_name',
+      '#default_value' => $picture_mapping->id(),
+      '#machine_name' => array(
+        'exists' => 'picture_mapping_load',
+        'source' => array('label'),
+      ),
+      '#disabled' => (bool) $picture_mapping->id() && $this->operation != 'duplicate',
+    );
+    $form['breakpointGroup'] = array(
+      '#type' => 'select',
+      '#title' => t('Breakpoint Group'),
+      '#default_value' => !empty($picture_mapping->breakpointGroup) ? $picture_mapping->breakpointGroup->id() : '',
+      '#options' => breakpoint_group_labels(),
+      '#required' => TRUE,
+    );
+
+    $image_styles = image_style_options(TRUE);
+    foreach ($picture_mapping->mappings as $breakpoint_id => $mapping) {
+      foreach ($mapping as $multiplier => $image_style) {
+        $label = $multiplier . ' ' . $picture_mapping->breakpointGroup->breakpoints[$breakpoint_id]->name . ' [' . $picture_mapping->breakpointGroup->breakpoints[$breakpoint_id]->mediaQuery . ']';
+        $form['mappings'][$breakpoint_id][$multiplier] = array(
+          '#type' => 'select',
+          '#title' => check_plain($label),
+          '#options' => $image_styles,
+          '#default_value' => $image_style,
+        );
+      }
+    }
+
+    $form['#tree'] = TRUE;
+
+    return parent::form($form, $form_state, $picture_mapping);
+  }
+
+  /**
+   * Overrides Drupal\Core\Entity\EntityFormController::actions().
+   */
+  protected function actions(array $form, array &$form_state) {
+    // Only includes a Save action for the entity, no direct Delete button.
+    return array(
+      'submit' => array(
+        '#value' => t('Save'),
+        '#validate' => array(
+          array($this, 'validate'),
+        ),
+        '#submit' => array(
+          array($this, 'submit'),
+          array($this, 'save'),
+        ),
+      ),
+    );
+  }
+
+  /**
+   * Overrides Drupal\Core\Entity\EntityFormController::validate().
+   */
+  public function validate(array $form, array &$form_state) {
+  }
+
+  /**
+   * Overrides Drupal\Core\Entity\EntityFormController::save().
+   */
+  public function save(array $form, array &$form_state) {
+    $picture_mapping = $this->getEntity($form_state);
+    $picture_mapping->save();
+
+    watchdog('picture', 'Picture mapping @label saved.', array('@label' => $picture_mapping->label()), WATCHDOG_NOTICE);
+    drupal_set_message(t('Picture mapping %label saved.', array('%label' => $picture_mapping->label())));
+
+    $form_state['redirect'] = 'admin/config/media/picturemapping';
+  }
+
+}
diff --git a/core/modules/picture/lib/Drupal/picture/PictureMappingListController.php b/core/modules/picture/lib/Drupal/picture/PictureMappingListController.php
new file mode 100644
index 0000000..6329f92
--- /dev/null
+++ b/core/modules/picture/lib/Drupal/picture/PictureMappingListController.php
@@ -0,0 +1,35 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\picture\PictureListController.
+ */
+
+namespace Drupal\picture;
+
+use Drupal\Core\Config\Entity\ConfigEntityListController;
+use Drupal\Core\Entity\EntityInterface;
+use Drupal\picture\PictureMapping;
+
+/**
+ * Provides a listing of Pictures.
+ */
+class PictureMappingListController extends ConfigEntityListController {
+
+  /**
+   * Overrides Drupal\config\EntityListControllerBase::hookMenu().
+   */
+  public function hookMenu() {
+    $path = $this->entityInfo['list path'];
+    $items = parent::hookMenu();
+
+    // Override the access callback.
+    $items[$path]['title'] = 'Picture Mappings';
+    $items[$path]['description'] = 'Manage list of pictures.';
+    $items[$path]['access callback'] = 'user_access';
+    $items[$path]['access arguments'] = array('administer pictures');
+
+    return $items;
+  }
+
+}
diff --git a/core/modules/picture/lib/Drupal/picture/Plugin/field/formatter/PictureFormatter.php b/core/modules/picture/lib/Drupal/picture/Plugin/field/formatter/PictureFormatter.php
new file mode 100644
index 0000000..4a046d2
--- /dev/null
+++ b/core/modules/picture/lib/Drupal/picture/Plugin/field/formatter/PictureFormatter.php
@@ -0,0 +1,189 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\picture\Plugin\field\formatter\PictureFormatter.
+ */
+
+namespace Drupal\picture\Plugin\field\formatter;
+
+use Drupal\Core\Annotation\Plugin;
+use Drupal\Core\Annotation\Translation;
+use Drupal\field\Plugin\Type\Formatter\FormatterBase;
+use Drupal\Core\Entity\EntityInterface;
+
+/**
+ * Plugin for picture formatter.
+ *
+ * @Plugin(
+ *   id = "picture",
+ *   module = "picture",
+ *   label = @Translation("Picture"),
+ *   field_types = {
+ *     "image",
+ *   },
+ *   settings = {
+ *     "picture_mapping" = "",
+ *     "fallback_image_style" = "",
+ *     "image_link" = "",
+ *   }
+ * )
+ */
+class PictureFormatter extends FormatterBase {
+
+  /**
+   * Implements Drupal\field\Plugin\Type\Formatter\FormatterInterface::settingsForm().
+   */
+  public function settingsForm(array $form, array &$form_state) {
+    $picture_options = array();
+    $picture_mappings = entity_load_multiple('picture_mapping');
+    if ($picture_mappings && !empty($picture_mappings)) {
+      foreach ($picture_mappings as $machine_name => $picture_mapping) {
+        $picture_options[$machine_name] = $picture_mapping->label();
+      }
+    }
+
+    $elements['picture_mapping'] = array(
+      '#title' => t('Picture mapping'),
+      '#type' => 'select',
+      '#default_value' => $this->getSetting('picture_mapping'),
+      '#required' => TRUE,
+      '#options' => $picture_options,
+    );
+
+    $image_styles = image_style_options(FALSE);
+    $elements['fallback_image_style'] = array(
+      '#title' => t('Fallback image style'),
+      '#type' => 'select',
+      '#default_value' => $this->getSetting('fallback_image_style'),
+      '#empty_option' => t('Automatic'),
+      '#options' => $image_styles,
+    );
+
+    $link_types = array(
+      'content' => t('Content'),
+      'file' => t('File'),
+    );
+    $elements['image_link'] = array(
+      '#title' => t('Link image to'),
+      '#type' => 'select',
+      '#default_value' => $this->getSetting('image_link'),
+      '#empty_option' => t('Nothing'),
+      '#options' => $link_types,
+    );
+
+    return $elements;
+  }
+
+  /**
+   * Implements Drupal\field\Plugin\Type\Formatter\FormatterInterface::settingsForm().
+   */
+  public function settingsSummary() {
+    $summary = array();
+
+    $picture_mapping = entity_load('picture_mapping', $this->getSetting('picture_mapping'));
+    if ($picture_mapping) {
+      $summary[] = t('Picture mapping: @picture_mapping', array('@picture_mapping' => $picture_mapping->label()));
+    }
+    else {
+      $summary[] = t("Picture mapping doesn't exists");
+    }
+
+    $image_styles = image_style_options(FALSE);
+    unset($image_styles['']);
+    if (isset($image_styles[$this->getSetting('fallback_image_style')])) {
+      $summary[] = t('Fallback Image style: @style', array('@style' => $image_styles[$this->getSetting('fallback_image_style')]));
+    }
+    else {
+      $summary[] = t('Automatic fallback');
+    }
+
+    $link_types = array(
+      'content' => t('Linked to content'),
+      'file' => t('Linked to file'),
+    );
+    // Display this setting only if image is linked.
+    if (isset($link_types[$this->getSetting('image_link')])) {
+      $summary[] = $link_types[$this->getSetting('image_link')];
+    }
+
+    return implode('<br />', $summary);
+  }
+
+  /**
+   * Implements Drupal\field\Plugin\Type\Formatter\FormatterInterface::viewElements().
+   */
+  public function viewElements(EntityInterface $entity, $langcode, array $items) {
+    $elements = array();
+    // Check if the formatter involves a link.
+    if ($this->getSetting('image_link') == 'content') {
+      $uri = $entity->uri();
+    }
+    elseif ($this->getSetting('image_link') == 'file') {
+      $link_file = TRUE;
+    }
+
+    $breakpoint_styles = array();
+    $fallback_image_style = '';
+
+    $picture_mapping = entity_load('picture_mapping', $this->getSetting('picture_mapping'));
+    if ($picture_mapping) {
+      foreach ($picture_mapping->mappings as $breakpoint_name => $multipliers) {
+        // Make sure there are multipliers.
+        if (!empty($multipliers)) {
+          // Make sure that the breakpoint exists and is enabled.
+          // @todo add the following is breakpoint->status is added again:
+          // $picture_mapping->breakpointGroup->breakpoints[$breakpoint_name]->status
+          if (isset($picture_mapping->breakpointGroup->breakpoints[$breakpoint_name])) {
+          $breakpoint = $picture_mapping->breakpointGroup->breakpoints[$breakpoint_name];
+
+          // Determine the enabled multipliers.
+          $multipliers = array_intersect_key($multipliers, $breakpoint->multipliers);
+            foreach ($multipliers as $multiplier => $image_style) {
+              // Make sure the multiplier still exists.
+              //if (!empty(array_intersect($multiplier, $breakpoint->multipliers))) {
+              if (!empty($image_style)) {
+                // First mapping found is used as fallback.
+                if (empty($fallback_image_style)) {
+                  $fallback_image_style = $image_style;
+                }
+                if (!isset($breakpoint_styles[$breakpoint_name])) {
+                  $breakpoint_styles[$breakpoint_name] = array();
+                }
+                $breakpoint_styles[$breakpoint_name][$multiplier] = $image_style;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // Check if the user defined a custom fallback image style.
+    if ($this->getSetting('fallback_image_style')) {
+      $fallback_image_style = $this->getSetting('fallback_image_style');
+    }
+
+    foreach ($items as $delta => $item) {
+      if (isset($link_file)) {
+        $uri = array(
+          'path' => file_create_url($item['uri']),
+          'options' => array(),
+        );
+      }
+      $elements[$delta] = array(
+        '#theme' => 'picture_formatter',
+        '#attached' => array('library' => array(
+          array('picture', 'matchmedia'),
+          array('picture', 'picturefill'),
+        )),
+        '#item' => $item,
+        '#image_style' => $fallback_image_style,
+        '#breakpoints' => $breakpoint_styles,
+        '#path' => isset($uri) ? $uri : '',
+      );
+    }
+
+    return $elements;
+  }
+}
+
diff --git a/core/modules/picture/lib/Drupal/picture/Tests/PictureAdminUITest.php b/core/modules/picture/lib/Drupal/picture/Tests/PictureAdminUITest.php
new file mode 100644
index 0000000..744cd77
--- /dev/null
+++ b/core/modules/picture/lib/Drupal/picture/Tests/PictureAdminUITest.php
@@ -0,0 +1,143 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\picture\Tests\PictureAdminUITest.
+ */
+
+namespace Drupal\picture\Tests;
+
+use Drupal\simpletest\WebTestBase;
+use Drupal\picture\PictureMapping;
+use Drupal\breakpoint\BreakpointGroup;
+use Drupal\breakpoint\Breakpoint;
+
+/**
+ * Tests for breakpoint sets admin interface.
+ */
+class PictureAdminUITest extends WebTestBase {
+
+  /**
+   * Modules to enable.
+   *
+   * @var array
+   */
+  public static $modules = array('picture');
+
+  /**
+   * Drupal\simpletest\WebTestBase\getInfo().
+   */
+  public static function getInfo() {
+    return array(
+      'name' => 'Picture administration functionality',
+      'description' => 'Thoroughly test the administrative interface of the picture module.',
+      'group' => 'Picture',
+    );
+  }
+
+  /**
+   * Drupal\simpletest\WebTestBase\setUp().
+   */
+  public function setUp() {
+    parent::setUp();
+
+    // Create user.
+    $this->admin_user = $this->drupalCreateUser(array(
+      'administer pictures',
+    ));
+
+    $this->drupalLogin($this->admin_user);
+
+    // Add breakpoint_group and breakpoints.
+    $breakpoint_group = entity_create('breakpoint_group', array(
+      'id' => 'atestset',
+      'label' => 'A test set',
+      'sourceType' => Breakpoint::SOURCE_TYPE_CUSTOM,
+    ));
+
+    $breakpoints = array();
+    $breakpoint_names = array('small', 'medium', 'large');
+    for ($i = 0; $i < 3; $i++) {
+      $width = ($i + 1) * 200;
+      $breakpoint = entity_create('breakpoint', array(
+        'name' => $breakpoint_names[$i],
+        'mediaQuery' => "(min-width: {$width}px)",
+        'source' => 'user',
+        'sourceType' => 'custom',
+        'multipliers' => array(
+          '1.5x' => 0,
+          '2x' => '2x',
+        ),
+      ));
+      $breakpoint->save();
+      $breakpoint_group->breakpoints[$breakpoint->id()] = $breakpoint;
+    }
+    $breakpoint_group->save();
+
+  }
+
+  /**
+   * Test picture administration functionality.
+   */
+  public function testPictureAdmin() {
+    // We start without any default mappings.
+    $this->drupalGet('admin/config/media/picturemapping');
+    $this->assertText('There is no Picture mapping yet.');
+
+    // Add a new picture mapping, our breakpoint set should be selected.
+    $this->drupalGet('admin/config/media/picturemapping/add');
+    $this->assertFieldByName('breakpointGroup', 'atestset');
+
+    // Create a new group.
+    $edit = array(
+      'label' => 'Mapping One',
+      'id' => 'mapping_one',
+      'breakpointGroup' => 'atestset',
+    );
+    $this->drupalPost('admin/config/media/picturemapping/add', $edit, t('Save'));
+
+    // Check if the new group is created.
+    $this->assertResponse(200);
+    $this->drupalGet('admin/config/media/picturemapping');
+    $this->assertNoText('There is no Picture mapping yet.');
+    $this->assertText('Mapping One');
+    $this->assertText('mapping_one');
+
+    // Edit the group.
+    $this->drupalGet('admin/config/media/picturemapping/mapping_one/edit');
+    $this->assertFieldByName('label', 'Mapping One');
+    $this->assertFieldByName('breakpointGroup', 'atestset');
+
+    // Check if the dropdows are present for the mappings.
+    $this->assertFieldByName('mappings[custom.user.small][1x]', '');
+    $this->assertFieldByName('mappings[custom.user.small][2x]', '');
+    $this->assertFieldByName('mappings[custom.user.medium][1x]', '');
+    $this->assertFieldByName('mappings[custom.user.medium][2x]', '');
+    $this->assertFieldByName('mappings[custom.user.large][1x]', '');
+    $this->assertFieldByName('mappings[custom.user.large][2x]', '');
+
+    // Save mappings for 1x variant only.
+    $edit = array(
+      'label' => 'Mapping One',
+      'breakpointGroup' => 'atestset',
+      'mappings[custom.user.small][1x]' => 'thumbnail',
+      'mappings[custom.user.medium][1x]' => 'medium',
+      'mappings[custom.user.large][1x]' => 'large',
+    );
+    $this->drupalPost('admin/config/media/picturemapping/mapping_one/edit', $edit, t('Save'));
+    $this->drupalGet('admin/config/media/picturemapping/mapping_one/edit');
+    $this->assertFieldByName('mappings[custom.user.small][1x]', 'thumbnail');
+    $this->assertFieldByName('mappings[custom.user.small][2x]', '');
+    $this->assertFieldByName('mappings[custom.user.medium][1x]', 'medium');
+    $this->assertFieldByName('mappings[custom.user.medium][2x]', '');
+    $this->assertFieldByName('mappings[custom.user.large][1x]', 'large');
+    $this->assertFieldByName('mappings[custom.user.large][2x]', '');
+
+    // Delete the mapping.
+    $this->drupalGet('admin/config/media/picturemapping/mapping_one/delete');
+    $this->drupalPost(NULL, array(), t('Delete'));
+    $this->drupalGet('admin/config/media/picturemapping');
+    $this->assertText('There is no Picture mapping yet.');
+  }
+
+}
diff --git a/core/modules/picture/lib/Drupal/picture/Tests/PictureFieldDisplayTest.php b/core/modules/picture/lib/Drupal/picture/Tests/PictureFieldDisplayTest.php
new file mode 100644
index 0000000..d0e19be
--- /dev/null
+++ b/core/modules/picture/lib/Drupal/picture/Tests/PictureFieldDisplayTest.php
@@ -0,0 +1,189 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\picture\Tests\PictureFieldDisplayTest.
+ */
+
+namespace Drupal\picture\Tests;
+
+use Drupal\picture\PictureMapping;
+use Drupal\breakpoint\BreakpointGroup;
+use Drupal\breakpoint\Breakpoint;
+use Drupal\image\Tests\ImageFieldTestBase;
+
+/**
+ * Test class to check that formatters and display settings are working.
+ */
+class PictureFieldDisplayTest extends ImageFieldTestBase {
+
+  /**
+   * Modules to enable.
+   *
+   * @var array
+   */
+  public static $modules = array('field_ui', 'picture');
+
+  /**
+   * Drupal\simpletest\WebTestBase\getInfo().
+   */
+  public static function getInfo() {
+    return array(
+      'name' => 'Picture field display tests',
+      'description' => 'Test picture display formatter.',
+      'group' => 'Picture',
+    );
+  }
+
+  /**
+   * Drupal\simpletest\WebTestBase\setUp().
+   */
+  public function setUp() {
+    parent::setUp();
+
+    // Create user.
+    $this->admin_user = $this->drupalCreateUser(array('administer pictures', 'access content', 'access administration pages', 'administer site configuration', 'administer content types', 'administer nodes', 'create article content', 'edit any article content', 'delete any article content', 'administer image styles'));
+    $this->drupalLogin($this->admin_user);
+
+    // Add breakpoint_group and breakpoints.
+    $breakpoint_group = entity_create('breakpoint_group', array(
+      'id' => 'atestset',
+      'label' => 'A test set',
+      'sourceType' => Breakpoint::SOURCE_TYPE_CUSTOM,
+    ));
+
+    $breakpoints = array();
+    $breakpoint_names = array('small', 'medium', 'large');
+    for ($i = 0; $i < 3; $i++) {
+      $width = ($i + 1) * 200;
+      $breakpoint = entity_create('breakpoint', array(
+        'name' => $breakpoint_names[$i],
+        'mediaQuery' => "(min-width: {$width}px)",
+        'source' => 'user',
+        'sourceType' => 'custom',
+        'multipliers' => array(
+          '1.5x' => 0,
+          '2x' => '2x',
+        ),
+      ));
+      $breakpoint->save();
+      $breakpoint_group->breakpoints[$breakpoint->id()] = $breakpoint;
+    }
+    $breakpoint_group->save();
+
+    // Add picture mapping.
+    $picture_mapping = new PictureMapping();
+    $picture_mapping->id = 'mapping_one';
+    $picture_mapping->label = 'Mapping One';
+    $picture_mapping->breakpointGroup = 'atestset';
+    $picture_mapping->save();
+    $picture_mapping->mappings['custom.user.small']['1x'] = 'thumbnail';
+    $picture_mapping->mappings['custom.user.medium']['1x'] = 'medium';
+    $picture_mapping->mappings['custom.user.large']['1x'] = 'large';
+    $picture_mapping->save();
+  }
+
+  /**
+   * Test picture formatters on node display for public files.
+   */
+  public function testPictureFieldFormattersPublic() {
+    $this->_testPictureFieldFormatters('public');
+  }
+
+  /**
+   * Test picture formatters on node display for private files.
+   */
+  public function testPictureFieldFormattersPrivate() {
+    // Remove access content permission from anonymous users.
+    user_role_change_permissions(DRUPAL_ANONYMOUS_RID, array('access content' => FALSE));
+    $this->_testPictureFieldFormatters('private');
+  }
+
+  /**
+   * Test picture formatters on node display.
+   */
+  public function _testPictureFieldFormatters($scheme) {
+    $field_name = drupal_strtolower($this->randomName());
+    $this->createImageField($field_name, 'article', array('uri_scheme' => $scheme));
+    // Create a new node with an image attached.
+    $test_image = current($this->drupalGetTestFiles('image'));
+    $nid = $this->uploadNodeImage($test_image, $field_name, 'article');
+    $node = node_load($nid, TRUE);
+
+    // Use the picture formatter.
+    $instance = field_info_instance('node', $field_name, 'article');
+    $instance['display']['default']['type'] = 'picture';
+    $instance['display']['default']['module'] = 'picture';
+
+    // Test that the default formatter is being used.
+    $image_uri = file_load($node->{$field_name}[LANGUAGE_NOT_SPECIFIED][0]['fid'])->uri;
+    $image_info = array(
+      'uri' => $image_uri,
+      'width' => 40,
+      'height' => 20,
+    );
+    $default_output = theme('image', $image_info);
+    $this->assertRaw($default_output, 'Default formatter displaying correctly on full node view.');
+
+    // Use the picture formatter linked to file formatter.
+    $instance = field_info_instance('node', $field_name, 'article');
+    $instance['display']['default']['type'] = 'picture';
+    $instance['display']['default']['module'] = 'picture';
+    $instance['display']['default']['settings']['image_link'] = 'file';
+    field_update_instance($instance);
+    $default_output = l(theme('image', $image_info), file_create_url($image_uri), array('html' => TRUE));
+    $this->drupalGet('node/' . $nid);
+    $this->assertRaw($default_output, 'Image linked to file formatter displaying correctly on full node view.');
+    // Verify that the image can be downloaded.
+    $this->assertEqual(file_get_contents($test_image->uri), $this->drupalGet(file_create_url($image_uri)), 'File was downloaded successfully.');
+    if ($scheme == 'private') {
+      // Only verify HTTP headers when using private scheme and the headers are
+      // sent by Drupal.
+      $this->assertEqual($this->drupalGetHeader('Content-Type'), 'image/png', 'Content-Type header was sent.');
+      $this->assertEqual($this->drupalGetHeader('Content-Disposition'), 'inline; filename="' . $test_image->filename . '"', 'Content-Disposition header was sent.');
+      $this->assertTrue(strstr($this->drupalGetHeader('Cache-Control'), 'private') !== FALSE, 'Cache-Control header was sent.');
+
+      // Log out and try to access the file.
+      $this->drupalLogout();
+      $this->drupalGet(file_create_url($image_uri));
+      $this->assertResponse('403', 'Access denied to original image as anonymous user.');
+
+      // Log in again.
+      $this->drupalLogin($this->admin_user);
+    }
+
+    // Use the picture formatter with a picture mapping.
+    $instance['display']['default']['settings']['picture_mapping'] = 'mapping_one';
+    field_update_instance($instance);
+    // Output should contain all image styles and all breakpoints.
+    $this->drupalGet('node/' . $nid);
+    $this->assertRaw('/styles/thumbnail/');
+    $this->assertRaw('/styles/medium/');
+    $this->assertRaw('/styles/large/');
+    $this->assertRaw('media="(min-width: 200px)"');
+    $this->assertRaw('media="(min-width: 400px)"');
+    $this->assertRaw('media="(min-width: 600px)"');
+
+    // Test the fallback image style.
+    $instance['display']['default']['settings']['image_link'] = '';
+    $instance['display']['default']['settings']['fallback_image_style'] = 'large';
+    field_update_instance($instance);
+
+    $this->drupalGet(image_style_url('large', $image_uri));
+    $image_info['uri'] = $image_uri;
+    $image_info['width'] = 480;
+    $image_info['height'] = 240;
+    $image_info['style_name'] = 'large';
+    $default_output = '<noscript>' . theme('image_style', $image_info) . '</noscript>';
+    $this->drupalGet('node/' . $nid);
+    $this->assertRaw($default_output, 'Image style thumbnail formatter displaying correctly on full node view.');
+
+    if ($scheme == 'private') {
+      // Log out and try to access the file.
+      $this->drupalLogout();
+      $this->drupalGet(image_style_url('large', $image_uri));
+      $this->assertResponse('403', 'Access denied to image style thumbnail as anonymous user.');
+    }
+  }
+
+}
diff --git a/core/modules/picture/picture.info b/core/modules/picture/picture.info
new file mode 100644
index 0000000..0b7929b
--- /dev/null
+++ b/core/modules/picture/picture.info
@@ -0,0 +1,9 @@
+name = Picture
+description = Picture element
+package = Core
+version = VERSION
+core = 8.x
+dependencies[] = breakpoint
+dependencies[] = config
+dependencies[] = image
+configure = admin/config/media/picturemapping
\ No newline at end of file
diff --git a/core/modules/picture/picture.module b/core/modules/picture/picture.module
new file mode 100644
index 0000000..2811a2b
--- /dev/null
+++ b/core/modules/picture/picture.module
@@ -0,0 +1,334 @@
+<?php
+
+/**
+ * @file
+ * Picture display formatter for image fields.
+ */
+
+use \Drupal\picture\PictureMapping;
+use \Drupal\Core\Template\Attribute;
+
+/**
+ * Implements hook_permission().
+ */
+function picture_permission() {
+  return array(
+    'administer pictures' => array(
+      'title' => t('Administer Pictures'),
+      'description' => t('Administer Pictures'),
+    ),
+  );
+}
+
+/**
+ * Implements hook_menu().
+ */
+function picture_menu() {
+  $items = array();
+
+  $items['admin/config/media/picturemapping'] = array(
+    'title' => 'Picture Mappings',
+    'description' => 'Manage picture mappings',
+    'access arguments' => array('administer pictures'),
+    'weight' => 10,
+    'page callback' => 'picture_mapping_page',
+    'file' => 'picture_mapping.admin.inc',
+  );
+  $items['admin/config/media/picturemapping/add'] = array(
+    'title' => 'Add picture mapping',
+    'page callback' => 'picture_mapping_page_add',
+    'access callback' => 'user_access',
+    'access arguments' => array('administer pictures'),
+    'type' => MENU_LOCAL_ACTION,
+    'file' => 'picture_mapping.admin.inc',
+  );
+  $items['admin/config/media/picturemapping/%picture_mapping/edit'] = array(
+    'title' => 'Edit picture mapping',
+    'page callback' => 'picture_mapping_page_edit',
+    'page arguments' => array(4),
+    'access callback' => 'user_access',
+    'access arguments' => array('administer pictures'),
+    'file' => 'picture_mapping.admin.inc',
+  );
+  $items['admin/config/media/picturemapping/%picture_mapping/duplicate'] = array(
+    'title' => 'Duplicate picture mapping',
+    'page callback' => 'picture_mapping_page_duplicate',
+    'page arguments' => array(4),
+    'access callback' => 'user_access',
+    'access arguments' => array('administer pictures'),
+    'file' => 'picture_mapping.admin.inc',
+  );
+  $items['admin/config/media/picturemapping/%picture_mapping/delete'] = array(
+    'title' => 'Delete',
+    'page callback' => 'drupal_get_form',
+    'page arguments' => array('picture_mapping_action_confirm', 4, 5),
+    'access callback' => 'user_access',
+    'access arguments' => array('administer pictures'),
+    'file' => 'picture_mapping.admin.inc',
+  );
+
+  return $items;
+}
+
+/**
+ * Implements hook_entity_info().
+ */
+function picture_entity_info() {
+  $types['picture_mapping'] = array(
+    'label' => 'Picture mapping',
+    'entity class' => 'Drupal\picture\PictureMapping',
+    'controller class' => 'Drupal\Core\Config\Entity\ConfigStorageController',
+    'config prefix' => 'picture.mappings',
+    'entity keys' => array(
+      'id' => 'id',
+      'label' => 'label',
+      'uuid' => 'uuid',
+    ),
+    'form controller class' => array(
+      'default' => 'Drupal\picture\PictureMappingFormController',
+      'add' => 'Drupal\picture\PictureMappingFormController',
+      'duplicate' => 'Drupal\picture\PictureMappingFormController',
+    ),
+    'list controller class' => 'Drupal\picture\PictureMappingListController',
+    'list path' => 'admin/config/media/picturemapping',
+    'uri callback' => 'picture_mapping_uri',
+  );
+
+  return $types;
+}
+
+/**
+ * Implements hook_library_info().
+ */
+function picture_library_info() {
+  $libraries['matchmedia'] = array(
+    'title' => t('Matchmedia'),
+    'website' => 'https://github.com/attiks/picturefill-proposal',
+    'version' => '0.1',
+    'js' => array(
+      drupal_get_path('module', 'picture') . '/picturefill/matchmedia.js' => array('type' => 'file', 'weight' => -10, 'group' => JS_DEFAULT),
+    ),
+  );
+  $libraries['picturefill'] = array(
+    'title' => t('Picturefill'),
+    'website' => 'https://github.com/attiks/picturefill-proposal',
+    'version' => '0.1',
+    'js' => array(
+      drupal_get_path('module', 'picture') . '/picturefill/picturefill.js' => array('type' => 'file', 'weight' => -10, 'group' => JS_DEFAULT),
+    ),
+  );
+  return $libraries;
+}
+
+/**
+ * Load one picture by its identifier.
+ *
+ * @param int $id
+ *   The id of the picture mapping to load.
+ *
+ * @return Drupal\picture\Picture
+ *   The entity object, or FALSE if there is no entity with the given id.
+ *
+ * @todo Needed for menu_callback
+ *
+ * @see http://drupal.org/node/1798214
+ *
+ */
+function picture_mapping_load($id) {
+  return entity_load('picture_mapping', $id);
+}
+
+/**
+ * Picture uri callback.
+ */
+function picture_mapping_uri(PictureMapping $picture_mapping) {
+  return array(
+    'path' => 'admin/config/media/picturemapping/' . $picture_mapping->id(),
+  );
+}
+
+/**
+ * Picture uri callback.
+ */
+function picture_mapping_set_uri(PictureMapping $picture_mapping) {
+  return array(
+    'path' => 'admin/config/media/picturemapping/' . $picture_mapping->id(),
+  );
+}
+
+/**
+ * Implements hook_theme().
+ */
+function picture_theme() {
+  return array(
+    'picture' => array(
+      'variables' => array(
+        'style_name' => NULL,
+        'path' => NULL,
+        'width' => NULL,
+        'height' => NULL,
+        'alt' => '',
+        'title' => NULL,
+        'attributes' => array(),
+        'breakpoints' => array(),
+      ),
+    ),
+    'picture_formatter' => array(
+      'variables' => array(
+        'item' => NULL,
+        'path' => NULL,
+        'image_style' => NULL,
+        'breakpoints' => array(),
+      ),
+    ),
+    'picture_source' => array(
+      'variables' => array(
+        'src' => NULL,
+        'srcset' => NULL,
+        'dimension' => NULL,
+        'media' => NULL,
+      ),
+    ),
+  );
+}
+
+function theme_picture_formatter($variables) {
+  if (!isset($variables['breakpoints']) || empty($variables['breakpoints'])) {
+    return theme('image_formatter', $variables);
+  }
+
+  $item = $variables['item'];
+
+  // Do not output an empty 'title' attribute.
+  if (isset($item['title']) && drupal_strlen($item['title']) == 0) {
+    unset($item['title']);
+  }
+
+  $item['style_name'] = $variables['image_style'];
+  $item['breakpoints'] = $variables['breakpoints'];
+
+  if (!isset($item['path']) && isset($variables['uri'])) {
+    $item['path'] = $variables['uri'];
+  }
+  $output = theme('picture', $item);
+
+  if (isset($variables['path']['path'])) {
+    $path = $variables['path']['path'];
+    $options = isset($variables['path']['options']) ? $variables['path']['options'] : array();
+    $options['html'] = TRUE;
+    $output = l($output, $path, $options);
+  }
+  return $output;
+}
+
+/**
+ * Theme a picture element.
+ */
+function theme_picture($variables) {
+  // Make sure that width and height are proper values
+  // If they exists we'll output them
+  // @see http://www.w3.org/community/respimg/2012/06/18/florians-compromise/
+  if (isset($variables['width']) && empty($variables['width'])) {
+    unset($variables['width']);
+    unset($variables['height']);
+  }
+  elseif (isset($variables['height']) && empty($variables['height'])) {
+    unset($variables['width']);
+    unset($variables['height']);
+  }
+
+  $sources = array();
+  $output = array();
+
+  // Fallback image, output as source with media query.
+  $sources[] = array(
+    'src' => image_style_url($variables['style_name'], $variables['uri']),
+    'dimensions' => picture_get_image_dimensions($variables),
+  );
+
+  // All breakpoints and multipliers.
+  foreach ($variables['breakpoints'] as $breakpoint_name => $multipliers) {
+    $breakpoint = breakpoint_load($breakpoint_name);
+    if ($breakpoint) {
+      $new_sources = array();
+      foreach ($multipliers as $multiplier => $image_style) {
+        $new_source = $variables;
+        $new_source['style_name'] = $image_style;
+        $new_source['#multiplier'] = $multiplier;
+        $new_sources[] = $new_source;
+      }
+
+      // Only one image, use src.
+      if (count($new_sources) == 1) {
+        $sources[] = array(
+          'src' => image_style_url($new_sources[0]['style_name'], $new_sources[0]['uri']),
+          'dimensions' => picture_get_image_dimensions($new_sources[0]),
+          'media' => $breakpoint->mediaQuery,
+        );
+      }
+      else {
+        // Mutliple images, use srcset.
+        $srcset = array();
+        foreach ($new_sources as $new_source) {
+          $srcset[] = image_style_url($new_source['style_name'], $new_source['uri']) . ' ' . $new_source['#multiplier'];
+        }
+        $sources[] = array(
+          'srcset' => implode(', ', $srcset),
+          'dimensions' => picture_get_image_dimensions($new_sources[0]),
+          'media' => $breakpoint->mediaQuery,
+        );
+      }
+    }
+  }
+
+  if (!empty($sources)) {
+    $attributes = array();
+    foreach (array('alt', 'title') as $key) {
+      if (isset($variables[$key])) {
+        $attributes[$key] = $variables[$key];
+      }
+    }
+    $output[] = '<picture' . new Attribute($attributes) . '>';
+
+    // add source tags to the output.
+    foreach ($sources as $source) {
+      $output[] = theme('picture_source', $source);
+    }
+
+    // output the fallback image.
+    $output[] = '<noscript>' . theme('image_style', $variables) . '</noscript>';
+    $output[] = '</picture>';
+    return implode("\n", $output);
+  }
+}
+
+function theme_picture_source($variables) {
+  $output = array();
+  if (isset($variables['media']) && !empty($variables['media'])) {
+    if (!isset($variables['srcset'])) {
+      $output[] = '<!-- <source media="' . $variables['media'] . '" src="' . $variables['src'] . '" ' . new Attribute($variables['dimensions']) . ' /> -->';
+      $output[] = '<source media="' . $variables['media'] . '" src="' . $variables['src'] . '" ' . new Attribute($variables['dimensions']) . '/>';
+    }
+    elseif (!isset($variables['src'])) {
+      $output[] = '<!-- <source media="' . $variables['media'] . '" srcset="' . $variables['srcset'] . '" ' . new Attribute($variables['dimensions']) . ' /> -->';
+      $output[] = '<source media="' . $variables['media'] . '" srcset="' . $variables['srcset'] . '" ' . new Attribute($variables['dimensions']) . ' />';
+    }
+  }
+  else {
+    $output[] = '<!-- <source src="' . $variables['src'] . '" ' . new Attribute($variables['dimensions']) . ' /> -->';
+    $output[] = '<source src="' . $variables['src'] . '" ' . new Attribute($variables['dimensions']) . '/>';
+  }
+  return implode("\n", $output);
+}
+
+function picture_get_image_dimensions($variables) {
+  // Determine the dimensions of the styled image.
+  $dimensions = array(
+    'width' => $variables['width'],
+    'height' => $variables['height'],
+  );
+
+  image_style_transform_dimensions($variables['style_name'], $dimensions);
+
+  return $dimensions;
+}
diff --git a/core/modules/picture/picture_mapping.admin.inc b/core/modules/picture/picture_mapping.admin.inc
new file mode 100644
index 0000000..fbae3f3
--- /dev/null
+++ b/core/modules/picture/picture_mapping.admin.inc
@@ -0,0 +1,93 @@
+<?php
+
+/**
+ * @file
+ * Administration functions to maintain picture mappings.
+ */
+
+use \Drupal\picture\PictureMapping;
+
+/**
+ * Page callback: Presents the picture list page.
+ *
+ * @return
+ *   A render array for a page containing a list of content.
+ *
+ * @see picture_menu()
+ */
+function picture_mapping_page() {
+  $controller = entity_list_controller('picture_mapping');
+  return $controller->render();
+}
+
+/**
+ * Page callback: Presents the picture mapping editing form.
+ *
+ * @param Drupal\picture\PictureMapping $picture_mapping
+ *
+ * @return
+ *   A render array for a page containing a list of content.
+ *
+ * @see picture_menu()
+ */
+function picture_mapping_page_edit($picture_mapping) {
+  drupal_set_title(t('<em>Edit picture mapping</em> @label', array('@label' => $picture_mapping->label())), PASS_THROUGH);
+  return entity_get_form($picture_mapping);
+}
+
+/**
+ * Page callback: Provides the new picture mapping addition form.
+ *
+ * @return
+ *   A render array for a page containing a list of content.
+ *
+ * @see picture_menu()
+ */
+function picture_mapping_page_add() {
+  $picture_mapping = entity_create('picture_mapping', array());
+  $form = entity_get_form($picture_mapping);
+  return $form;
+}
+
+/**
+ * Page callback: Form constructor for picture action confirmation form.
+ *
+ * @param Drupal\picture\PictureMapping $picture_mapping
+ * @param string $action
+ *
+ * @see picture_menu()
+ */
+function picture_mapping_action_confirm($form, &$form_state, $picture_mapping, $action) {
+  // Always provide entity id in the same form key as in the entity edit form.
+  if (in_array($action, array('delete'))) {
+    $form['id'] = array('#type' => 'value', '#value' => $picture_mapping->id());
+    $form['action'] = array('#type' => 'value', '#value' => $action);
+    $form_state['picture_mapping'] = $picture_mapping;
+    $form = confirm_form($form,
+      t('Are you sure you want to @action the picture_mapping %title?', array('@action' => $action, '%title' => $picture_mapping->label())),
+      'admin/config/media/picturemapping',
+      $action == 'delete' ? t('This action cannot be undone.') : '',
+      t(drupal_ucfirst($action)),
+      t('Cancel')
+    );
+  }
+  return $form;
+}
+
+/**
+ * Form submission handler for picture_action_confirm().
+ */
+function picture_mapping_action_confirm_submit($form, &$form_state) {
+  $picture_mapping = $form_state['picture_mapping'];
+  $action = $form_state['values']['action'];
+  $picture_mapping->{$action}();
+  $verb = '';
+  switch ($action) {
+    case 'delete':
+      $verb = 'deleted';
+      break;
+  }
+  drupal_set_message(t('Picture mapping %label has been @action.', array('%label' => $picture_mapping->label(), '@action' => $verb)));
+  watchdog('picture', 'Picture mapping %label has been @action.', array('%label' => $picture_mapping->label(), '@action' => $verb), WATCHDOG_NOTICE);
+  $form_state['redirect'] = 'admin/config/media/picturemapping';
+}
diff --git a/core/modules/picture/picturefill/matchmedia.js b/core/modules/picture/picturefill/matchmedia.js
new file mode 100644
index 0000000..adce5ab
--- /dev/null
+++ b/core/modules/picture/picturefill/matchmedia.js
@@ -0,0 +1,2 @@
+/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
+window.matchMedia=window.matchMedia||(function(e,f){var c,a=e.documentElement,b=a.firstElementChild||a.firstChild,d=e.createElement("body"),g=e.createElement("div");g.id="mq-test-1";g.style.cssText="position:absolute;top:-100em";d.appendChild(g);return function(h){g.innerHTML='&shy;<style media="'+h+'"> #mq-test-1 { width: 42px; }</style>';a.insertBefore(d,b);c=g.offsetWidth==42;a.removeChild(d);return{matches:c,media:h}}})(document);
\ No newline at end of file
diff --git a/core/modules/picture/picturefill/picturefill.js b/core/modules/picture/picturefill/picturefill.js
new file mode 100644
index 0000000..8e4c231
--- /dev/null
+++ b/core/modules/picture/picturefill/picturefill.js
@@ -0,0 +1,126 @@
+/*jshint loopfunc: true, browser: true, curly: true, eqeqeq: true, expr: true, forin: true, latedef: true, newcap: true, noarg: true, trailing: true, undef: true, unused: true */
+/*! Picturefill - Author: Scott Jehl, 2012 | License: MIT/GPLv2 */
+(function( w ){
+
+  // Enable strict mode.
+  "use strict";
+
+  // Test if `<picture>` is supported natively, if so, exit.
+  if (!!(w.document.createElement('picture') && w.document.createElement('source') && w.HTMLPictureElement)) {
+    return;
+  }
+
+  w.picturefill = function() {
+    // Copy attributes from the source to the destination.
+    function _copyAttributes(src, tar) {
+      if (src.getAttribute('width') && src.getAttribute('height')) {
+        tar.width = src.getAttribute('width');
+        tar.height = src.getAttribute('height');
+      }
+    }
+
+    // Get all picture tags.
+    var ps = w.document.getElementsByTagName('picture');
+
+    // Loop the pictures.
+    for (var i = 0, il = ps.length; i < il; i++ ) {
+      var sources = ps[i].getElementsByTagName('source');
+      var picImg = null;
+      var matches = [];
+
+      // If no sources are found, they're likely erased from the DOM.
+      // Try finding them inside comments.
+      if (!sources.length) {
+        var picText = ps[i].innerHTML;
+        var frag = w.document.createElement('div');
+        // For IE9, convert the source elements to divs.
+        var srcs = picText.replace(/(<)source([^>]+>)/gmi, '$1div$2').match(/<div[^>]+>/gmi);
+
+        frag.innerHTML = srcs.join('');
+        sources = frag.getElementsByTagName('div');
+      }
+
+      // See which sources match.
+      for (var j = 0, jl = sources.length; j < jl; j++ ) {
+        var media = sources[j].getAttribute('media');
+        // if there's no media specified, OR w.matchMedia is supported
+        if (!media || (w.matchMedia && w.matchMedia(media).matches)) {
+          matches.push(sources[j]);
+        }
+      }
+
+      if (matches.length) {
+        // Grab the most appropriate (last) match.
+        var match = matches.pop();
+        var srcset = match.getAttribute('srcset');
+
+        // Find any existing img element in the picture element.
+        picImg = ps[i].getElementsByTagName('img')[0];
+
+        // Add a new img element if one doesn't exists.
+        if (!picImg) {
+          picImg = w.document.createElement('img');
+          picImg.alt = ps[i].getAttribute('alt');
+          ps[i].appendChild(picImg);
+        }
+
+        // Source element uses a srcset.
+        if (srcset) {
+          var screenRes = w.devicePixelRatio || 1;
+          // Split comma-separated `srcset` sources into an array.
+          sources = srcset.split(', ');
+
+          // Loop through each source/resolution in srcset.
+          for (var res = sources.length, r = res - 1; r >= 0; r-- ) {
+            // Remove any leading whitespace, then split on spaces.
+            var source = sources[ r ].replace(/^\s*/, '').replace(/\s*$/, '').split(' ');
+            // Parse out the resolution for each source in `srcset`.
+            var resMatch = parseFloat(source[1], 10);
+
+            if (screenRes >= resMatch) {
+              if (picImg.getAttribute('src') !== source[0]) {
+                var newImg = document.createElement('img');
+
+                newImg.src = source[0];
+                // When the image is loaded, set a width equal to that of the
+                // original’s intrinsic width divided by the screen resolution.
+                newImg.onload = function() {
+                  // Clone the original image into memory so the width is
+                  // unaffected by page styles.
+                  var w = this.cloneNode(true).width;
+                  if (w > 0) {
+                    this.width = (w / resMatch);
+                  }
+                };
+                // Copy width and height from the source tag to the img element.
+                _copyAttributes(match, newImg);
+                picImg.parentNode.replaceChild(newImg, picImg);
+              }
+              // We’ve matched, so bail out of the loop here.
+              break;
+            }
+          }
+        } else {
+          // No srcset used, so just use the 'src' value.
+          picImg.src = match.getAttribute('src');
+          // Copy width and height from the source tag to the img element.
+          _copyAttributes(match, picImg);
+        }
+      }
+    }
+  };
+
+  // Run on resize and domready (w.load as a fallback)
+  if (w.addEventListener) {
+    w.addEventListener('resize', w.picturefill, false);
+    w.addEventListener('DOMContentLoaded', function() {
+      w.picturefill();
+      // Run once only.
+      w.removeEventListener('load', w.picturefill, false);
+    }, false);
+    w.addEventListener('load', w.picturefill, false);
+  }
+  else if (w.attachEvent) {
+    w.attachEvent('onload', w.picturefill);
+  }
+})(this);