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..f072296 100644
--- a/core/modules/picture/lib/Drupal/picture/Entity/PictureMapping.php
+++ b/core/modules/picture/lib/Drupal/picture/Entity/PictureMapping.php
@@ -95,6 +95,16 @@ 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) {
+      list($source_type, $source, $name) = explode('.', $breakpoint_id);
+      $this->mappings[$source_type][$source][$name] = $mapping;
+    }
+
     parent::save();
     $this->loadBreakpointGroup();
     $this->loadAllMappings();
@@ -129,10 +139,14 @@ protected function loadAllMappings() {
     $this->mappings = array();
     if ($this->breakpointGroup) {
       foreach ($this->breakpointGroup->getBreakpoints() as $breakpoint_id => $breakpoint) {
+        // Get the components of the breakpoint ID to match the format of the
+        // configuration file.
+        list($source_type, $source, $name) = explode('.', $breakpoint_id);
+
         // 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($loaded_mappings[$source_type][$source][$name]['1x'])) {
+          $this->mappings[$breakpoint_id]['1x'] = $loaded_mappings[$source_type][$source][$name]['1x'];
         }

         // Get the mapping for the other multipliers.
@@ -140,8 +154,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($loaded_mappings[$source_type][$source][$name][$multiplier])) {
+                $this->mappings[$breakpoint_id][$multiplier] = $loaded_mappings[$source_type][$source][$name][$multiplier];
               }
             }
           }