diff --git a/assets/section-main-product.css b/assets/section-main-product.css
index aa4bc1837ef..7687ca7bd62 100644
--- a/assets/section-main-product.css
+++ b/assets/section-main-product.css
@@ -1210,18 +1210,10 @@ a.product__text {
 }
 
 .thumbnail img {
-  pointer-events: none;
-}
-
-.thumbnail--narrow img {
-  height: 100%;
-  width: auto;
-  max-width: 100%;
-}
-
-.thumbnail--wide img {
-  height: auto;
+  object-fit: cover;
   width: 100%;
+  height: 100%;
+  pointer-events: none;
 }
 
 .thumbnail__badge .icon {
diff --git a/snippets/product-media-gallery.liquid b/snippets/product-media-gallery.liquid
index 99478667137..cba97b47d28 100644
--- a/snippets/product-media-gallery.liquid
+++ b/snippets/product-media-gallery.liquid
@@ -180,6 +180,13 @@
         id="Slider-Thumbnails-{{ section.id }}{{ id_append }}"
         class="thumbnail-list list-unstyled slider slider--mobile{% if section.settings.gallery_layout == 'thumbnail_slider' %} slider--tablet-up{% endif %}"
       >
+        {%- capture sizes -%}
+          (min-width: {{ settings.page_width }}px) calc(({{ settings.page_width | minus: 100 | times: media_width | round }} - 4rem) / 4),
+          (min-width: 990px) calc(({{ media_width | times: 100 }}vw - 4rem) / 4),
+          (min-width: 750px) calc((100vw - 15rem) / 8),
+          calc((100vw - 8rem) / 3)
+        {%- endcapture -%}
+
         {%- if featured_media != null -%}
           {%- liquid
             capture media_index
@@ -199,32 +206,23 @@
             data-target="{{ section.id }}-{{ featured_media.id }}"
             data-media-position="{{ media_index }}"
           >
+            {%- capture thumbnail_id -%}
+              Thumbnail-{{ section.id }}-0{{ id_append }}
+            {%- endcapture -%}
             <button
-              class="thumbnail global-media-settings global-media-settings--no-shadow {% if featured_media.preview_image.aspect_ratio > 1 %}thumbnail--wide{% else %}thumbnail--narrow{% endif %}"
+              class="thumbnail global-media-settings global-media-settings--no-shadow"
               aria-label="{%- if featured_media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif featured_media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
               aria-current="true"
               aria-controls="GalleryViewer-{{ section.id }}{{ id_append }}"
-              aria-describedby="Thumbnail-{{ section.id }}-0{{ id_append }}"
+              aria-describedby="{{ thumbnail_id }}"
             >
-              <img
-                id="Thumbnail-{{ section.id }}-0{{ id_append }}"
-                srcset="
-                  {% if featured_media.preview_image.width >= 54 %}{{ featured_media.preview_image | image_url: width: 54 }} 54w,{% endif %}
-                  {% if featured_media.preview_image.width >= 74 %}{{ featured_media.preview_image | image_url: width: 74 }} 74w,{% endif %}
-                  {% if featured_media.preview_image.width >= 104 %}{{ featured_media.preview_image | image_url: width: 104 }} 104w,{% endif %}
-                  {% if featured_media.preview_image.width >= 162 %}{{ featured_media.preview_image | image_url: width: 162 }} 162w,{% endif %}
-                  {% if featured_media.preview_image.width >= 208 %}{{ featured_media.preview_image | image_url: width: 208 }} 208w,{% endif %}
-                  {% if featured_media.preview_image.width >= 324 %}{{ featured_media.preview_image | image_url: width: 324 }} 324w,{% endif %}
-                  {% if featured_media.preview_image.width >= 416 %}{{ featured_media.preview_image | image_url: width: 416 }} 416w,{% endif %},
-                  {{ featured_media.preview_image | image_url }} {{ media.preview_image.width }}w
-                "
-                src="{{ featured_media | image_url: width: 416 }}"
-                sizes="(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width | minus: 100 | times: media_width | round }} - 4rem) / 4), (min-width: 990px) calc(({{ media_width | times: 100 }}vw - 4rem) / 4), (min-width: 750px) calc((100vw - 15rem) / 8), calc((100vw - 14rem) / 3)"
-                alt="{{ featured_media.alt | escape }}"
-                height="208"
-                width="208"
-                loading="lazy"
-              >
+              {{ featured_media.preview_image | image_url: width: 416 | image_tag:
+                loading: 'lazy',
+                sizes: sizes,
+                widths: '54, 74, 104, 162, 208, 324, 416',
+                id: thumbnail_id,
+                alt: featured_media.alt | escape
+              }}
             </button>
           </li>
         {%- endif -%}
@@ -257,8 +255,11 @@
                   {%- render 'icon-play' -%}
                 </span>
               {%- endif -%}
+              {%- capture thumbnail_id -%}
+                Thumbnail-{{ section.id }}-{{ forloop.index }}{{ id_append }}
+              {%- endcapture -%}
               <button
-                class="thumbnail global-media-settings global-media-settings--no-shadow {% if media.preview_image.aspect_ratio > 1 %}thumbnail--wide{% else %}thumbnail--narrow{% endif %}"
+                class="thumbnail global-media-settings global-media-settings--no-shadow"
                 aria-label="{%- if media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
                 {% if media == product.selected_or_first_available_variant.featured_media
                   or product.selected_or_first_available_variant.featured_media == null
@@ -267,25 +268,15 @@
                   aria-current="true"
                 {% endif %}
                 aria-controls="GalleryViewer-{{ section.id }}{{ id_append }}"
-                aria-describedby="Thumbnail-{{ section.id }}-{{ forloop.index }}{{ id_append }}"
+                aria-describedby="{{ thumbnail_id }}"
               >
-                <img
-                  id="Thumbnail-{{ section.id }}-{{ forloop.index }}{{ id_append }}"
-                  srcset="
-                    {% if media.preview_image.width >= 59 %}{{ media.preview_image | image_url: width: 59 }} 59w,{% endif %}
-                    {% if media.preview_image.width >= 118 %}{{ media.preview_image | image_url: width: 118 }} 118w,{% endif %}
-                    {% if media.preview_image.width >= 84 %}{{ media.preview_image | image_url: width: 84 }} 84w,{% endif %}
-                    {% if media.preview_image.width >= 168 %}{{ media.preview_image | image_url: width: 168 }} 168w,{% endif %}
-                    {% if media.preview_image.width >= 130 %}{{ media.preview_image | image_url: width: 130 }} 130w,{% endif %}
-                    {% if media.preview_image.width >= 260 %}{{ media.preview_image | image_url: width: 260 }} 260w{% endif %}
-                  "
-                  src="{{ media | image_url: width: 84, height: 84 }}"
-                  sizes="(min-width: 1200px) calc((1200px - 19.5rem) / 12), (min-width: 750px) calc((100vw - 16.5rem) / 8), calc((100vw - 8rem) / 5)"
-                  alt="{{ media.alt | escape }}"
-                  height="200"
-                  width="200"
-                  loading="lazy"
-                >
+                {{ media.preview_image | image_url: width: 416 | image_tag:
+                  loading: 'lazy',
+                  sizes: sizes,
+                  widths: '54, 74, 104, 162, 208, 324, 416',
+                  id: thumbnail_id,
+                  alt: media.alt | escape
+                }}
               </button>
             </li>
           {%- endunless -%}