diff --git a/src/implementations/twig/components/navigation-list/README.md b/src/implementations/twig/components/navigation-list/README.md
index e6421710e9b..dcb12ed3187 100644
--- a/src/implementations/twig/components/navigation-list/README.md
+++ b/src/implementations/twig/components/navigation-list/README.md
@@ -10,27 +10,34 @@ npm install --save @ecl/twig-component-navigation-list
 
 - **"items"** (array) (default: []): array of list_illustration_item
   - **"border"** (boolean) (default: false): Is there an extra border and padding?
-  - **"image"** (associative array) (default: {}):
-    - **"src"** (string) (default: ''): Path to the image
-    - **"alt"** (string) (default: '')
+  - **"picture** (associative array) (default: {}): picture of the navigation list, following ECL Picture structure
   - **"title"** (associative array) (default: {}): Predefined structure compatible with Link component
   - **"description"** (string) (default: ''): Description of the navigation list
   - **"links"** (array) (default: []): Array or multi array of ECL Links
 - **"column"** (number) (default: 2): number of columns (2 or 3)
 - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
 - **"extra_attributes"** (optional) (array) (default: []) Extra attributes
+
   - "name" (string) Attribute name, eg. 'data-test'
   - "value" (string) Attribute value, eg: 'data-test-1'
 
+    Deprecated
+
+- **"image"** (optional) (object) (default: {}) image
+  - "src" (string) Image src
+  - "alt" (string) Image alt
+
 <!-- prettier-ignore -->
 ```twig
 {% include '@ecl/navigation-list/navigation-list.html.twig' with { 
   items: [ 
     { 
-      image: { 
-        src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg', 
-        size: 'l', 
-      }, 
+      picture: {
+        img: {
+          src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
+          alt: 'Alt text for the image',
+        },
+      },
       title: { 
         type: 'standalone', 
         label: 'Title 1', 
diff --git a/src/implementations/twig/components/navigation-list/__snapshots__/navigation-list.test.js.snap b/src/implementations/twig/components/navigation-list/__snapshots__/navigation-list.test.js.snap
index 7008051b91b..cf1c05f082f 100644
--- a/src/implementations/twig/components/navigation-list/__snapshots__/navigation-list.test.js.snap
+++ b/src/implementations/twig/components/navigation-list/__snapshots__/navigation-list.test.js.snap
@@ -8,12 +8,15 @@ exports[`Navigation list Default renders correctly 1`] = `
     <article
       class="ecl-navigation-list__item ecl-navigation-list__item--no-border"
     >
-      <div
-        aria-label="Alt text of the image"
-        class="ecl-navigation-list__image"
-        role="img"
-        style="background-image:url('https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg')"
-      />
+      <picture
+        class="ecl-picture ecl-navigation-list__picture"
+      >
+        <img
+          alt="Alt text for the image"
+          class="ecl-navigation-list__image"
+          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+        />
+      </picture>
       <div
         class="ecl-content-block ecl-navigation-list__content-block"
       >
@@ -104,12 +107,15 @@ exports[`Navigation list Default renders correctly 1`] = `
     <article
       class="ecl-navigation-list__item ecl-navigation-list__item--no-border"
     >
-      <div
-        aria-label="Alt text of the image"
-        class="ecl-navigation-list__image"
-        role="img"
-        style="background-image:url('https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg')"
-      />
+      <picture
+        class="ecl-picture ecl-navigation-list__picture"
+      >
+        <img
+          alt="Alt text for the image"
+          class="ecl-navigation-list__image"
+          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+        />
+      </picture>
       <div
         class="ecl-content-block ecl-navigation-list__content-block"
       >
@@ -205,12 +211,331 @@ exports[`Navigation list Default renders correctly 1`] = `
     <article
       class="ecl-navigation-list__item ecl-navigation-list__item--no-border"
     >
+      <picture
+        class="ecl-picture ecl-navigation-list__picture"
+      >
+        <img
+          alt="Alt text for the image"
+          class="ecl-navigation-list__image"
+          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+        />
+      </picture>
       <div
-        aria-label="Alt text of the image"
-        class="ecl-navigation-list__image"
-        role="img"
-        style="background-image:url('https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg')"
-      />
+        class="ecl-content-block ecl-navigation-list__content-block"
+      >
+        <h1
+          class="ecl-content-block__title"
+        >
+          <a
+            class="ecl-link ecl-link--standalone"
+            href="/example"
+          >
+            Title 3
+          </a>
+        </h1>
+        <div
+          class="ecl-content-block__description"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum ut lorem cursus, quis tincidunt sem viverra. Nunc vestibulum, mauris quis porta venenatis, justo odio commodo tellus
+        </div>
+        <div
+          class="ecl-content-block__link-container"
+        >
+          <ul
+            class="ecl-content-block__link-list"
+          >
+            <li
+              class="ecl-content-block__link-item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone"
+                href="/example"
+              >
+                Primary link 1
+              </a>
+            </li>
+            <li
+              class="ecl-content-block__link-item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone"
+                href="/example"
+              >
+                Primary link 2
+              </a>
+            </li>
+            <li
+              class="ecl-content-block__link-item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone"
+                href="/example"
+              >
+                Primary link 3
+              </a>
+            </li>
+            <li
+              class="ecl-content-block__link-item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone"
+                href="/example"
+              >
+                Primary link 4
+              </a>
+            </li>
+          </ul>
+          <ul
+            class="ecl-content-block__link-list"
+          >
+            <li
+              class="ecl-content-block__link-item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone"
+                href="/example"
+              >
+                Secondary link 1
+              </a>
+            </li>
+            <li
+              class="ecl-content-block__link-item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone"
+                href="/example"
+              >
+                Secondary link 2
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </article>
+  </div>
+</jest>
+`;
+
+exports[`Navigation list Default renders correctly with deprecated data 1`] = `
+<jest>
+  <div
+    class="ecl-navigation-list ecl-navigation-list--col-2"
+  >
+    <article
+      class="ecl-navigation-list__item ecl-navigation-list__item--no-border"
+    >
+      <picture
+        class="ecl-picture ecl-navigation-list__picture"
+      >
+        <img
+          alt="Alternative text"
+          class="ecl-navigation-list__image"
+          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+        />
+      </picture>
+      <div
+        class="ecl-content-block ecl-navigation-list__content-block"
+      >
+        <h1
+          class="ecl-content-block__title"
+        >
+          <a
+            class="ecl-link ecl-link--standalone"
+            href="/example"
+          >
+            Title 1
+          </a>
+        </h1>
+        <div
+          class="ecl-content-block__description"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum ut lorem cursus, quis tincidunt sem viverra. Nunc vestibulum, mauris quis porta venenatis, justo odio commodo tellus
+        </div>
+        <div
+          class="ecl-content-block__link-container"
+        >
+          <ul
+            class="ecl-content-block__link-list"
+          >
+            <li
+              class="ecl-content-block__link-item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone"
+                href="/example"
+              >
+                Primary link 1
+              </a>
+            </li>
+            <li
+              class="ecl-content-block__link-item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone"
+                href="/example"
+              >
+                Primary link 2
+              </a>
+            </li>
+            <li
+              class="ecl-content-block__link-item"
+            >
+              A simple string
+            </li>
+            <li
+              class="ecl-content-block__link-item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone"
+                href="/example"
+              >
+                Primary link 3
+              </a>
+            </li>
+          </ul>
+          <ul
+            class="ecl-content-block__link-list"
+          >
+            <li
+              class="ecl-content-block__link-item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone"
+                href="/example"
+              >
+                Secondary link 1
+              </a>
+            </li>
+            <li
+              class="ecl-content-block__link-item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone"
+                href="/example"
+              >
+                Secondary link 2
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </article>
+    <article
+      class="ecl-navigation-list__item ecl-navigation-list__item--no-border"
+    >
+      <picture
+        class="ecl-picture ecl-navigation-list__picture"
+      >
+        <img
+          alt="Alt text for the image"
+          class="ecl-navigation-list__image"
+          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+        />
+      </picture>
+      <div
+        class="ecl-content-block ecl-navigation-list__content-block"
+      >
+        <h1
+          class="ecl-content-block__title"
+        >
+          <a
+            class="ecl-link ecl-link--standalone"
+            href="/example"
+          >
+            Title 2
+          </a>
+        </h1>
+        <div
+          class="ecl-content-block__description"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum ut lorem cursus, quis tincidunt sem viverra. Nunc vestibulum, mauris quis porta venenatis, justo odio commodo tellus
+        </div>
+        <div
+          class="ecl-content-block__link-container"
+        >
+          <ul
+            class="ecl-content-block__link-list"
+          >
+            <li
+              class="ecl-content-block__link-item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone"
+                href="/example"
+              >
+                Primary link 1
+              </a>
+            </li>
+            <li
+              class="ecl-content-block__link-item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone"
+                href="/example"
+              >
+                Primary link 2
+              </a>
+            </li>
+            <li
+              class="ecl-content-block__link-item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone"
+                href="/example"
+              >
+                Primary link 3
+              </a>
+            </li>
+            <li
+              class="ecl-content-block__link-item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone"
+                href="/example"
+              >
+                Primary link 4
+              </a>
+            </li>
+          </ul>
+          <ul
+            class="ecl-content-block__link-list"
+          >
+            <li
+              class="ecl-content-block__link-item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone"
+                href="/example"
+              >
+                Secondary link 1
+              </a>
+            </li>
+            <li
+              class="ecl-content-block__link-item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone"
+                href="/example"
+              >
+                Secondary link 2
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </article>
+    <article
+      class="ecl-navigation-list__item ecl-navigation-list__item--no-border"
+    >
+      <picture
+        class="ecl-picture ecl-navigation-list__picture"
+      >
+        <img
+          alt="Alt text for the image"
+          class="ecl-navigation-list__image"
+          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+        />
+      </picture>
       <div
         class="ecl-content-block ecl-navigation-list__content-block"
       >
@@ -317,12 +642,15 @@ exports[`Navigation list Default renders correctly with extra attributes 1`] = `
     <article
       class="ecl-navigation-list__item ecl-navigation-list__item--no-border"
     >
-      <div
-        aria-label="Alt text of the image"
-        class="ecl-navigation-list__image"
-        role="img"
-        style="background-image:url('https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg')"
-      />
+      <picture
+        class="ecl-picture ecl-navigation-list__picture"
+      >
+        <img
+          alt="Alt text for the image"
+          class="ecl-navigation-list__image"
+          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+        />
+      </picture>
       <div
         class="ecl-content-block ecl-navigation-list__content-block"
       >
@@ -413,12 +741,15 @@ exports[`Navigation list Default renders correctly with extra attributes 1`] = `
     <article
       class="ecl-navigation-list__item ecl-navigation-list__item--no-border"
     >
-      <div
-        aria-label="Alt text of the image"
-        class="ecl-navigation-list__image"
-        role="img"
-        style="background-image:url('https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg')"
-      />
+      <picture
+        class="ecl-picture ecl-navigation-list__picture"
+      >
+        <img
+          alt="Alt text for the image"
+          class="ecl-navigation-list__image"
+          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+        />
+      </picture>
       <div
         class="ecl-content-block ecl-navigation-list__content-block"
       >
@@ -514,12 +845,15 @@ exports[`Navigation list Default renders correctly with extra attributes 1`] = `
     <article
       class="ecl-navigation-list__item ecl-navigation-list__item--no-border"
     >
-      <div
-        aria-label="Alt text of the image"
-        class="ecl-navigation-list__image"
-        role="img"
-        style="background-image:url('https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg')"
-      />
+      <picture
+        class="ecl-picture ecl-navigation-list__picture"
+      >
+        <img
+          alt="Alt text for the image"
+          class="ecl-navigation-list__image"
+          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+        />
+      </picture>
       <div
         class="ecl-content-block ecl-navigation-list__content-block"
       >
@@ -624,12 +958,15 @@ exports[`Navigation list Default renders correctly with extra class names 1`] =
     <article
       class="ecl-navigation-list__item ecl-navigation-list__item--no-border"
     >
-      <div
-        aria-label="Alt text of the image"
-        class="ecl-navigation-list__image"
-        role="img"
-        style="background-image:url('https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg')"
-      />
+      <picture
+        class="ecl-picture ecl-navigation-list__picture"
+      >
+        <img
+          alt="Alt text for the image"
+          class="ecl-navigation-list__image"
+          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+        />
+      </picture>
       <div
         class="ecl-content-block ecl-navigation-list__content-block"
       >
@@ -720,12 +1057,15 @@ exports[`Navigation list Default renders correctly with extra class names 1`] =
     <article
       class="ecl-navigation-list__item ecl-navigation-list__item--no-border"
     >
-      <div
-        aria-label="Alt text of the image"
-        class="ecl-navigation-list__image"
-        role="img"
-        style="background-image:url('https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg')"
-      />
+      <picture
+        class="ecl-picture ecl-navigation-list__picture"
+      >
+        <img
+          alt="Alt text for the image"
+          class="ecl-navigation-list__image"
+          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+        />
+      </picture>
       <div
         class="ecl-content-block ecl-navigation-list__content-block"
       >
@@ -821,12 +1161,15 @@ exports[`Navigation list Default renders correctly with extra class names 1`] =
     <article
       class="ecl-navigation-list__item ecl-navigation-list__item--no-border"
     >
-      <div
-        aria-label="Alt text of the image"
-        class="ecl-navigation-list__image"
-        role="img"
-        style="background-image:url('https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg')"
-      />
+      <picture
+        class="ecl-picture ecl-navigation-list__picture"
+      >
+        <img
+          alt="Alt text for the image"
+          class="ecl-navigation-list__image"
+          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+        />
+      </picture>
       <div
         class="ecl-content-block ecl-navigation-list__content-block"
       >
diff --git a/src/implementations/twig/components/navigation-list/navigation-list-item.html.twig b/src/implementations/twig/components/navigation-list/navigation-list-item.html.twig
index f2ffe1e4a6f..50abe0ba97c 100644
--- a/src/implementations/twig/components/navigation-list/navigation-list-item.html.twig
+++ b/src/implementations/twig/components/navigation-list/navigation-list-item.html.twig
@@ -3,9 +3,7 @@
 {#
   Parameters:
     - "border" (boolean) (default: false): Is there an extra border and padding?
-    - "image" (associative array) (default: {}): 
-      - "src" (string) (default: ''): Path to the image
-      - "alt" (string) (default: '')
+    - "picture" (object) (default: {}): picture of the navigation list, following ECL Picture structure
     - "title" (associative array) (default: {}): Predefined structure compatible with Link component
     - "description" (string) (default: ''): Description of the navigation list
     - "links" (array) (default: []): Array or multi array of ECL Links
@@ -16,15 +14,20 @@
           "value" (optional) (string)
         ...
       ],
+
+Deprecated
+
+  - "image" (optional) (object) (default: {}) image
+    - "src" (string) Image src
+    - "alt" (string) Image alt
 #}
 
 {# Internal properties #}
 
 {% set _border = border|default(false) %}
-{% set _image = image|default({
-  src: ''
-}) %}
+{% set _image = image|default({}) %}
 {% set _title = title|default({}) %}
+{% set _picture = picture|default({}) %}
 {% set _description = description|default('') %}
 {% set _links = links|default([]) %}
 {% set _css_class = 'ecl-navigation-list__item' %}
@@ -38,6 +41,17 @@
   links: _links,
 } %}
 
+{# Backward compatibility #}
+
+{% if _picture.img is empty and _image.src is not empty %}
+  {% set _picture = {
+    'img': {
+      'src': _image.src|default(''),
+      'alt': _image.alt|default('')
+    }
+  } %}
+{% endif %}
+
 {% if not _border %}
   {% set _css_class = _css_class ~ ' ecl-navigation-list__item--no-border' %}
 {% endif %}
@@ -58,9 +72,12 @@
 
 {# Print the result #}
 <article class="{{ _css_class }}"{{ _extra_attributes|raw }}>
-  {% if _image.src is defined and _image.src is not empty %}
-    {% set _img_aria_label = _image.alt is defined and _image.alt is not empty ? 'aria-label="' ~ _image.alt|e('html_attr') ~ '"' : '' %}
-    <div class="ecl-navigation-list__image" {{ _img_aria_label|raw }} role="img" style="background-image:url('{{ _image.src }}')"></div>
+  {% if _picture.img is not empty %}
+    {% include '@ecl/picture/picture.html.twig' with {
+      picture: _picture,
+      extra_classes: "ecl-navigation-list__picture",
+      extra_image_classes: 'ecl-navigation-list__image',
+    } only %}
   {% endif %}
   {% include '@ecl/content-block/content-block.html.twig' with _content_block|merge({
     extra_classes: 'ecl-navigation-list__content-block'
diff --git a/src/implementations/twig/components/navigation-list/navigation-list.story.js b/src/implementations/twig/components/navigation-list/navigation-list.story.js
index 0b52ef9c2df..494ad993cac 100644
--- a/src/implementations/twig/components/navigation-list/navigation-list.story.js
+++ b/src/implementations/twig/components/navigation-list/navigation-list.story.js
@@ -87,7 +87,7 @@ const prepareData = (data, args) => {
   for (let i = 0; i < clone.items.length; i += 1) {
     clone.items[i].border = args.show_border;
     if (!args.show_image) {
-      delete clone.items[i].image;
+      delete clone.items[i].picture;
     }
     if (!args.show_description) {
       delete clone.items[i].description;
diff --git a/src/implementations/twig/components/navigation-list/navigation-list.test.js b/src/implementations/twig/components/navigation-list/navigation-list.test.js
index 7e2d7426dcf..b4908d51030 100644
--- a/src/implementations/twig/components/navigation-list/navigation-list.test.js
+++ b/src/implementations/twig/components/navigation-list/navigation-list.test.js
@@ -42,6 +42,19 @@ describe('Navigation list', () => {
       return expect(render(withExtraAttributes)).resolves.toMatchSnapshot();
     });
 
+    test('renders correctly with deprecated data', () => {
+      expect.assertions(1);
+
+      const oldData = { ...dataDefault };
+      oldData.items[0].picture = {};
+      oldData.items[0].image = {
+        src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
+        alt: 'Alternative text',
+      };
+
+      return expect(render(oldData)).resolves.toMatchSnapshot();
+    });
+
     test(`passes the accessibility tests`, async () => {
       expect(
         await axe(renderTwigFileAsHtml(template, dataDefault, true))
diff --git a/src/implementations/vanilla/components/navigation-list/_navigation-list.scss b/src/implementations/vanilla/components/navigation-list/_navigation-list.scss
index 74e164f578d..c0de7340076 100644
--- a/src/implementations/vanilla/components/navigation-list/_navigation-list.scss
+++ b/src/implementations/vanilla/components/navigation-list/_navigation-list.scss
@@ -53,18 +53,9 @@ $_border: null !default;
 }
 
 .ecl-navigation-list__image {
-  background-position: center;
-  background-size: cover;
-  display: block;
-  height: auto;
-
-  // manage ratio 4:1
-  &::before {
-    content: '';
-    display: block;
-    padding-top: math.div(1, 4) * 100%;
-    width: 100%;
-  }
+  aspect-ratio: 4 / 1;
+  object-fit: cover;
+  width: 100%;
 }
 
 .ecl-navigation-list__content-block {
diff --git a/src/specs/components/navigation-list/demo/data.js b/src/specs/components/navigation-list/demo/data.js
index 1a5ca439c08..c9816843ba1 100644
--- a/src/specs/components/navigation-list/demo/data.js
+++ b/src/specs/components/navigation-list/demo/data.js
@@ -5,9 +5,11 @@ const exampleLink = `${publicUrl}/example`;
 module.exports = {
   items: [
     {
-      image: {
-        src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
-        alt: 'Alt text of the image',
+      picture: {
+        img: {
+          src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
+          alt: 'Alt text for the image',
+        },
       },
       title: {
         link: {
@@ -57,9 +59,11 @@ module.exports = {
       ],
     },
     {
-      image: {
-        src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
-        alt: 'Alt text of the image',
+      picture: {
+        img: {
+          src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
+          alt: 'Alt text for the image',
+        },
       },
       title: {
         link: {
@@ -114,9 +118,11 @@ module.exports = {
       ],
     },
     {
-      image: {
-        src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
-        alt: 'Alt text of the image',
+      picture: {
+        img: {
+          src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
+          alt: 'Alt text for the image',
+        },
       },
       title: {
         link: {