diff --git a/oe_theme.theme b/oe_theme.theme
index cfcb5c55c..f5c8a684b 100644
--- a/oe_theme.theme
+++ b/oe_theme.theme
@@ -35,6 +35,7 @@ use Drupal\oe_theme\ValueObject\FileValueObject;
 use Drupal\oe_theme\ValueObject\GalleryItemValueObject;
 use Drupal\oe_theme\ValueObject\ImageValueObject;
 use Drupal\oe_theme_helper\EuropeanUnionLanguages;
+use Drupal\responsive_image\Entity\ResponsiveImageStyle;
 
 /**
  * Implements hook_form_FORM_ID_alter().
@@ -1669,62 +1670,58 @@ function oe_theme_preprocess_paragraph__oe_banner(array &$variables): void {
     return;
   }
 
-  // Load needed images styles based on banner size.
-  $image_style_storage = \Drupal::entityTypeManager()->getStorage('image_style');
-  if ($variables['size'] === 's') {
-    $full_width = $image_style_storage->load('oe_theme_full_width_banner_5_1');
-    $extra_large = $image_style_storage->load('oe_theme_extra_large_5_1_banner');
-    $large = $image_style_storage->load('oe_theme_large_5_1_banner');
-    $medium = $image_style_storage->load('oe_theme_medium_5_1_banner');
-    $small = $image_style_storage->load('oe_theme_small_5_1_banner');
-  }
-  if ($variables['size'] === 'm') {
-    $full_width = $image_style_storage->load('oe_theme_full_width_banner_4_1');
-    $extra_large = $image_style_storage->load('oe_theme_extra_large_4_1_banner');
-    $large = $image_style_storage->load('oe_theme_large_4_1_banner');
-    $medium = $image_style_storage->load('oe_theme_medium_4_1_banner');
-    $small = $image_style_storage->load('oe_theme_small_4_1_banner');
-  }
-  if ($variables['size'] === 'l') {
-    $full_width = $image_style_storage->load('oe_theme_full_width_banner_3_1');
-    $extra_large = $image_style_storage->load('oe_theme_extra_large_3_1_banner');
-    $large = $image_style_storage->load('oe_theme_large_3_1_banner');
-    $medium = $image_style_storage->load('oe_theme_medium_3_1_banner');
-    $small = $image_style_storage->load('oe_theme_small_3_1_banner');
-  }
+  $banner_type = match ($variables['size']) {
+    's' => '5_1',
+    'm' => '4_1',
+    'l' => '3_1',
+  };
 
+  $responsive_image = _oe_theme_load_from_responsive_image_style_id("oe_theme_{$banner_type}_banner", $uri);
+  $variables['sources'] = $responsive_image['sources'];
   $values = [
-    'src' => $full_width->buildUrl($uri),
+    'src' => $responsive_image['fallback'],
     'alt' => $source->getMetadata($media, 'thumbnail_alt_value') ?? '',
     'name' => $media->getName(),
   ];
   $variables['image'] = ImageValueObject::fromArray($values);
-  $variables['sources'] = [
-    [
-      'src' => $small->buildUrl($uri),
-      'size' => 's',
-    ],
-    [
-      'src' => $medium->buildUrl($uri),
-      'size' => 'm',
-    ],
-    [
-      'src' => $large->buildUrl($uri),
-      'size' => 'l',
-    ],
-    [
-      'src' => $extra_large->buildUrl($uri),
-      'size' => 'xl',
-    ],
-    [
-      'src' => $full_width->buildUrl($uri),
-      'size' => 'full_width',
-    ],
-  ];
 
   $cacheability->applyTo($variables);
 }
 
+/**
+ * Get responsive image style srcset and fallback url.
+ *
+ * Based on template_preprocess_responsive_image.
+ *
+ * @param string $responsive_image_style_id
+ *   The responsive image id.
+ * @param string $uri
+ *   The image uri.
+ *
+ * @return array
+ *   Returns sources and fallback url.
+ */
+function _oe_theme_load_from_responsive_image_style_id($responsive_image_style_id, $uri) {
+  $responsive_image_style = ResponsiveImageStyle::load($responsive_image_style_id);
+  $resp_image = [];
+  $breakpoints = array_reverse(\Drupal::service('breakpoint.manager')->getBreakpointsByGroup($responsive_image_style->getBreakpointGroup()));
+  foreach ($responsive_image_style->getKeyedImageStyleMappings() as $breakpoint_id => $multipliers) {
+    if (isset($breakpoints[$breakpoint_id])) {
+      $responsive_image = _responsive_image_build_source_attributes(['uri' => $uri], $breakpoints[$breakpoint_id], $multipliers);
+      $responsive_image_array = $responsive_image->toArray();
+      $resp_image['sources'][] = [
+        'src' => $responsive_image_array['srcset'],
+        'media' => $responsive_image_array['media'] ?? '',
+      ];
+    }
+  }
+
+  // Add fallback style.
+  $resp_image['fallback'] = _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $uri);
+
+  return $resp_image;
+}
+
 /**
  * Implements hook_theme_suggestions_HOOK_alter().
  */
diff --git a/templates/patterns/banners/banner.ui_patterns.yml b/templates/patterns/banners/banner.ui_patterns.yml
index bb4a35cf8..66ded778f 100755
--- a/templates/patterns/banners/banner.ui_patterns.yml
+++ b/templates/patterns/banners/banner.ui_patterns.yml
@@ -72,16 +72,16 @@ banner:
       label: "Image sources"
       description: "Array containing different sized image for each banner size."
       preview:
-        - src: "https://loremflickr.com/480/160/arch"
-          size: "s"
-        - src: "https://loremflickr.com/768/256/dog"
-          size: "m"
-        - src: "https://loremflickr.com/996/332/paris"
-          size: "l"
-        - src: "https://loremflickr.com/1140/380/brazil"
-          size: "xl"
         - src: "https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
-          size: "full_width"
+          media: '(min-width: 1140px)'
+        - src: "https://loremflickr.com/1140/380/brazil"
+          media: '(min-width: 996px)'
+        - src: "https://loremflickr.com/996/332/paris"
+          media: '(min-width: 768px)'
+        - src: "https://loremflickr.com/768/256/dog"
+          media: '(min-width: 480px)'
+        - src: "https://loremflickr.com/480/160/arch"
+          media: ''
     size:
       type: "text"
       label: "Size"
diff --git a/templates/patterns/banners/pattern-banner.html.twig b/templates/patterns/banners/pattern-banner.html.twig
index 0c34713e2..991dfc824 100755
--- a/templates/patterns/banners/pattern-banner.html.twig
+++ b/templates/patterns/banners/pattern-banner.html.twig
@@ -79,25 +79,7 @@
   } %}
 {% endif %}
 {% if sources is not empty and sources is iterable %}
-  {% set _sources = [] %}
-  {% for source in sources %}
-    {% set media = '' %}
-    {% if source.size == 's' %}
-      {% set media = '(max-width: 480px)' %}
-    {% elseif source.size == 'm' %}
-      {% set media = '(max-width: 768px)' %}
-    {% elseif source.size == 'l' %}
-      {% set media = '(max-width: 996px)' %}
-    {% elseif source.size == 'xl' %}
-      {% set media = '(max-width: 1140px)' %}
-    {% elseif source.size == 'full_width' %}
-      {% set media = '(min-width: 1140px)' %}
-    {% endif %}
-    {% set _sources = _sources|merge([{
-      'src': source.src,
-      'media': media,
-    }]) %}
-  {% endfor %}
+  {% set _sources = sources %}
 {% endif %}
 {% set _picture = _picture|merge({
   'sources': _sources,
diff --git a/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php b/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php
index 4bf0473a0..1bb102955 100644
--- a/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php
+++ b/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php
@@ -47,6 +47,8 @@ class MediaParagraphsTest extends ParagraphsTestBase {
     'oe_paragraphs_carousel',
     'composite_reference',
     'oe_paragraphs_av_media',
+    'breakpoint',
+    'responsive_image',
   ];
 
   /**
@@ -58,6 +60,7 @@ protected function setUp(): void {
     $this->container->get('module_handler')->loadInclude('oe_paragraphs_media_field_storage', 'install');
     oe_paragraphs_media_field_storage_install(FALSE);
     $this->installEntitySchema('media');
+
     $this->installConfig([
       'json_field',
       'media',
@@ -74,10 +77,14 @@ protected function setUp(): void {
       'oe_media_iframe',
       'oe_paragraphs_carousel',
       'oe_paragraphs_av_media',
+      'breakpoint',
+      'responsive_image',
     ]);
+
     // Call the installation hook of the Media module.
     \Drupal::moduleHandler()->loadInclude('media', 'install');
     media_install();
+
   }
 
   /**
@@ -442,6 +449,10 @@ public function testTextWithMedia(): void {
    * Test 'banner' paragraph rendering.
    */
   public function testBanner(): void {
+
+    $breakpointsByGroup = \Drupal::service('breakpoint.manager')->getBreakpointsByGroup('oe_theme');
+    $this->assertCount(5, $breakpointsByGroup);
+
     // Set image media translatable.
     $this->container->get('content_translation.manager')->setEnabled('media', 'image', TRUE);
     // Make the image field translatable.
@@ -472,7 +483,6 @@ public function testBanner(): void {
     $media->save();
     // Get english file styled URI.
     $style = ImageStyle::load('oe_theme_full_width_banner_3_1');
-    $en_file_uri = $style->buildUri($en_file->getFileUri());
 
     // Translate the media to Bulgarian.
     $media_bg = $media->addTranslation('bg', [
@@ -483,8 +493,6 @@ public function testBanner(): void {
       ],
     ]);
     $media_bg->save();
-    // Get bulgarian file styled URI.
-    $bg_file_uri = $style->buildUri($bg_file->getFileUri());
 
     $paragraph_storage = $this->container->get('entity_type.manager')->getStorage('paragraph');
     $paragraph = $paragraph_storage->create([
@@ -515,24 +523,25 @@ public function testBanner(): void {
     $this->assertCount(1, $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--l.ecl-banner--h-center.ecl-banner--v-center'));
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
+
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($en_file_uri),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($en_file->getFileUri())),
       $image_element->attr('src')
     );
     // Assert all the media sources for different breakpoints.
-    $small_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="(max-width: 480px)"]');
+    $small_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source:not([media])');
     $this->assertCount(1, $small_media);
     $this->assertStringContainsString('oe_theme_small_3_1_banner/public/example_1_en.jpeg', $small_media->attr('srcset'));
-    $medium_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="(max-width: 768px)"]');
+    $medium_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="all and (min-width: 480px)"]');
     $this->assertCount(1, $medium_media);
     $this->assertStringContainsString('oe_theme_medium_3_1_banner/public/example_1_en.jpeg', $medium_media->attr('srcset'));
-    $large_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="(max-width: 996px)"]');
+    $large_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="all and (min-width: 768px)"]');
     $this->assertCount(1, $large_media);
     $this->assertStringContainsString('oe_theme_large_3_1_banner/public/example_1_en.jpeg', $large_media->attr('srcset'));
-    $extra_large_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="(max-width: 1140px)"]');
+    $extra_large_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="all and (min-width: 996px)"]');
     $this->assertCount(1, $extra_large_media);
     $this->assertStringContainsString('oe_theme_extra_large_3_1_banner/public/example_1_en.jpeg', $extra_large_media->attr('srcset'));
-    $full_width_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="(min-width: 1140px)"]');
+    $full_width_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="all and (min-width: 1140px)"]');
     $this->assertCount(1, $full_width_media);
     $this->assertStringContainsString('oe_theme_full_width_banner_3_1/public/example_1_en.jpeg', $full_width_media->attr('srcset'));
     $this->assertStringContainsString('Alt en', $image_element->attr('alt'));
@@ -549,7 +558,7 @@ public function testBanner(): void {
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     // Bulgarian media should be rendered.
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($bg_file_uri),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($bg_file->getFileUri())),
       $image_element->attr('src')
     );
     $this->assertStringContainsString('Alt bg', $image_element->attr('alt'));
@@ -591,7 +600,7 @@ public function testBanner(): void {
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($en_file_uri),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($en_file->getFileUri())),
       $image_element->attr('src')
     );
     $this->assertEquals('Banner', trim($crawler->filter('div.ecl-banner__content div.ecl-banner__title')->text()));
@@ -608,27 +617,26 @@ public function testBanner(): void {
     $crawler = new Crawler($html);
 
     $style = ImageStyle::load('oe_theme_full_width_banner_4_1');
-    $en_file_uri_medium = $style->buildUri($en_file->getFileUri());
     $this->assertCount(1, $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--m.ecl-banner--h-center'));
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($en_file_uri_medium),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($en_file->getFileUri())),
       $image_element->attr('src')
     );
-    $small_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="(max-width: 480px)"]');
+    $small_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source:not([media])');
     $this->assertCount(1, $small_media);
     $this->assertStringContainsString('oe_theme_small_4_1_banner/public/example_1_en.jpeg', $small_media->attr('srcset'));
-    $medium_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="(max-width: 768px)"]');
+    $medium_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="all and (min-width: 480px)"]');
     $this->assertCount(1, $medium_media);
     $this->assertStringContainsString('oe_theme_medium_4_1_banner/public/example_1_en.jpeg', $medium_media->attr('srcset'));
-    $large_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="(max-width: 996px)"]');
+    $large_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="all and (min-width: 768px)"]');
     $this->assertCount(1, $large_media);
     $this->assertStringContainsString('oe_theme_large_4_1_banner/public/example_1_en.jpeg', $large_media->attr('srcset'));
-    $extra_large_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="(max-width: 1140px)"]');
+    $extra_large_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="all and (min-width: 996px)"]');
     $this->assertCount(1, $extra_large_media);
     $this->assertStringContainsString('oe_theme_extra_large_4_1_banner/public/example_1_en.jpeg', $extra_large_media->attr('srcset'));
-    $full_width_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="(min-width: 1140px)"]');
+    $full_width_media = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark.ecl-banner--h-center picture source[media="all and (min-width: 1140px)"]');
     $this->assertCount(1, $full_width_media);
     $this->assertStringContainsString('oe_theme_full_width_banner_4_1/public/example_1_en.jpeg', $full_width_media->attr('srcset'));
     $this->assertEquals('Banner', trim($crawler->filter('div.ecl-banner__content div.ecl-banner__title')->text()));
@@ -649,7 +657,7 @@ public function testBanner(): void {
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-light.ecl-banner--color-dark picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($en_file_uri_medium),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($en_file->getFileUri())),
       $image_element->attr('src')
     );
     $this->assertEquals('Banner', trim($crawler->filter('div.ecl-banner__content div.ecl-banner__title')->text()));
@@ -666,11 +674,12 @@ public function testBanner(): void {
     $html = $this->renderParagraph($paragraph);
     $crawler = new Crawler($html);
 
+    $style = ImageStyle::load('oe_theme_full_width_banner_3_1');
     $this->assertCount(1, $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light.ecl-banner--l.ecl-banner--h-center.ecl-banner--v-center'));
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($en_file_uri),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($en_file->getFileUri())),
       $image_element->attr('src')
     );
     $this->assertEquals('Banner', trim($crawler->filter('div.ecl-banner__content div.ecl-banner__title')->text()));
@@ -690,7 +699,7 @@ public function testBanner(): void {
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($en_file_uri),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($en_file->getFileUri())),
       $image_element->attr('src')
     );
     $this->assertEquals('Banner', trim($crawler->filter('div.ecl-banner__content div.ecl-banner__title')->text()));
@@ -707,11 +716,12 @@ public function testBanner(): void {
     $html = $this->renderParagraph($paragraph);
     $crawler = new Crawler($html);
 
+    $style = ImageStyle::load('oe_theme_full_width_banner_4_1');
     $this->assertCount(1, $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light.ecl-banner--m.ecl-banner--h-center'));
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($en_file_uri_medium),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($en_file->getFileUri())),
       $image_element->attr('src')
     );
     $this->assertEquals('Banner', trim($crawler->filter('div.ecl-banner__content div.ecl-banner__title')->text()));
@@ -732,7 +742,7 @@ public function testBanner(): void {
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($en_file_uri_medium),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($en_file->getFileUri())),
       $image_element->attr('src')
     );
     $this->assertEquals('Banner', trim($crawler->filter('div.ecl-banner__content div.ecl-banner__title')->text()));
@@ -842,12 +852,13 @@ public function testBanner(): void {
     $html = $this->renderParagraph($paragraph);
     $crawler = new Crawler($html);
 
+    $style = ImageStyle::load('oe_theme_full_width_banner_3_1');
     $this->assertCount(1, $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light.ecl-banner--l.ecl-banner--h-center.ecl-banner--full-width'));
 
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($en_file_uri),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($en_file->getFileUri())),
       $image_element->attr('src')
     );
     $this->assertEquals('Banner', trim($crawler->filter('div.ecl-banner__content div.ecl-banner__title')->text()));
@@ -864,6 +875,7 @@ public function testBanner(): void {
     $paragraph->save();
     $html = $this->renderParagraph($paragraph);
     $crawler = new Crawler($html);
+    $style = ImageStyle::load('oe_theme_full_width_banner_4_1');
 
     $this->assertCount(0, $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light.ecl-banner--m.ecl-banner--h-center.ecl-banner--full-width'));
     $this->assertCount(1, $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light.ecl-banner--m'));
@@ -871,7 +883,7 @@ public function testBanner(): void {
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($en_file_uri_medium),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($en_file->getFileUri())),
       $image_element->attr('src')
     );
     $this->assertEquals('Banner', trim($crawler->filter('div.ecl-banner__content div.ecl-banner__title')->text()));
@@ -888,7 +900,7 @@ public function testBanner(): void {
       'status' => 1,
     ]);
     $media->save();
-    $av_portal_file_uri = $style->buildUri('avportal://P-038924/00-15.jpg');
+    $av_portal_file_url = 'avportal://P-038924/00-15.jpg';
 
     $paragraph->get('field_oe_media')->setValue([
       'target_id' => $media->id(),
@@ -907,7 +919,7 @@ public function testBanner(): void {
     $image_element = $crawler->filter('section.ecl-banner.ecl-banner--font-m.ecl-banner--box-bg-dark.ecl-banner--color-light picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
     $this->assertCount(1, $image_element);
     $this->assertStringContainsString(
-      $this->container->get('file_url_generator')->generateAbsoluteString($av_portal_file_uri),
+      $this->container->get('file_url_generator')->transformRelative($style->buildUrl($av_portal_file_url)),
       $image_element->attr('src')
     );
   }
@@ -1030,26 +1042,26 @@ public function testCarousel(): void {
     $en_file_1->save();
     // Get first english file styled URI.
     $style = ImageStyle::load('oe_theme_full_width_banner_3_1');
-    $en_file_1_uri = $style->buildUri($en_file_1->getFileUri());
+    $en_file_1_url = $style->buildUrl($en_file_1->getFileUri());
 
     $en_file_2 = $this->container->get('file.repository')->writeData(file_get_contents($this->container->get('extension.list.theme')->getPath('oe_theme') . '/tests/fixtures/example_1.jpeg'), 'public://example_2_en.jpeg');
     $en_file_2->setPermanent();
     $en_file_2->save();
-    // Get second english file styled URI.
-    $en_file_2_uri = $style->buildUri($en_file_2->getFileUri());
+    // Get second english file styled URL.
+    $en_file_2_url = $style->buildUrl($en_file_2->getFileUri());
 
     // Create Bulgarian files.
     $bg_file_1 = $this->container->get('file.repository')->writeData(file_get_contents($this->container->get('extension.list.theme')->getPath('oe_theme') . '/tests/fixtures/example_1.jpeg'), 'public://example_1_bg.jpeg');
     $bg_file_1->setPermanent();
     $bg_file_1->save();
-    // Get first bulgarian file styled URI.
-    $bg_file_1_uri = $style->buildUri($bg_file_1->getFileUri());
+    // Get first bulgarian file styled URL.
+    $bg_file_1_url = $style->buildUrl($bg_file_1->getFileUri());
 
     $bg_file_2 = $this->container->get('file.repository')->writeData(file_get_contents($this->container->get('extension.list.theme')->getPath('oe_theme') . '/tests/fixtures/example_1.jpeg'), 'public://example_2_bg.jpeg');
     $bg_file_2->setPermanent();
     $bg_file_2->save();
-    // Get second bulgarian file styled URI.
-    $bg_file_2_uri = $style->buildUri($bg_file_2->getFileUri());
+    // Get second bulgarian file styled URL.
+    $bg_file_2_url = $style->buildUrl($bg_file_2->getFileUri());
 
     // Create a couple of media items with Bulgarian translation.
     $media_storage = $this->container->get('entity_type.manager')
@@ -1133,7 +1145,7 @@ public function testCarousel(): void {
       'items' => [
         [
           'title' => 'Item 1',
-          'image' => $this->container->get('file_url_generator')->generateAbsoluteString($en_file_1_uri),
+          'image' => $this->container->get('file_url_generator')->transformRelative($en_file_1_url),
           'image_alt' => 'First image alt en',
           'sources' => [
             'small' => 'oe_theme_small_3_1_banner/public/example_1_en.jpeg',
@@ -1149,7 +1161,7 @@ public function testCarousel(): void {
           'description' => 'Item description 2',
           'url' => 'http://www.example.com/',
           'url_text' => 'CTA 2',
-          'image' => $this->container->get('file_url_generator')->generateAbsoluteString($en_file_2_uri),
+          'image' => $this->container->get('file_url_generator')->transformRelative($en_file_2_url),
           'sources' => [
             'small' => 'oe_theme_small_3_1_banner/public/example_2_en.jpeg',
             'medium' => 'oe_theme_medium_3_1_banner/public/example_2_en.jpeg',
@@ -1161,7 +1173,7 @@ public function testCarousel(): void {
         ],
         [
           'title' => 'Item 3',
-          'image' => $this->container->get('file_url_generator')->generateAbsoluteString($en_file_1_uri),
+          'image' => $this->container->get('file_url_generator')->transformRelative($en_file_1_url),
           'image_alt' => 'First image alt en',
           'sources' => [
             'small' => 'oe_theme_small_3_1_banner/public/example_1_en.jpeg',
@@ -1177,7 +1189,7 @@ public function testCarousel(): void {
           'description' => 'Item description 4',
           'url' => '/',
           'url_text' => 'CTA 4',
-          'image' => $this->container->get('file_url_generator')->generateAbsoluteString($en_file_2_uri),
+          'image' => $this->container->get('file_url_generator')->transformRelative($en_file_2_url),
           'sources' => [
             'small' => 'oe_theme_small_3_1_banner/public/example_2_en.jpeg',
             'medium' => 'oe_theme_medium_3_1_banner/public/example_2_en.jpeg',
@@ -1198,7 +1210,7 @@ public function testCarousel(): void {
     $carousel_size = $crawler->filter('section.ecl-banner--l');
     $this->assertCount(4, $carousel_size);
     $expected_values['items'][0]['title'] = 'BG Item 1';
-    $expected_values['items'][0]['image'] = $this->container->get('file_url_generator')->generateAbsoluteString($bg_file_1_uri);
+    $expected_values['items'][0]['image'] = $this->container->get('file_url_generator')->transformRelative($bg_file_1_url);
     $expected_values['items'][0]['image_alt'] = 'First image alt bg';
     $expected_values['items'][0]['sources'] = [
       'small' => 'oe_theme_small_3_1_banner/public/example_1_bg.jpeg',
@@ -1210,7 +1222,7 @@ public function testCarousel(): void {
     $expected_values['items'][1]['title'] = 'BG Item 2';
     $expected_values['items'][1]['description'] = 'BG Item description 2';
     $expected_values['items'][1]['url_text'] = 'BG CTA 2';
-    $expected_values['items'][1]['image'] = $this->container->get('file_url_generator')->generateAbsoluteString($bg_file_2_uri);
+    $expected_values['items'][1]['image'] = $this->container->get('file_url_generator')->transformRelative($bg_file_2_url);
     $expected_values['items'][1]['sources'] = [
       'small' => 'oe_theme_small_3_1_banner/public/example_2_bg.jpeg',
       'medium' => 'oe_theme_medium_3_1_banner/public/example_2_bg.jpeg',
@@ -1219,7 +1231,7 @@ public function testCarousel(): void {
       'full_width' => 'oe_theme_full_width_banner_3_1/public/example_2_bg.jpeg',
     ];
     $expected_values['items'][2]['title'] = 'BG Item 3';
-    $expected_values['items'][2]['image'] = $this->container->get('file_url_generator')->generateAbsoluteString($bg_file_1_uri);
+    $expected_values['items'][2]['image'] = $this->container->get('file_url_generator')->transformRelative($bg_file_1_url);
     $expected_values['items'][2]['image_alt'] = 'First image alt bg';
     $expected_values['items'][2]['sources'] = [
       'small' => 'oe_theme_small_3_1_banner/public/example_1_bg.jpeg',
@@ -1232,7 +1244,7 @@ public function testCarousel(): void {
     $expected_values['items'][3]['description'] = 'BG Item description 4';
     $expected_values['items'][3]['url'] = 'http://www.example.com/';
     $expected_values['items'][3]['url_text'] = 'BG CTA 4';
-    $expected_values['items'][3]['image'] = $this->container->get('file_url_generator')->generateAbsoluteString($bg_file_2_uri);
+    $expected_values['items'][3]['image'] = $this->container->get('file_url_generator')->transformRelative($bg_file_2_url);
     $expected_values['items'][3]['sources'] = [
       'small' => 'oe_theme_small_3_1_banner/public/example_2_bg.jpeg',
       'medium' => 'oe_theme_medium_3_1_banner/public/example_2_bg.jpeg',