From d45bf0e68fe356588345a029c1643f240f356a33 Mon Sep 17 00:00:00 2001
From: Alex Gibson <alexgibson@users.noreply.github.com>
Date: Wed, 14 Dec 2022 18:06:34 +0000
Subject: [PATCH] Remove image macro use from split macro (mozorg) (Issue
 #12331) (#12479)

---
 bedrock/base/templates/macros-protocol.html   |   4 +-
 .../templates/includes/contentful/all.html    |   6 +-
 .../firefox/browsers/compare/index.html       |  11 +-
 bedrock/firefox/templates/firefox/faq.html    |  13 +-
 .../whatsnew-fx104-vpn-de-coupon.html         |  11 +-
 .../whatsnew/whatsnew-fx104-vpn-de.html       |  11 +-
 .../whatsnew-fx104-vpn-en-coupon.html         |  11 +-
 .../whatsnew/whatsnew-fx104-vpn-en.html       |  11 +-
 .../whatsnew-fx104-vpn-fr-coupon.html         |  11 +-
 .../whatsnew/whatsnew-fx104-vpn-fr.html       |  11 +-
 .../firefox/whatsnew/whatsnew-fx105-de-1.html |  31 +-
 .../firefox/whatsnew/whatsnew-fx105-de-2.html |  33 ++-
 .../firefox/whatsnew/whatsnew-fx105-fr.html   |  31 +-
 .../firefox/whatsnew/whatsnew-fx105-uk-1.html |  31 +-
 .../firefox/whatsnew/whatsnew-fx105-uk-2.html |  33 ++-
 .../foundation/annualreport/2019/index.html   |  58 +++-
 .../foundation/annualreport/2020/index.html   |  35 ++-
 .../foundation/annualreport/2021/index.html   | 268 ++++++++++--------
 .../mozorg/templates/mozorg/about/index.html  |  11 +-
 .../policy/lean-data/build-security.html      |  11 +-
 .../about/policy/lean-data/engage-users.html  |  11 +-
 .../mozorg/about/policy/lean-data/index.html  |  11 +-
 .../about/policy/lean-data/stay-lean.html     |  11 +-
 .../mozorg/templates/mozorg/contribute.html   |   7 +-
 .../mozorg/templates/mozorg/home/home.html    |  11 +-
 .../home/includes/firefox-family-promo.html   |  11 +-
 .../home/includes/firefox-mr106-promo.html    |  16 +-
 .../mozorg/home/includes/mr2-promo.html       |   8 +-
 .../templates/newsletter/family.html          |   7 +-
 .../vpn/resource-center/base-article.html     |  11 +-
 .../products/vpn/resource-center/landing.html |  18 +-
 31 files changed, 512 insertions(+), 252 deletions(-)

diff --git a/bedrock/base/templates/macros-protocol.html b/bedrock/base/templates/macros-protocol.html
index d25d54f97f8..ddee49e62f2 100644
--- a/bedrock/base/templates/macros-protocol.html
+++ b/bedrock/base/templates/macros-protocol.html
@@ -123,7 +123,7 @@
               width=image_width
             ) }}
           {% else %}
-            {{ image }}
+            {{ image|safe }}
           {% endif %}
         </div>
       {% elif media_include %}
@@ -153,7 +153,7 @@
             width=image_width
           ) }}
           {% else %}
-            {{ image }}
+            {{ image|safe }}
           {% endif %}
         </div>
       {% elif media_include %}
diff --git a/bedrock/contentful/templates/includes/contentful/all.html b/bedrock/contentful/templates/includes/contentful/all.html
index 32dfc05a069..ee866f73f83 100644
--- a/bedrock/contentful/templates/includes/contentful/all.html
+++ b/bedrock/contentful/templates/includes/contentful/all.html
@@ -131,6 +131,8 @@ <h2 class="mzp-c-section-heading">{{ entry.heading }}</h2>
         {% set loading = 'lazy' %}
       {% endif %}
 
+      {% set image = '<img class="mzp-c-split-media-asset" src="' ~ entry.image ~ '" loading="' ~ loading ~ '">' %}
+
       {% call split(
         block_class=entry.block_class,
         body_class=entry.body_class,
@@ -138,9 +140,7 @@ <h2 class="mzp-c-section-heading">{{ entry.heading }}</h2>
         media_class=entry.media_class,
         mobile_class=entry.mobile_class,
         media_after=entry.media_after,
-        image_url=entry.image,
-        include_highres_image=False,
-        loading=loading,
+        image=image
       ) %}
         {{ entry.body|external_html }}
 
diff --git a/bedrock/firefox/templates/firefox/browsers/compare/index.html b/bedrock/firefox/templates/firefox/browsers/compare/index.html
index f45b769e21d..4566ed7da02 100644
--- a/bedrock/firefox/templates/firefox/browsers/compare/index.html
+++ b/bedrock/firefox/templates/firefox/browsers/compare/index.html
@@ -27,8 +27,15 @@
 
 {% block content %}
 {% call split(
-    image_url='img/firefox/compare/compare-browser-windows.png',
-    include_highres_image=True,
+    image=resp_img(
+      url='img/firefox/compare/compare-browser-windows.png',
+      srcset={
+        'img/firefox/compare/compare-browser-windows-high-res.png': '2x'
+      },
+      optional_attributes={
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_class='mzp-l-split-h-center',
     media_after=True
   ) %}
diff --git a/bedrock/firefox/templates/firefox/faq.html b/bedrock/firefox/templates/firefox/faq.html
index 819f255a147..24c44539221 100644
--- a/bedrock/firefox/templates/firefox/faq.html
+++ b/bedrock/firefox/templates/firefox/faq.html
@@ -40,10 +40,17 @@ <h2 class="c-sub-navigation-title is-summary">
 {% endblock %}
 
 {% block content %}
-  {% call split (
+  {% call split(
       block_class='mzp-l-split-center-on-sm-md',
-      image_url='img/firefox/browsers/quantum/browser.jpg',
-      include_highres_image=True,
+      image=resp_img(
+        url='img/firefox/browsers/quantum/browser.jpg',
+        srcset={
+          'img/firefox/browsers/quantum/browser-high-res.jpg': '2x'
+        },
+        optional_attributes={
+          'class': 'mzp-c-split-media-asset'
+        }
+      ),
       media_after=True
   ) %}
   <div class="mzp-c-logo mzp-t-logo-lg mzp-t-product-firefox"></div>
diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-de-coupon.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-de-coupon.html
index 058012c50fa..b7489d6d0dc 100644
--- a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-de-coupon.html
+++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-de-coupon.html
@@ -22,9 +22,14 @@
   {% call split(
     block_class='mzp-l-split-center-on-sm-md mzp-t-split-nospace t-mobile-nospace',
     theme_class='t-background-color',
-    image_url='img/firefox/whatsnew/whatsnew104/vpn.svg',
-    image_height='540',
-    image_width='580',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew104/vpn.svg',
+      optional_attributes={
+        'height': '540',
+        'width': '580',
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_after=True,
     media_class='mzp-l-split-h-center'
   ) %}
diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-de.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-de.html
index ae81ab043ac..ca589dfc28e 100644
--- a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-de.html
+++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-de.html
@@ -22,9 +22,14 @@
   {% call split(
     block_class='mzp-l-split-center-on-sm-md mzp-t-split-nospace t-mobile-nospace',
     theme_class='t-background-color',
-    image_url='img/firefox/whatsnew/whatsnew104/vpn.svg',
-    image_height='540',
-    image_width='580',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew104/vpn.svg',
+      optional_attributes={
+        'height': '540',
+        'width': '580',
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_after=True,
     media_class='mzp-l-split-h-center'
   ) %}
diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-en-coupon.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-en-coupon.html
index cb559327634..da6f974240a 100644
--- a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-en-coupon.html
+++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-en-coupon.html
@@ -22,9 +22,14 @@
   {% call split(
     block_class='mzp-l-split-center-on-sm-md mzp-t-split-nospace t-mobile-nospace',
     theme_class='t-background-color',
-    image_url='img/firefox/whatsnew/whatsnew104/vpn.svg',
-    image_height='540',
-    image_width='580',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew104/vpn.svg',
+      optional_attributes={
+        'height': '540',
+        'width': '580',
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_after=True,
     media_class='mzp-l-split-h-center'
   ) %}
diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-en.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-en.html
index 9c4380bfe1d..c1c299a7b93 100644
--- a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-en.html
+++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-en.html
@@ -22,9 +22,14 @@
   {% call split(
     block_class='mzp-l-split-center-on-sm-md mzp-t-split-nospace t-mobile-nospace',
     theme_class='t-background-color',
-    image_url='img/firefox/whatsnew/whatsnew104/vpn.svg',
-    image_height='540',
-    image_width='580',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew104/vpn.svg',
+      optional_attributes={
+        'height': '540',
+        'width': '580',
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_after=True,
     media_class='mzp-l-split-h-center'
   ) %}
diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-fr-coupon.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-fr-coupon.html
index e868812258a..ec479e85f0c 100644
--- a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-fr-coupon.html
+++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-fr-coupon.html
@@ -22,9 +22,14 @@
   {% call split(
     block_class='mzp-l-split-center-on-sm-md mzp-t-split-nospace t-mobile-nospace',
     theme_class='t-background-color',
-    image_url='img/firefox/whatsnew/whatsnew104/vpn.svg',
-    image_height='540',
-    image_width='580',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew104/vpn.svg',
+      optional_attributes={
+        'height': '540',
+        'width': '580',
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_after=True,
     media_class='mzp-l-split-h-center'
   ) %}
diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-fr.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-fr.html
index 003f294b8b4..d2260a88ffb 100644
--- a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-fr.html
+++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-fr.html
@@ -22,9 +22,14 @@
   {% call split(
     block_class='mzp-l-split-center-on-sm-md mzp-t-split-nospace t-mobile-nospace',
     theme_class='t-background-color',
-    image_url='img/firefox/whatsnew/whatsnew104/vpn.svg',
-    image_height='540',
-    image_width='580',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew104/vpn.svg',
+      optional_attributes={
+        'height': '540',
+        'width': '580',
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_after=True,
     media_class='mzp-l-split-h-center'
   ) %}
diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-de-1.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-de-1.html
index d6aed331c11..27161457db7 100644
--- a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-de-1.html
+++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-de-1.html
@@ -31,19 +31,24 @@
     block_class='mzp-l-split-center-on-sm-md mzp-t-content-xl wnp-content-main',
     body_class='mzp-l-split-v-start',
     media_class='mzp-l-split-h-center',
-    image_url='img/firefox/whatsnew/whatsnew105-eu/save-de-400.png',
-    image_srcset={
-      'img/firefox/whatsnew/whatsnew105-eu/save-de-400.png': '400w',
-      'img/firefox/whatsnew/whatsnew105-eu/save-de-600.png': '600w',
-      'img/firefox/whatsnew/whatsnew105-eu/save-de-800.png': '800w',
-    },
-    image_sizes={
-      '(min-width: 1312px)': '400px',
-      '(min-width: 768px)': 'calc(50vw - 192px)',
-      'default': 'calc(100vw - 48px)'
-    },
-    image_height='306',
-    image_width='400',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew105-eu/save-de-400.png',
+      srcset={
+        'img/firefox/whatsnew/whatsnew105-eu/save-de-400.png': '400w',
+        'img/firefox/whatsnew/whatsnew105-eu/save-de-600.png': '600w',
+        'img/firefox/whatsnew/whatsnew105-eu/save-de-800.png': '800w',
+      },
+      sizes={
+        '(min-width: 1312px)': '400px',
+        '(min-width: 768px)': 'calc(50vw - 192px)',
+        'default': 'calc(100vw - 48px)'
+      },
+      optional_attributes={
+        'height': '306',
+        'width': '400',
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_after=True
   ) %}
     <div class="mzp-c-emphasis-box wnp-main-content">
diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-de-2.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-de-2.html
index 29ce551fb8f..b21b1c68368 100644
--- a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-de-2.html
+++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-de-2.html
@@ -37,20 +37,25 @@ <h2 class="wnp-main-title">Entdecke Pocket mit Tijen Onaran</h2>
   {% call split(
     block_class='mzp-l-split-center-on-sm-md mzp-l-split-reversed mzp-t-content-lg wnp-content-main t-kol',
     media_class='mzp-l-split-h-center',
-    image_url='img/firefox/whatsnew/whatsnew105-eu/kol-de-400.jpg',
-    image_srcset={
-      'img/firefox/whatsnew/whatsnew105-eu/kol-de-400.jpg': '400w',
-      'img/firefox/whatsnew/whatsnew105-eu/kol-de-600.jpg': '600w',
-      'img/firefox/whatsnew/whatsnew105-eu/kol-de-800.jpg': '800w',
-    },
-    image_sizes={
-      '(min-width: 1312px)': '400px',
-      '(min-width: 768px)': 'calc(50vw - 192px)',
-      'default': 'calc(100vw - 48px)'
-    },
-    image_height='400',
-    image_width='400',
-    image_alt='Tijen Onaran',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew105-eu/kol-de-400.jpg',
+      srcset={
+        'img/firefox/whatsnew/whatsnew105-eu/kol-de-400.jpg': '400w',
+        'img/firefox/whatsnew/whatsnew105-eu/kol-de-600.jpg': '600w',
+        'img/firefox/whatsnew/whatsnew105-eu/kol-de-800.jpg': '800w',
+      },
+      sizes={
+        '(min-width: 1312px)': '400px',
+        '(min-width: 768px)': 'calc(50vw - 192px)',
+        'default': 'calc(100vw - 48px)'
+      },
+      optional_attributes={
+        'height': '400',
+        'width': '400',
+        'class': 'mzp-c-split-media-asset',
+        'alt': 'Tijen Onaran'
+      }
+    ),
     media_after=False
   ) %}
     <div class="mzp-c-emphasis-box t-kol">
diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-fr.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-fr.html
index 5a40928caee..abcdae5fc9c 100644
--- a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-fr.html
+++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-fr.html
@@ -25,19 +25,24 @@
     block_class='mzp-l-split-center-on-sm-md mzp-l-split-body-wide mzp-t-content-xl wnp-content-main',
     body_class='mzp-l-split-v-start',
     media_class='mzp-l-split-h-center',
-    image_url='img/firefox/whatsnew/whatsnew105-eu/save-fr-400.png',
-    image_srcset={
-      'img/firefox/whatsnew/whatsnew105-eu/save-fr-400.png': '400w',
-      'img/firefox/whatsnew/whatsnew105-eu/save-fr-600.png': '600w',
-      'img/firefox/whatsnew/whatsnew105-eu/save-fr-800.png': '800w',
-    },
-    image_sizes={
-      '(min-width: 1312px)': '357px',
-      '(min-width: 768px)': 'calc(33vw - 192px)',
-      'default': 'calc(100vw - 48px)'
-    },
-    image_height='271',
-    image_width='357',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew105-eu/save-fr-400.png',
+      srcset={
+        'img/firefox/whatsnew/whatsnew105-eu/save-fr-400.png': '400w',
+        'img/firefox/whatsnew/whatsnew105-eu/save-fr-600.png': '600w',
+        'img/firefox/whatsnew/whatsnew105-eu/save-fr-800.png': '800w',
+      },
+      sizes={
+        '(min-width: 1312px)': '357px',
+        '(min-width: 768px)': 'calc(33vw - 192px)',
+        'default': 'calc(100vw - 48px)'
+      },
+      optional_attributes={
+        'height': '271',
+        'width': '357',
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_after=True
   ) %}
     <div class="mzp-c-emphasis-box wnp-main-content">
diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-uk-1.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-uk-1.html
index b2a4bd1060d..f2bdb519d12 100644
--- a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-uk-1.html
+++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-uk-1.html
@@ -31,19 +31,24 @@
     block_class='mzp-l-split-center-on-sm-md mzp-t-content-xl wnp-content-main',
     body_class='mzp-l-split-v-start',
     media_class='mzp-l-split-h-center',
-    image_url='img/firefox/whatsnew/whatsnew105-eu/save-uk-400.png',
-    image_srcset={
-      'img/firefox/whatsnew/whatsnew105-eu/save-uk-400.png': '400w',
-      'img/firefox/whatsnew/whatsnew105-eu/save-uk-600.png': '600w',
-      'img/firefox/whatsnew/whatsnew105-eu/save-uk-800.png': '800w',
-    },
-    image_sizes={
-      '(min-width: 1312px)': '400px',
-      '(min-width: 768px)': 'calc(50vw - 192px)',
-      'default': 'calc(100vw - 48px)'
-    },
-    image_height='306',
-    image_width='400',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew105-eu/save-uk-400.png',
+      srcset={
+        'img/firefox/whatsnew/whatsnew105-eu/save-uk-400.png': '400w',
+        'img/firefox/whatsnew/whatsnew105-eu/save-uk-600.png': '600w',
+        'img/firefox/whatsnew/whatsnew105-eu/save-uk-800.png': '800w',
+      },
+      sizes={
+        '(min-width: 1312px)': '400px',
+        '(min-width: 768px)': 'calc(50vw - 192px)',
+        'default': 'calc(100vw - 48px)'
+      },
+      optional_attributes={
+        'height': '306',
+        'width': '400',
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_after=True
   ) %}
     <div class="mzp-c-emphasis-box wnp-main-content">
diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-uk-2.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-uk-2.html
index 58cc6769788..a685f2d411f 100644
--- a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-uk-2.html
+++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-uk-2.html
@@ -31,20 +31,25 @@
     block_class='mzp-l-split-center-on-sm-md mzp-l-split-pop-top mzp-t-content-xl wnp-content-main',
     body_class='mzp-l-split-v-start',
     media_class='mzp-l-split-h-center',
-    image_url='img/firefox/whatsnew/whatsnew105-eu/discover-uk-500.png',
-    image_srcset={
-      'img/firefox/whatsnew/whatsnew105-eu/discover-uk-500.png': '500w',
-      'img/firefox/whatsnew/whatsnew105-eu/discover-uk-700.png': '700w',
-      'img/firefox/whatsnew/whatsnew105-eu/discover-uk-900.png': '900w',
-    },
-    image_sizes={
-      '(min-width: 1312px)': '458px',
-      '(min-width: 768px)': 'calc(50vw - 192px)',
-      'default': 'calc(100vw - 48px)'
-    },
-    image_height='638',
-    image_width='458',
-    image_alt='Articles from a wide range of publications',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew105-eu/discover-uk-500.png',
+      srcset={
+        'img/firefox/whatsnew/whatsnew105-eu/discover-uk-500.png': '500w',
+        'img/firefox/whatsnew/whatsnew105-eu/discover-uk-700.png': '700w',
+        'img/firefox/whatsnew/whatsnew105-eu/discover-uk-900.png': '900w',
+      },
+      sizes={
+        '(min-width: 1312px)': '458px',
+        '(min-width: 768px)': 'calc(50vw - 192px)',
+        'default': 'calc(100vw - 48px)'
+      },
+      optional_attributes={
+        'height': '638',
+        'width': '458',
+        'class': 'mzp-c-split-media-asset',
+        'alt': 'Articles from a wide range of publications'
+      }
+    ),
     media_after=True
   ) %}
     <div class="mzp-c-emphasis-box wnp-main-content">
diff --git a/bedrock/foundation/templates/foundation/annualreport/2019/index.html b/bedrock/foundation/templates/foundation/annualreport/2019/index.html
index 7af4a4d0909..e0c77c7ebcd 100644
--- a/bedrock/foundation/templates/foundation/annualreport/2019/index.html
+++ b/bedrock/foundation/templates/foundation/annualreport/2019/index.html
@@ -547,8 +547,15 @@ <h2 class="mzp-c-card-feature-title"><span class="highlight green">The internet
     <div class="has-modal" data-modal-id="victory-has-a-ring-to-it">
       {% call split(
         block_id='victory-has-a-ring-to-it',
-        image_url='img/foundation/annualreport/2019/victory-ring.jpg',
-        include_highres_image=True,
+        image=resp_img(
+          url='img/foundation/annualreport/2019/victory-ring.jpg',
+          srcset={
+            'img/foundation/annualreport/2019/victory-ring-high-res.jpg': '2x'
+          },
+          optional_attributes={
+            'class': 'mzp-c-split-media-asset'
+          }
+        ),
         media_after=False,
         media_class='mzp-l-split-h-center',
         block_class='mzp-l-split-body-narrow mzp-t-split-nospace'
@@ -673,7 +680,12 @@ <h2 class="mzp-c-card-title">Pushing video call apps to be more private and secu
     <div class="has-modal" data-modal-id="firefox-gives-redirect-trackers-the-boot-with-etp-2-0">
       {% call split(
         block_id='firefox-gives-redirect-trackers-the-boot-with-etp-2-0',
-        image_url='img/foundation/annualreport/2019/redirect-trackers-etp.png',
+        image=resp_img(
+          url='img/foundation/annualreport/2019/redirect-trackers-etp.png',
+          optional_attributes={
+            'class': 'mzp-c-split-media-asset'
+          }
+        ),
         media_after=False,
         media_class='mzp-l-split-h-center',
         block_class='mzp-t-split-nospace mzp-l-split-body-narrow'
@@ -730,7 +742,12 @@ <h2 class="mzp-c-card-title">An investigation: Political ads on popular streamin
      <div class="has-modal" data-modal-id="the-internet-needs-our-love">
       {% call split(
         block_id='the-internet-needs-our-love',
-        image_url='img/foundation/annualreport/2019/internet-needs-our-love.jpg',
+        image=resp_img(
+          url='img/foundation/annualreport/2019/internet-needs-our-love.jpg',
+          optional_attributes={
+            'class': 'mzp-c-split-media-asset'
+          }
+        ),
         media_after=False,
         media_class='mzp-l-split-h-center',
         block_class='mzp-t-split-nospace mzp-l-split-body-narrow'
@@ -1123,8 +1140,15 @@ <h2 class="mzp-c-card-feature-title">Investing today to shape European AI tomorr
   <div class="has-modal" data-modal-id="mitchell-baker-named-ceo">
     {% call split(
       block_id='mitchell-baker-named-ceo',
-      image_url='img/foundation/annualreport/2019/mitchell-baker-named-ceo.jpg',
-      include_highres_image=True,
+      image=resp_img(
+        url='img/foundation/annualreport/2019/mitchell-baker-named-ceo.jpg',
+        srcset={
+          'img/foundation/annualreport/2019/mitchell-baker-named-ceo-high-res.jpg': '2x'
+        },
+        optional_attributes={
+          'class': 'mzp-c-split-media-asset'
+        }
+      ),
       media_after=False,
       media_class='mzp-l-split-h-center',
       block_class='mzp-t-split-nospace mzp-l-split-body-narrow mzp-l-split-reversed'
@@ -1255,8 +1279,15 @@ <h2 class="mzp-c-card-title">The future of web monetization starts now</h2>
     <div class="has-modal" data-modal-id="703m-pocket-saves-and-counting">
       {% call split(
         block_id='703m-pocket-saves-and-counting',
-        image_url='img/foundation/annualreport/2019/pocket-saves.jpg',
-        include_highres_image=True,
+        image=resp_img(
+          url='img/foundation/annualreport/2019/pocket-saves.jpg',
+          srcset={
+            'img/foundation/annualreport/2019/pocket-saves-high-res.jpg': '2x'
+          },
+          optional_attributes={
+            'class': 'mzp-c-split-media-asset'
+          }
+        ),
         media_after=False,
         media_class='mzp-l-split-h-center',
         block_class='mzp-t-split-nospace mzp-l-split-body-narrow'
@@ -1340,8 +1371,15 @@ <h2 class="mzp-c-card-title">Funds for Black artists exploring the effects of AI
     <div class="has-modal" data-modal-id="launched-mozilla-vpn">
       {% call split(
         block_id='launched-mozilla-vpn',
-        image_url='img/foundation/annualreport/2019/launched-mozilla-vpn.jpg',
-        include_highres_image=True,
+        image=resp_img(
+          url='img/foundation/annualreport/2019/launched-mozilla-vpn.jpg',
+          srcset={
+            'img/foundation/annualreport/2019/launched-mozilla-vpn-high-res.jpg': '2x'
+          },
+          optional_attributes={
+            'class': 'mzp-c-split-media-asset'
+          }
+        ),
         media_after=False,
         media_class='mzp-l-split-h-center',
         block_class='mzp-t-split-nospace mzp-l-split-body-narrow mzp-l-split-reversed'
diff --git a/bedrock/foundation/templates/foundation/annualreport/2020/index.html b/bedrock/foundation/templates/foundation/annualreport/2020/index.html
index 9980386a6d1..c4c358730b0 100644
--- a/bedrock/foundation/templates/foundation/annualreport/2020/index.html
+++ b/bedrock/foundation/templates/foundation/annualreport/2020/index.html
@@ -255,7 +255,12 @@ <h2><span class="highlight green">Building a more joyful internet</span></h2>
       <!-- Firefox -->
       <div class="has-modal" data-modal-id="firefox-desktop-redesign">
         {% call split(
-          image_url='img/foundation/annualreport/2020/mr1-behind-design.jpg',
+          image=resp_img(
+            url='img/foundation/annualreport/2020/mr1-behind-design.jpg',
+            optional_attributes={
+              'class': 'mzp-c-split-media-asset'
+            }
+          ),
           block_class='mzp-l-split-body-narrow mzp-t-split-nospace'
          ) %}
            <span>Products</span>
@@ -312,7 +317,12 @@ <h2>An (even more) elegant Firefox for desktop</h2>
 
       <div class="has-modal" data-modal-id="pocket-joy-collection">
         {% call split(
-          image_url='img/foundation/annualreport/2020/pocket-joy-collection.png',
+          image=resp_img(
+            url='img/foundation/annualreport/2020/pocket-joy-collection.png',
+            optional_attributes={
+              'class': 'mzp-c-split-media-asset'
+            }
+          ),
           block_class='mzp-l-split-body-narrow mzp-t-split-nospace mzp-l-split-reversed'
         ) %}
           <span>Quality Content</span>
@@ -376,7 +386,12 @@ <h2><span class="highlight green">Building a safer, more private internet</span>
       <!-- Second section cards -->
       <div class="has-modal" data-modal-id="privacy-not-included">
         {% call split(
-          image_url='img/foundation/annualreport/2020/moz-pni-header.jpg',
+          image=resp_img(
+            url='img/foundation/annualreport/2020/moz-pni-header.jpg',
+            optional_attributes={
+              'class': 'mzp-c-split-media-asset'
+            }
+          ),
           block_class='mzp-l-split-body-narrow mzp-t-split-nospace'
         ) %}
           <span>Privacy</span>
@@ -500,7 +515,12 @@ <h2><span class="highlight green">Building a more trustworthy internet</span></h
 
       <div class="has-modal" data-modal-id="privacy-advertising">
         {% call split(
-          image_url='img/foundation/annualreport/2020/firefox-privacy.jpg',
+          image=resp_img(
+            url='img/foundation/annualreport/2020/firefox-privacy.jpg',
+            optional_attributes={
+              'class': 'mzp-c-split-media-asset'
+            }
+          ),
           block_class='mzp-l-split-body-narrow mzp-t-split-nospace'
          ) %}
           <span>Fighting for Transparency</span>
@@ -535,7 +555,12 @@ <h2>Ensuring the future of advertising is more private and transparent</h2>
 
       <div class="has-modal" data-modal-id="nyt-op-ed">
         {% call split(
-          image_url='img/foundation/annualreport/2020/nyt-op-ed.jpg',
+          image=resp_img(
+            url='img/foundation/annualreport/2020/nyt-op-ed.jpg',
+            optional_attributes={
+              'class': 'mzp-c-split-media-asset'
+            }
+          ),
           block_class='mzp-l-split-body-narrow mzp-t-split-nospace'
          ) %}
           <span>Fighting for Transparency</span>
diff --git a/bedrock/foundation/templates/foundation/annualreport/2021/index.html b/bedrock/foundation/templates/foundation/annualreport/2021/index.html
index 678670d640c..d791f0aeecd 100644
--- a/bedrock/foundation/templates/foundation/annualreport/2021/index.html
+++ b/bedrock/foundation/templates/foundation/annualreport/2021/index.html
@@ -148,18 +148,22 @@ <h2 class="c-section-heading">Building a different kind of tech industry, <stron
 
   <a class="c-section-split-link" href="{{ url('foundation.annualreport.2021.article.products') }}" {{ new_tab }} data-cta-type="link" data-cta-text="Building the Products and Business Model for Your Internet">
     {% call split(
-      image_url='img/foundation/annualreport/2021/split/experiences-900.jpg',
-      image_width=900,
-      image_height=506,
-      loading='lazy',
       block_class='mzp-l-split-body-narrow mzp-t-split-nospace',
-      image_srcset={
-        'img/foundation/annualreport/2021/split/experiences-900.jpg': '900w',
-        'img/foundation/annualreport/2021/split/experiences-1300.jpg': '1300w',
-        'img/foundation/annualreport/2021/split/experiences-1800.jpg': '1800w',
-      },
-      image_sizes=split_image_sizes,
-      image_alt='We need to give people great experiences that help make the internet personal, enjoyable, and safe.'
+      image=resp_img(
+        url='img/foundation/annualreport/2021/split/experiences-900.jpg',
+        srcset={
+          'img/foundation/annualreport/2021/split/experiences-900.jpg': '900w',
+          'img/foundation/annualreport/2021/split/experiences-1300.jpg': '1300w',
+          'img/foundation/annualreport/2021/split/experiences-1800.jpg': '1800w',
+        },
+        sizes=split_image_sizes,
+        optional_attributes={
+          'width': '900',
+          'height': '506',
+          'loading': 'lazy',
+          'alt': 'We need to give people great experiences that help make the internet personal, enjoyable, and safe.'
+        }
+      )
     ) %}
       <p>Steve Teixeira & Lindsey Shepard</p>
       <h2>Building the Products and Business Model for Your Internet</h2>
@@ -229,18 +233,22 @@ <h2 class="c-section-heading">
 
   <a class="c-section-split-link" href="{{ url('foundation.annualreport.2021.article.team') }}" {{ new_tab }} data-cta-type="link" data-cta-text="Building A Team To Better The Internet">
     {% call split(
-      image_url='img/foundation/annualreport/2021/split/investing-900.jpg',
-      image_width=900,
-      image_height=506,
-      loading='lazy',
       block_class='mzp-l-split-body-narrow mzp-t-split-nospace',
-      image_srcset={
-        'img/foundation/annualreport/2021/split/investing-900.jpg': '900w',
-        'img/foundation/annualreport/2021/split/investing-1300.jpg': '1300w',
-        'img/foundation/annualreport/2021/split/investing-1800.jpg': '1800w',
-      },
-      image_sizes=split_image_sizes,
-      image_alt='We aren’t investing in the next quarter, we are investing in the next quarter century.'
+      image=resp_img(
+        url='img/foundation/annualreport/2021/split/investing-900.jpg',
+        srcset={
+          'img/foundation/annualreport/2021/split/investing-900.jpg': '900w',
+          'img/foundation/annualreport/2021/split/investing-1300.jpg': '1300w',
+          'img/foundation/annualreport/2021/split/investing-1800.jpg': '1800w',
+        },
+        sizes=split_image_sizes,
+        optional_attributes={
+          'width': '900',
+          'height': '506',
+          'loading': 'lazy',
+          'alt': 'We aren’t investing in the next quarter, we are investing in the next quarter century.'
+        }
+      )
     ) %}
       <p>Helen Turvey & Karim Lakhani</p>
       <h2>Building A Team To Better The Internet</h2>
@@ -380,17 +388,21 @@ <h2 class="c-section-heading">
   <div class="split-container">
     <a class="c-section-split-link has-modal" href="#open-letter-congress-desc" id="open-letter-congress" data-modal-id="open-letter-congress" data-cta-type="link" data-cta-text="The fight continues in Washington">
       {% call split(
-        image_url='img/foundation/annualreport/2021/split/congress-800.jpg',
-        image_width=900,
-        image_height=506,
-        loading='lazy',
         block_class='mzp-l-split-body-narrow mzp-t-split-nospace',
-        image_srcset={
-          'img/foundation/annualreport/2021/split/congress-800.jpg': '800w',
-          'img/foundation/annualreport/2021/split/congress-1200.jpg': '1200w',
-          'img/foundation/annualreport/2021/split/congress-1600.jpg': '1600w',
-        },
-        image_sizes=split_image_sizes
+        image=resp_img(
+          url='img/foundation/annualreport/2021/split/congress-800.jpg',
+          srcset={
+            'img/foundation/annualreport/2021/split/congress-800.jpg': '800w',
+            'img/foundation/annualreport/2021/split/congress-1200.jpg': '1200w',
+            'img/foundation/annualreport/2021/split/congress-1600.jpg': '1600w',
+          },
+          sizes=split_image_sizes,
+          optional_attributes={
+            'width': '900',
+            'height': '506',
+            'loading': 'lazy',
+          }
+        )
       ) %}
         <span class="c-label-category">Policy</span>
         <h2>The fight continues in Washington</h2>
@@ -400,17 +412,21 @@ <h2>The fight continues in Washington</h2>
 
     <a class="c-section-split-link has-modal" href="#transparency-report-desc" id="transparency-report" data-modal-id="transparency-report" data-cta-type="link" data-cta-text="Leading by example">
       {% call split(
-        image_url='img/foundation/annualreport/2021/split/advertising-800.jpg',
-        image_width=900,
-        image_height=506,
-        loading='lazy',
         block_class='mzp-l-split-reversed mzp-l-split-body-narrow mzp-t-split-nospace',
-        image_srcset={
-          'img/foundation/annualreport/2021/split/advertising-800.jpg': '800w',
-          'img/foundation/annualreport/2021/split/advertising-1200.jpg': '1200w',
-          'img/foundation/annualreport/2021/split/advertising-1600.jpg': '1600w',
-        },
-        image_sizes=split_image_sizes,
+        image=resp_img(
+          url='img/foundation/annualreport/2021/split/advertising-800.jpg',
+          srcset={
+            'img/foundation/annualreport/2021/split/advertising-800.jpg': '800w',
+            'img/foundation/annualreport/2021/split/advertising-1200.jpg': '1200w',
+            'img/foundation/annualreport/2021/split/advertising-1600.jpg': '1600w',
+          },
+          sizes=split_image_sizes,
+          optional_attributes={
+            'width': '900',
+            'height': '506',
+            'loading': 'lazy',
+          }
+        )
       ) %}
         <span class="c-label-category">Advertising</span>
         <h2>Leading by example</h2>
@@ -420,17 +436,21 @@ <h2>Leading by example</h2>
 
     <a class="c-section-split-link has-modal" href="#regrets-reporter-desc" id="regrets-reporter" data-modal-id="regrets-reporter" data-cta-type="link" data-cta-text="Crowdsourcing research into YouTube’s AI">
       {% call split(
-        image_url='img/foundation/annualreport/2021/split/regrets-800.jpg',
-        image_width=900,
-        image_height=506,
-        loading='lazy',
         block_class='mzp-l-split-body-narrow mzp-t-split-nospace',
-        image_srcset={
-          'img/foundation/annualreport/2021/split/regrets-800.jpg': '800w',
-          'img/foundation/annualreport/2021/split/regrets-1200.jpg': '1200w',
-          'img/foundation/annualreport/2021/split/regrets-1600.jpg': '1600w',
-        },
-        image_sizes=split_image_sizes
+        image=resp_img(
+          url='img/foundation/annualreport/2021/split/regrets-800.jpg',
+          srcset={
+            'img/foundation/annualreport/2021/split/regrets-800.jpg': '800w',
+            'img/foundation/annualreport/2021/split/regrets-1200.jpg': '1200w',
+            'img/foundation/annualreport/2021/split/regrets-1600.jpg': '1600w',
+          },
+          sizes=split_image_sizes,
+          optional_attributes={
+            'width': '900',
+            'height': '506',
+            'loading': 'lazy',
+          }
+        )
       ) %}
         <span class="c-label-category">Innovation</span>
         <h2>Crowdsourcing research into YouTube’s AI</h2>
@@ -440,17 +460,21 @@ <h2>Crowdsourcing research into YouTube’s AI</h2>
 
     <a class="c-section-split-link has-modal" href="#privacy-not-included-desc" id="privacy-not-included" data-modal-id="privacy-not-included" data-cta-type="link" data-cta-text="Sounding the alarm on period trackers">
       {% call split(
-        image_url='img/foundation/annualreport/2021/split/period-trackers-800.jpg',
-        image_width=900,
-        image_height=506,
-        loading='lazy',
         block_class='mzp-l-split-reversed mzp-l-split-body-narrow mzp-t-split-nospace',
-        image_srcset={
-          'img/foundation/annualreport/2021/split/period-trackers-800.jpg': '800w',
-          'img/foundation/annualreport/2021/split/period-trackers-1200.jpg': '1200w',
-          'img/foundation/annualreport/2021/split/period-trackers-1600.jpg': '1600w',
-        },
-        image_sizes=split_image_sizes
+        image=resp_img(
+          url='img/foundation/annualreport/2021/split/period-trackers-800.jpg',
+          srcset={
+            'img/foundation/annualreport/2021/split/period-trackers-800.jpg': '800w',
+            'img/foundation/annualreport/2021/split/period-trackers-1200.jpg': '1200w',
+            'img/foundation/annualreport/2021/split/period-trackers-1600.jpg': '1600w',
+          },
+          sizes=split_image_sizes,
+          optional_attributes={
+            'width': '900',
+            'height': '506',
+            'loading': 'lazy',
+          }
+        )
       ) %}
         <span class="c-label-category">Privacy</span>
         <h2>Sounding the alarm on period trackers</h2>
@@ -460,17 +484,21 @@ <h2>Sounding the alarm on period trackers</h2>
 
     <a class="c-section-split-link has-modal" href="#total-cookie-protection-desc" id="total-cookie-protection" data-modal-id="total-cookie-protection" data-cta-type="link" data-cta-text="Rolling out cookie protection for all">
       {% call split(
-        image_url='img/foundation/annualreport/2021/split/tcp-800.jpg',
-        image_width=900,
-        image_height=506,
-        loading='lazy',
         block_class='mzp-l-split-body-narrow mzp-t-split-nospace',
-        image_srcset={
-          'img/foundation/annualreport/2021/split/tcp-800.jpg': '800w',
-          'img/foundation/annualreport/2021/split/tcp-1200.jpg': '1200w',
-          'img/foundation/annualreport/2021/split/tcp-1600.jpg': '1600w',
-        },
-        image_sizes=split_image_sizes,
+        image=resp_img(
+          url='img/foundation/annualreport/2021/split/tcp-800.jpg',
+          srcset={
+            'img/foundation/annualreport/2021/split/tcp-800.jpg': '800w',
+            'img/foundation/annualreport/2021/split/tcp-1200.jpg': '1200w',
+            'img/foundation/annualreport/2021/split/tcp-1600.jpg': '1600w',
+          },
+          sizes=split_image_sizes,
+          optional_attributes={
+            'width': '900',
+            'height': '506',
+            'loading': 'lazy',
+          }
+        )
       ) %}
         <span class="c-label-category">Firefox</span>
         <h2>Rolling out cookie protection for all</h2>
@@ -480,17 +508,21 @@ <h2>Rolling out cookie protection for all</h2>
 
     <a class="c-section-split-link has-modal" href="#misinformation-desc" id="misinformation" data-modal-id="misinformation" data-cta-type="link" data-cta-text="Battling misinformation in Kenya">
       {% call split(
-        image_url='img/foundation/annualreport/2021/split/misinformation-800.jpg',
-        image_width=900,
-        image_height=506,
-        loading='lazy',
         block_class='mzp-l-split-reversed mzp-l-split-body-narrow mzp-t-split-nospace',
-        image_srcset={
-          'img/foundation/annualreport/2021/split/misinformation-800.jpg': '800w',
-          'img/foundation/annualreport/2021/split/misinformation-1200.jpg': '1200w',
-          'img/foundation/annualreport/2021/split/misinformation-1600.jpg': '1600w',
-        },
-        image_sizes=split_image_sizes
+        image=resp_img(
+          url='img/foundation/annualreport/2021/split/misinformation-800.jpg',
+          srcset={
+            'img/foundation/annualreport/2021/split/misinformation-800.jpg': '800w',
+            'img/foundation/annualreport/2021/split/misinformation-1200.jpg': '1200w',
+            'img/foundation/annualreport/2021/split/misinformation-1600.jpg': '1600w',
+          },
+          sizes=split_image_sizes,
+          optional_attributes={
+            'width': '900',
+            'height': '506',
+            'loading': 'lazy',
+          }
+        )
       ) %}
         <span class="c-label-category">Mradi</span>
         <h2>Battling misinformation in Kenya</h2>
@@ -500,17 +532,21 @@ <h2>Battling misinformation in Kenya</h2>
 
     <a class="c-section-split-link has-modal" href="#common-voice-desc" id="common-voice" data-modal-id="common-voice" data-cta-type="link" data-cta-text="Making voice technology for everyone">
       {% call split(
-        image_url='img/foundation/annualreport/2021/split/common-voice-800.jpg',
-        image_width=900,
-        image_height=506,
-        loading='lazy',
         block_class='mzp-l-split-body-narrow mzp-t-split-nospace',
-        image_srcset={
-          'img/foundation/annualreport/2021/split/common-voice-800.jpg': '800w',
-          'img/foundation/annualreport/2021/split/common-voice-1200.jpg': '1200w',
-          'img/foundation/annualreport/2021/split/common-voice-1600.jpg': '1600w',
-        },
-        image_sizes=split_image_sizes
+        image=resp_img(
+          url='img/foundation/annualreport/2021/split/common-voice-800.jpg',
+          srcset={
+            'img/foundation/annualreport/2021/split/common-voice-800.jpg': '800w',
+            'img/foundation/annualreport/2021/split/common-voice-1200.jpg': '1200w',
+            'img/foundation/annualreport/2021/split/common-voice-1600.jpg': '1600w',
+          },
+          sizes=split_image_sizes,
+          optional_attributes={
+            'width': '900',
+            'height': '506',
+            'loading': 'lazy',
+          }
+        )
       ) %}
         <span class="c-label-category">Community</span>
         <h2>Making voice technology for everyone</h2>
@@ -520,17 +556,21 @@ <h2>Making voice technology for everyone</h2>
 
     <a class="c-section-split-link has-modal" href="#containers-desc" id="containers" data-modal-id="containers" data-cta-type="link" data-cta-text="Keeping your online lives private">
       {% call split(
-        image_url='img/foundation/annualreport/2021/split/containers-800.jpg',
-        image_width=900,
-        image_height=506,
-        loading='lazy',
         block_class='mzp-l-split-reversed mzp-l-split-body-narrow mzp-t-split-nospace',
-        image_srcset={
-          'img/foundation/annualreport/2021/split/containers-800.jpg': '800w',
-          'img/foundation/annualreport/2021/split/containers-1200.jpg': '1200w',
-          'img/foundation/annualreport/2021/split/containers-1600.jpg': '1600w',
-        },
-        image_sizes=split_image_sizes
+        image=resp_img(
+          url='img/foundation/annualreport/2021/split/containers-800.jpg',
+          srcset={
+            'img/foundation/annualreport/2021/split/containers-800.jpg': '800w',
+            'img/foundation/annualreport/2021/split/containers-1200.jpg': '1200w',
+            'img/foundation/annualreport/2021/split/containers-1600.jpg': '1600w',
+          },
+          sizes=split_image_sizes,
+          optional_attributes={
+            'width': '900',
+            'height': '506',
+            'loading': 'lazy',
+          }
+        )
       ) %}
         <span class="c-label-category">Security</span>
         <h2>Keeping your online lives private</h2>
@@ -540,17 +580,21 @@ <h2>Keeping your online lives private</h2>
 
     <a class="c-section-split-link has-modal" href="#trustworthy-ai-desc" id="trustworthy-ai" data-modal-id="trustworthy-ai" data-cta-type="link" data-cta-text="Listening to the future of AI">
       {% call split(
-        image_url='img/foundation/annualreport/2021/split/irl-800.png',
-        image_width=900,
-        image_height=506,
-        loading='lazy',
         block_class='mzp-l-split-body-narrow mzp-t-split-nospace',
-        image_srcset={
-          'img/foundation/annualreport/2021/split/irl-800.png': '800w',
-          'img/foundation/annualreport/2021/split/irl-1200.png': '1200w',
-          'img/foundation/annualreport/2021/split/irl-1600.png': '1600w',
-        },
-        image_sizes=split_image_sizes
+        image=resp_img(
+          url='img/foundation/annualreport/2021/split/irl-800.png',
+          srcset={
+            'img/foundation/annualreport/2021/split/irl-800.png': '800w',
+            'img/foundation/annualreport/2021/split/irl-1200.png': '1200w',
+            'img/foundation/annualreport/2021/split/irl-1600.png': '1600w',
+          },
+          sizes=split_image_sizes,
+          optional_attributes={
+            'width': '900',
+            'height': '506',
+            'loading': 'lazy',
+          }
+        )
       ) %}
         <span class="c-label-category">IRL</span>
         <h2>Listening to the future of AI</h2>
diff --git a/bedrock/mozorg/templates/mozorg/about/index.html b/bedrock/mozorg/templates/mozorg/about/index.html
index becec2c6612..fc53fedb2f0 100644
--- a/bedrock/mozorg/templates/mozorg/about/index.html
+++ b/bedrock/mozorg/templates/mozorg/about/index.html
@@ -87,8 +87,15 @@ <h1 class="c-page-title">{{ ftl('about-our-mission-in-action') }}</h1>
 </div>
 
    {% call split(
-    image_url='img/mozorg/about/foundation.jpg',
-    include_highres_image=True,
+    image=resp_img(
+      url='img/mozorg/about/foundation.jpg',
+      srcset={
+        'img/mozorg/about/foundation-high-res.jpg': '2x'
+      },
+      optional_attributes={
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_after=False,
     media_class='mzp-l-split-h-center',
     block_class='mzp-t-split-nospace'
diff --git a/bedrock/mozorg/templates/mozorg/about/policy/lean-data/build-security.html b/bedrock/mozorg/templates/mozorg/about/policy/lean-data/build-security.html
index 96912485de4..47f76f8c629 100644
--- a/bedrock/mozorg/templates/mozorg/about/policy/lean-data/build-security.html
+++ b/bedrock/mozorg/templates/mozorg/about/policy/lean-data/build-security.html
@@ -26,8 +26,15 @@
 
 {% block content %}
 {% call split(
-    image_url='img/mozorg/about/lean-data/build-security-hero.png',
-    include_highres_image=True,
+    image=resp_img(
+      url='img/mozorg/about/lean-data/build-security-hero.png',
+      srcset={
+        'img/mozorg/about/lean-data/build-security-hero-high-res.png': '2x'
+      },
+      optional_attributes={
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     block_class='mzp-t-split-nospace t-mobile-nospace',
     theme_class='mzp-t-background-secondary',
     media_class='mzp-l-split-h-center',
diff --git a/bedrock/mozorg/templates/mozorg/about/policy/lean-data/engage-users.html b/bedrock/mozorg/templates/mozorg/about/policy/lean-data/engage-users.html
index b9c345322e5..a29b84a5b5d 100644
--- a/bedrock/mozorg/templates/mozorg/about/policy/lean-data/engage-users.html
+++ b/bedrock/mozorg/templates/mozorg/about/policy/lean-data/engage-users.html
@@ -26,8 +26,15 @@
 
 {% block content %}
 {% call split(
-    image_url='img/mozorg/about/lean-data/engage-users-hero.png',
-    include_highres_image=True,
+    image=resp_img(
+      url='img/mozorg/about/lean-data/engage-users-hero.png',
+      srcset={
+        'img/mozorg/about/lean-data/engage-users-hero-high-res.png': '2x'
+      },
+      optional_attributes={
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     block_class='mzp-t-split-nospace t-mobile-nospace',
     theme_class='mzp-t-background-secondary',
     media_class='mzp-l-split-h-center',
diff --git a/bedrock/mozorg/templates/mozorg/about/policy/lean-data/index.html b/bedrock/mozorg/templates/mozorg/about/policy/lean-data/index.html
index 7e441176212..7b567821774 100644
--- a/bedrock/mozorg/templates/mozorg/about/policy/lean-data/index.html
+++ b/bedrock/mozorg/templates/mozorg/about/policy/lean-data/index.html
@@ -25,8 +25,15 @@
 
 {% block content %}
 {% call split(
-    image_url='img/mozorg/about/lean-data/lean-data-hero.png',
-    include_highres_image=True,
+    image=resp_img(
+      url='img/mozorg/about/lean-data/lean-data-hero.png',
+      srcset={
+        'img/mozorg/about/lean-data/lean-data-hero-high-res.png': '2x'
+      },
+      optional_attributes={
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     block_class='mzp-t-split-nospace t-mobile-nospace',
     theme_class='mzp-t-background-secondary',
     media_class='mzp-l-split-h-center',
diff --git a/bedrock/mozorg/templates/mozorg/about/policy/lean-data/stay-lean.html b/bedrock/mozorg/templates/mozorg/about/policy/lean-data/stay-lean.html
index c7e6b7add7a..0bdf1266379 100644
--- a/bedrock/mozorg/templates/mozorg/about/policy/lean-data/stay-lean.html
+++ b/bedrock/mozorg/templates/mozorg/about/policy/lean-data/stay-lean.html
@@ -26,8 +26,15 @@
 
 {% block content %}
 {% call split(
-    image_url='img/mozorg/about/lean-data/stay-lean-hero.png',
-    include_highres_image=True,
+    image=resp_img(
+      url='img/mozorg/about/lean-data/stay-lean-hero.png',
+      srcset={
+        'img/mozorg/about/lean-data/stay-lean-hero-high-res.png': '2x'
+      },
+      optional_attributes={
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     block_class='mzp-t-split-nospace t-mobile-nospace',
     theme_class='mzp-t-background-secondary',
     media_class='mzp-l-split-h-center',
diff --git a/bedrock/mozorg/templates/mozorg/contribute.html b/bedrock/mozorg/templates/mozorg/contribute.html
index 807b417f42d..96548e40c82 100644
--- a/bedrock/mozorg/templates/mozorg/contribute.html
+++ b/bedrock/mozorg/templates/mozorg/contribute.html
@@ -208,7 +208,12 @@ <h3 class="contribute-mission-follow-icon">{{ ftl('contribute-follow-mozilla') }
   </section>
 
   {% call split(
-    image_url='img/contribute/contribute-madeby-feature.jpg',
+    image=resp_img(
+      url='img/contribute/contribute-madeby-feature.jpg',
+      optional_attributes={
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_after=False,
     media_class='mzp-l-split-h-center',
     block_class='mzp-t-split-nospace'
diff --git a/bedrock/mozorg/templates/mozorg/home/home.html b/bedrock/mozorg/templates/mozorg/home/home.html
index 4dc2ff5965d..46886743dba 100644
--- a/bedrock/mozorg/templates/mozorg/home/home.html
+++ b/bedrock/mozorg/templates/mozorg/home/home.html
@@ -47,8 +47,15 @@
     {% include 'mozorg/home/includes/mr2-promo.html' %}
   {% else %}
     {% call split(
-      image_url='img/home/laptop.png',
-      include_highres_image=True,
+      image=resp_img(
+        url='img/home/laptop.png',
+        srcset={
+          'img/home/laptop-high-res.png': '2x'
+        },
+        optional_attributes={
+          'class': 'mzp-c-split-media-asset'
+        }
+      ),
       block_class='c-home-hero mzp-l-split-center-on-sm-md mzp-t-split-nospace',
       body_class=None,
       media_after=True,
diff --git a/bedrock/mozorg/templates/mozorg/home/includes/firefox-family-promo.html b/bedrock/mozorg/templates/mozorg/home/includes/firefox-family-promo.html
index b89eefdbff5..908b090ff98 100644
--- a/bedrock/mozorg/templates/mozorg/home/includes/firefox-family-promo.html
+++ b/bedrock/mozorg/templates/mozorg/home/includes/firefox-family-promo.html
@@ -7,9 +7,14 @@
 {% from "macros-protocol.html" import split with context %}
 
 {% call split(
-  image_url='img/home/firefox-family-promo.svg',
-  image_width='819',
-  image_height='534',
+  image=resp_img(
+    url='img/home/firefox-family-promo.svg',
+    optional_attributes={
+      'width': '819',
+      'height': '534',
+      'class': 'mzp-c-split-media-asset'
+    }
+  ),
   block_class='mzp-l-split-center-on-sm-md mzp-l-split-reversed',
   media_class='mzp-l-split-v-center'
 ) %}
diff --git a/bedrock/mozorg/templates/mozorg/home/includes/firefox-mr106-promo.html b/bedrock/mozorg/templates/mozorg/home/includes/firefox-mr106-promo.html
index 8fa7dd8a5bb..ff75ca281d6 100644
--- a/bedrock/mozorg/templates/mozorg/home/includes/firefox-mr106-promo.html
+++ b/bedrock/mozorg/templates/mozorg/home/includes/firefox-mr106-promo.html
@@ -40,8 +40,12 @@
 {% endif %}
 
 {% call split(
-  image_url='img/home/2022/mr-hero-custom.svg',
-  include_highres_image=False,
+  image=resp_img(
+    url='img/home/2022/mr-hero-custom.svg',
+    optional_attributes={
+      'class': 'mzp-c-split-media-asset'
+    }
+  ),
   block_class='mr106-home-hero show-not-firefox mzp-t-split-nospace mzp-l-split-center-on-sm-md',
   theme_class='mzp-t-dark',
   body_class=None,
@@ -61,8 +65,12 @@ <h2 class="c-mr106-title">{{ mr_promo_title_nonfx }}</h2>
 {% endcall %}
 
 {% call split(
-  image_url='img/home/2022/mr-hero-sync.svg',
-  include_highres_image=False,
+  image=resp_img(
+    url='img/home/2022/mr-hero-sync.svg',
+    optional_attributes={
+      'class': 'mzp-c-split-media-asset'
+    }
+  ),
   block_class='mr106-home-hero show-firefox mzp-t-split-nospace mzp-l-split-center-on-sm-md',
   theme_class='mzp-t-dark',
   body_class=None,
diff --git a/bedrock/mozorg/templates/mozorg/home/includes/mr2-promo.html b/bedrock/mozorg/templates/mozorg/home/includes/mr2-promo.html
index e65717db135..ada0ec4ef77 100644
--- a/bedrock/mozorg/templates/mozorg/home/includes/mr2-promo.html
+++ b/bedrock/mozorg/templates/mozorg/home/includes/mr2-promo.html
@@ -7,8 +7,12 @@
 {% from "macros-protocol.html" import split with context %}
 
 {% call split(
-  image_url='img/home/2021/mr2-watercolor.png',
-  include_highres_image=True,
+  image=resp_img(
+    url='img/home/2021/mr2-watercolor.png',
+    optional_attributes={
+      'class': 'mzp-c-split-media-asset'
+    }
+  ),
   block_class='mr2-home-hero mzp-l-split-center-on-sm-md mzp-l-split-hide-media-on-sm-md',
   body_class=None,
   media_class='mzp-l-split-h-center mzp-l-split-v-center',
diff --git a/bedrock/newsletter/templates/newsletter/family.html b/bedrock/newsletter/templates/newsletter/family.html
index 6c82e332b51..08e1078496d 100644
--- a/bedrock/newsletter/templates/newsletter/family.html
+++ b/bedrock/newsletter/templates/newsletter/family.html
@@ -23,7 +23,12 @@
 {% block content %}
 <main class="newsletter-main" role="main">
   {% call split(
-    image_url='img/newsletter/family/illustration.svg',
+    image=resp_img(
+      url='img/newsletter/family/illustration.svg',
+      optional_attributes={
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_class='mzp-l-split-v-start',
     block_class='mzp-t-content-lg'
   ) %}
diff --git a/bedrock/products/templates/products/vpn/resource-center/base-article.html b/bedrock/products/templates/products/vpn/resource-center/base-article.html
index 6a210f9f88d..0766d4a1eec 100644
--- a/bedrock/products/templates/products/vpn/resource-center/base-article.html
+++ b/bedrock/products/templates/products/vpn/resource-center/base-article.html
@@ -67,9 +67,14 @@ <h3>{{ ftl('vpn-resource-center-related-posts') }}</h3>
   </div>
   {% endif %}
 
-  {% call split (
-  image_url='img/products/vpn/resource-center/resource_center_split_2_2x.jpg',
-  block_class='mzp-t-content-lg',
+  {% call split(
+    image=resp_img(
+      url='img/products/vpn/resource-center/resource_center_split_2_2x.jpg',
+      optional_attributes={
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
+    block_class='mzp-t-content-lg',
   ) %}
     <h2 class="resource-center-cta-title">{{ ftl('vpn-resource-center-obsessed-with') }}</h2>
        {{ vpn_product_referral_link(
diff --git a/bedrock/products/templates/products/vpn/resource-center/landing.html b/bedrock/products/templates/products/vpn/resource-center/landing.html
index d0b7144c9a9..bbc074f6623 100644
--- a/bedrock/products/templates/products/vpn/resource-center/landing.html
+++ b/bedrock/products/templates/products/vpn/resource-center/landing.html
@@ -48,8 +48,13 @@
       {% include "products/vpn/resource-center/includes/vpn-article-card.html" %}
     {% endfor %}
   </div>
-  {% call split (
-    image_url="img/products/vpn/resource-center/resource_center_split_1.svg",
+  {% call split(
+    image=resp_img(
+      url='img/products/vpn/resource-center/resource_center_split_1.svg',
+      optional_attributes={
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     block_class='resource-center-split mzp-t-content-lg mzp-l-split-center-on-sm-md',
     media_class='resource-center-split-media',
   ) %}
@@ -75,8 +80,13 @@ <h2 class="mzp-c-call-out-title">{{ ftl('vpn-resource-center-start-protecting')
       {% endfor %}
     </div>
     {# Only show the second split if there was something after the first split #}
-    {% call split (
-      image_url="img/products/vpn/resource-center/resource_center_split_2.jpg",
+    {% call split(
+      image=resp_img(
+        url='img/products/vpn/resource-center/resource_center_split_2.jpg',
+        optional_attributes={
+          'class': 'mzp-c-split-media-asset'
+        }
+      ),
       block_class='mzp-t-content-lg',
     ) %}
       <h2 class="resource-center-cta-title">{{ ftl('vpn-resource-center-obsessed-with') }}</h2>