TH-78: All themes > Performance > Optimize default images

themes/aura/assets/main.css

@@ -23,6 +23,7 @@ body {
 
 .main-content {
   display: inline-block;
+  min-height: 60vh;
   width: 100%;
 }
 
@@ -627,6 +628,10 @@ textarea {
   gap: 12px;
   margin: 40px auto;
 }
+.breadcrumbs-container .breadcrumbs-listings .listings__item {
+  display: inline-flex;
+  align-items: center;
+}
 .breadcrumbs-container .breadcrumbs-listings .first-listing {
   color: #A8A8A8;
   font-weight: 400;
@@ -642,7 +647,7 @@ textarea {
 .breadcrumbs-container .breadcrumbs-listings .third-listing {
   font-weight: 800;
 }
-[dir=ltr] .breadcrumbs-container .breadcrumbs-listings .listings__item img {
+[dir=ltr] .breadcrumbs-container .breadcrumbs-listings .arrow {
   rotate: 180deg;
 }
 .breadcrumbs-container .breadcrumbs-name {

themes/aura/sections/main-navbar.liquid

@@ -54,6 +54,8 @@
                 <img
                   src='{%- if section.settings.navbar_logo.src -%} {{ section.settings.navbar_logo.src }} {%- else -%} {{ 'default-logo.png' | asset_url }} {%- endif -%}'
                   alt='{{ store.name }}'
+                  width="89"
+                  height="34"
                 >
               </a>
             </div>
@@ -138,6 +140,7 @@
         <img
           src='{%- if section.settings.navbar_logo.src -%} {{ section.settings.navbar_logo.src }} {%- else -%} {{ 'default-logo.png' | asset_url }} {%- endif -%}'
           alt='{{ store.name }}'
+          width="89" height="34"
         >
       </a>
     </div>

themes/aura/sections/main-page.liquid

@@ -6,8 +6,8 @@
       <div class="listings__item">
         <a href="/" class="first-listing">{{ 'snippets.collection-listing.home' | t }}</a>
       </div>
-      <div class="listings__item">
-        <img src='{{ 'left-arrow.png' | asset_url }}' alt='Left arrow' >
+      <div class="listings__item arrow">
+        <ion-icon name="chevron-forward-outline"></ion-icon>
       </div>
       <div class="listings__item">
         <span class="second-listing">{{ page.name }}</span>

themes/aura/snippets/breadcrumbs.liquid

@@ -5,15 +5,15 @@
     </div>
       {%- if template contains 'collection' or template contains 'list-collections' -%}
         <div class="listings__item arrow">
-          <img src='{{ 'left-arrow.png' | asset_url }}' alt="arrow" width="7" height="12" />
+          <ion-icon name="chevron-forward-outline"></ion-icon>
         </div>
         <div class="listings__item">
           <a href="/collections" class="second-listing">{{ 'snippets.collection-listing.collections' | t }}</a>
         </div>
       {% endif %}
       {% if category %}
         <div class="listings__item arrow">
-          <img src='{{ 'left-arrow.png' | asset_url }}' alt="arrow" width="7" height="12" />
+          <ion-icon name="chevron-forward-outline"></ion-icon>
         </div>
         <div class="listings__item">
           <a href="/collections/{{ category.slug }}" class="third-listing">{{ category.name}}</a>

themes/aura/snippets/product-placeholder.liquid

@@ -11,8 +11,13 @@
 
 <div class='product-block featured-product-placeholder'>
   <div class='product-thumbnail'>
-    {% assign svg_name = random_titles[index] %}
-    {% render 'product-placeholder-svg', svg_name: svg_name %}
+    {% assign incremented_index = index | plus: 1 %}
+    {% assign product_image = "product-placeholder-" | append: incremented_index | append: '.png' %}
+    <img 
+      src="{{ product_image | asset_url  }}" 
+      loading="lazy" width="194" style="height: auto;" 
+      alt="{{ random_titles[index] }}" 
+    />
   </div>
   <div class='product-details'>
     <span class='product-title'>{{ random_titles[index] }}</span>

themes/aura/styles/main.scss

@@ -676,6 +676,10 @@ textarea {
     align-items: center;
     gap: 12px;
     margin: 40px auto;
+    .listings__item {
+      display: inline-flex;
+      align-items: center;
+    }
 
     .first-listing {
       color: #A8A8A8;
@@ -695,8 +699,8 @@ textarea {
       font-weight: 800;
     }
 
-    .listings__item img {
-      [dir='ltr'] & {
+    .arrow {
+      [dir='ltr'] & { 
         rotate: 180deg;
       }
     }

themes/harmony/assets/main.css

@@ -23,6 +23,7 @@ body {
 
 .main-content {
   display: inline-block;
+  min-height: 60vh;
   width: 100%;
 }
 
@@ -649,6 +650,8 @@ textarea {
 }
 .breadcrumbs-container .breadcrumbs-listings .listings__item {
   color: #9B9B9B;
+  display: inline-flex;
+  align-items: center;
 }
 .breadcrumbs-container .breadcrumbs-listings .listings__item .first-listing {
   color: #9B9B9B;

themes/harmony/sections/main-footer.liquid

@@ -29,11 +29,13 @@
           <img 
             src="{{ section.settings.footer_logo.src }}"
             alt="{{ store.name }}"
+            width="169" height="46"
           >
         {% else %}
           <img 
             src="{{ 'default-white-logo.png' | asset_url }}" 
             alt="{{ store.name }}"
+            width="169" height="46"
           >
         {% endif %}
       </div>

themes/harmony/sections/main-navbar.liquid

@@ -53,7 +53,8 @@
               <a href='/' aria-label='home'>
                 <img
                   src='{%- if section.settings.navbar_logo.src -%} {{ section.settings.navbar_logo.src }} {%- else -%} {{ 'default-black-logo.png' | asset_url }} {%- endif -%}'
-                  alt='{{ store.name }}'  
+                  alt='{{ store.name }}'
+                  width="133" height="32"  
                 >
               </a>
             </div>
@@ -150,6 +151,7 @@
         <img
           src='{%- if section.settings.navbar_logo.src -%} {{ section.settings.navbar_logo.src }} {%- else -%} {{ 'default-black-logo.png' | asset_url }} {%- endif -%}'
           alt='{{ store.name }}'
+          width="133" height="32"
         >
       </a>
     </div>

themes/harmony/snippets/breadcrumbs.liquid

@@ -5,31 +5,31 @@
     </div>
       {%- if template contains 'collection' or template contains 'list-collections' -%}
         <div class="listings__item arrow">
-          <img src='{{ 'left-arrow.png' | asset_url }}' alt="arrow" width="7" height="12" />
+          <ion-icon name="chevron-forward-outline"></ion-icon>
         </div>
         <div class="listings__item">
           <a href="/collections" class="second-listing">{{ 'snippets.collection-listing.collections' | t }}</a>
         </div>
       {% endif %}
       {% if category %}
         <div class="listings__item arrow">
-          <img src='{{ 'left-arrow.png' | asset_url }}' alt="arrow" width="7" height="12" />
+          <ion-icon name="chevron-forward-outline"></ion-icon>
         </div>
         <div class="listings__item">
           <a href="/collections/{{ category.slug }}" class="third-listing">{{ category.name}}</a>
         </div>
       {%- endif -%}
       {%- if template contains 'cart' -%}
         <div class="listings__item arrow">
-          <img src='{{ 'left-arrow.png' | asset_url }}' alt="arrow" width="7" height="12" />
+          <ion-icon name="chevron-forward-outline"></ion-icon>
         </div>
         <div class="listings__item">
           <a href="/cart" class="second-listing">{{ 'cart.title' | t }}</a>
         </div>
       {% endif %}
       {% if template contains 'page' %}
         <div class="listings__item arrow">
-          <img src='{{ 'left-arrow.png' | asset_url }}' alt="arrow" width="7" height="12" />
+          <ion-icon name="chevron-forward-outline"></ion-icon>
         </div>
         <div class="listings__item">
           <span class="second-listing">{{ page.name }}</span>

themes/harmony/snippets/product-placeholder.liquid

@@ -11,8 +11,13 @@
 
 <div class='product-block featured-product-placeholder'>
   <div class='product-thumbnail'>
-    {% assign svg_name = random_titles[index] %}
-    {% render 'product-placeholder-svg', svg_name: svg_name %}
+    {% assign incremented_index = index | plus: 1 %}
+    {% assign product_image = "product-placeholder-" | append: incremented_index | append: '.png' %}
+    <img 
+      src="{{ product_image | asset_url  }}" 
+      loading="lazy" width="194" style="height: auto;" 
+      alt="{{ random_titles[index] }}" 
+    />
   </div>
   <div class='product-details'>
     <span class='product-title'>{{ random_titles[index] }}</span>

themes/harmony/styles/main.scss

@@ -701,6 +701,8 @@ textarea {
 
     .listings__item  {
       color: #9B9B9B;
+      display: inline-flex;
+      align-items: center;
 
       .first-listing {
         color: #9B9B9B;

themes/meraki/assets/main.css

@@ -22,6 +22,7 @@ body {
 
 .main-content {
   display: inline-block;
+  min-height: 60vh;
   width: 100%;
 }
 
@@ -659,6 +660,10 @@ textarea {
   gap: 12px;
   margin: 36px auto;
 }
+.breadcrumbs-container .breadcrumbs-listings .listings__item {
+  display: inline-flex;
+  align-items: center;
+}
 .breadcrumbs-container .breadcrumbs-listings .first-listing {
   color: #9C9C9C;
   font-weight: 500;
@@ -677,6 +682,9 @@ textarea {
 .breadcrumbs-container .breadcrumbs-listings .arrow-item {
   color: #9C9C9C;
 }
+[dir=ltr] .breadcrumbs-container .breadcrumbs-listings .arrow {
+  rotate: 180deg;
+}
 .breadcrumbs-container .breadcrumbs-name {
   font-weight: 700;
   font-size: 26px;

themes/meraki/sections/main-footer.liquid

@@ -24,11 +24,17 @@
   <div class="columns container">
     {%- if section.settings.footer_logo.src -%}
       <div class='footer-logo column'>
-        <img loading='lazy' src='{{ section.settings.footer_logo.src }}' alt='logo'>
+        <img 
+          loading='lazy' src='{{ section.settings.footer_logo.src }}' alt='logo'
+          width="80" height="23"
+        >
       </div>
     {% else %}
       <div class='footer-logo column'>
-        <img loading='lazy' src='{{ 'default-black-logo.png' | asset_url }}' alt='logo'>
+        <img 
+          loading='lazy' src='{{ 'default-black-logo.png' | asset_url }}' alt='logo'
+          width="80" height="23"  
+        >
       </div>
     {%- endif -%}
     <div class='social-media-links column'>

themes/meraki/sections/main-navbar.liquid

@@ -50,7 +50,9 @@
                 <a href='/' aria-label='home'>
                   <img
                     src='{%- if section.settings.navbar_logo.src -%} {{ section.settings.navbar_logo.src }} {%- else -%} {{ 'default-white-logo.png' | asset_url }} {%- endif -%}'
-                    alt='{{ store.name }}'  
+                    alt='{{ store.name }}'
+                    width="80"
+                    height="23" 
                   >
                 </a>
               </div>

themes/meraki/sections/main-page.liquid

@@ -7,7 +7,7 @@
         <a href="/" class="first-listing">{{ 'snippets.collection-listing.home' | t }}</a>
       </div>
       <div class="listings__item">
-        <img src='{{ 'left-arrow.png' | asset_url }}' alt='Left arrow'>
+        <ion-icon name="chevron-forward-outline"></ion-icon>
       </div>
       <div class="listings__item">
         <span class="second-listing">{{ page.name }}</span>

themes/meraki/snippets/product-placeholder.liquid

@@ -10,8 +10,13 @@
 
 <div class='product-block featured-product-placeholder'>
   <div class='product-thumbnail'>
-    {% assign svg_name = random_titles[index] %}
-    {% render 'product-placeholder-svg', svg_name: svg_name %}
+    {% assign incremented_index = index | plus: 1 %}
+    {% assign product_image = "product-placeholder-" | append: incremented_index | append: '.png' %}
+    <img 
+      src="{{ product_image | asset_url  }}" 
+      loading="lazy" width="194" style="height: auto;" 
+      alt="{{ random_titles[index] }}" 
+    />
   </div>
   <div class='product-details'>
     <span class='product-title'>{{ random_titles[index] }}</span>

themes/meraki/styles/main.scss

@@ -712,6 +712,10 @@ textarea {
     align-items: center;
     gap: 12px;
     margin: 36px auto;
+    .listings__item {
+      display: inline-flex;
+      align-items: center;
+    }
 
     .first-listing {
       color: #9C9C9C;
@@ -734,6 +738,12 @@ textarea {
     .arrow-item {
       color: #9C9C9C;
     }
+
+    .arrow {
+      [dir='ltr'] & { 
+        rotate: 180deg;	        
+      }
+    }
   }
 
   .breadcrumbs-name {