diff --git a/core/modules/picture/config/schema/picture.schema.yml b/core/modules/picture/config/schema/picture.schema.yml
index 0650f26..3d53c44 100644
--- a/core/modules/picture/config/schema/picture.schema.yml
+++ b/core/modules/picture/config/schema/picture.schema.yml
@@ -18,10 +18,16 @@ picture.mappings.*:
       label: 'Mappings'
       sequence:
         - type: sequence
-          label: 'Mapping'
+          label: 'Source type'
           sequence:
-            - type: string
-              label: 'Image style'
+            - type: sequence
+              label: 'Source'
+              sequence:
+                - type: sequence
+                  label: 'Machine name'
+                  sequence:
+                    - type: string
+                      label: 'Image style'
     breakpointGroup:
       type: string
       label: 'Breakpoint group'
diff --git a/core/modules/picture/lib/Drupal/picture/Entity/PictureMapping.php b/core/modules/picture/lib/Drupal/picture/Entity/PictureMapping.php
index e6ce436..0500299 100644
--- a/core/modules/picture/lib/Drupal/picture/Entity/PictureMapping.php
+++ b/core/modules/picture/lib/Drupal/picture/Entity/PictureMapping.php
@@ -95,6 +95,23 @@ public function save() {
     if (isset($this->breakpointGroup) && is_object($this->breakpointGroup)) {
       $this->breakpointGroup = $this->breakpointGroup->id();
     }
+    // Split the breakpoint ids into their different parts, as dots as
+    // identifiers are not possible.
+    $loaded_mappings = $this->mappings;
+    $this->mappings = array();
+    foreach ($loaded_mappings as $breakpoint_id => $mapping) {
+      $map = &$this->mappings;
+      foreach (explode('.', $breakpoint_id) as $id) {
+        if (!is_array($map)) {
+          $map = array();
+        }
+        elseif (!isset($map[$id])) {
+          $map[$id] = array();
+        }
+        $map = &$map[$id];
+      }
+      $map = $mapping;
+    }
     parent::save();
     $this->loadBreakpointGroup();
     $this->loadAllMappings();
@@ -129,10 +146,21 @@ protected function loadAllMappings() {
     $this->mappings = array();
     if ($this->breakpointGroup) {
       foreach ($this->breakpointGroup->getBreakpoints() as $breakpoint_id => $breakpoint) {
+        // Get the mapping for this breakpoint id.
+        $mapping = &$loaded_mappings;
+        foreach (explode('.', $breakpoint_id) as $id) {
+          if (isset($mapping[$id])) {
+            $mapping = &$mapping[$id];
+          }
+          else {
+            $mapping = array();
+            break;
+          }
+        }
         // 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'];
+        if (isset($mapping['1x'])) {
+          $this->mappings[$breakpoint_id]['1x'] = $mapping['1x'];
         }
 
         // Get the mapping for the other multipliers.
@@ -140,8 +168,8 @@ protected function loadAllMappings() {
           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];
+              if (isset($mapping[$multiplier])) {
+                $this->mappings[$breakpoint_id][$multiplier] = $mapping[$multiplier];
               }
             }
           }