[WIP] Image compression 2

src/components/src/B2bHomePage/b2b.home.page.tsx

@@ -20,17 +20,25 @@
  */
 import React from 'react';
 import intl from 'react-intl-universal';
-import ImageContainer from '../ImageContainer/image.container';
 
 import './b2b.home.page.scss';
-import heroBanner from '../../../images/site-images/hero-banner-0.jpg';
 
-const heroBannerFileName = 'hero-banner-0.jpg';
+import hero_banner_0_650x217 from '../../../images/site-images/optimized/hero-banner-0@650x217.jpg';
+import hero_banner_0_1300x434 from '../../../images/site-images/optimized/hero-banner-0@1300x434.jpg';
+
 
 const B2BHomePage: React.FunctionComponent = () => (
   <div className="home-page-b2b">
     <section className="main-banner">
-      <ImageContainer className="main-banner-image" fileName={heroBannerFileName} imgUrl={heroBanner} />
+      <img
+        className="main-banner-image"
+        src={hero_banner_0_1300x434}
+        srcSet={`
+          ${hero_banner_0_650x217} 650w,
+          ${hero_banner_0_1300x434} 1300w
+        `}
+        alt=""
+      />
       <div className="main-banner-title-wrap">
         <div className="container">
           <h2 className="goods-heading">{intl.get('main-banner-heading')}</h2>

src/components/src/B2cHomePage/b2c.home.page.scss

@@ -33,6 +33,7 @@
       height: 100%;
       max-width: 100%;
       object-fit: cover;
+      object-position: top;
     }
 
     &-title-wrap {

src/components/src/B2cHomePage/b2c.home.page.tsx

@@ -22,33 +22,53 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import IndiRecommendationsDisplayMain from '../IndiRecommendations/indirecommendations.main';
-import ImageContainer from '../ImageContainer/image.container';
 import Config from '../../../ep.config.json';
 
 import './b2c.home.page.scss';
 
-import bannerImage1 from '../../../images/site-images/b2c-banner-1.png';
-import bannerImage2 from '../../../images/site-images/b2c-banner-2.png';
-import bannerImage3 from '../../../images/site-images/b2c-banner-3.png';
-import productImage1 from '../../../images/site-images/b2c-product-1.png';
-import productImage2 from '../../../images/site-images/b2c-product-2.png';
-import productImage3 from '../../../images/site-images/b2c-product-3.png';
-import productImage4 from '../../../images/site-images/b2c-product-4.png';
-import productImage5 from '../../../images/site-images/b2c-product-5.png';
-import productImage6 from '../../../images/site-images/b2c-product-6.png';
-import productImage7 from '../../../images/site-images/b2c-product-7.png';
-
-
-const bannerFileName1 = 'b2c-banner-1.png';
-const bannerFileName2 = 'b2c-banner-2.png';
-const bannerFileName3 = 'b2c-banner-3.png';
-const productFileName1 = 'b2c-product-1.png';
-const productFileName2 = 'b2c-product-2.png';
-const productFileName3 = 'b2c-product-3.png';
-const productFileName4 = 'b2c-product-4.png';
-const productFileName5 = 'b2c-product-5.png';
-const productFileName6 = 'b2c-product-6.png';
-const productFileName7 = 'b2c-product-7.png';
+
+import b2c_banner_1_700x239 from '../../../images/site-images/optimized/b2c-banner-1@700x239.jpg';
+import b2c_banner_1_1400x478 from '../../../images/site-images/optimized/b2c-banner-1@1400x478.jpg';
+import b2c_banner_1_2100x717 from '../../../images/site-images/optimized/b2c-banner-1@2100x717.jpg';
+import b2c_banner_1_2800x956 from '../../../images/site-images/optimized/b2c-banner-1@2800x956.jpg';
+
+import b2c_banner_2_700x280 from '../../../images/site-images/optimized/b2c-banner-2@700x280.jpg';
+import b2c_banner_2_1400x560 from '../../../images/site-images/optimized/b2c-banner-2@1400x560.jpg';
+import b2c_banner_2_2100x840 from '../../../images/site-images/optimized/b2c-banner-2@2100x840.jpg';
+import b2c_banner_2_2800x1120 from '../../../images/site-images/optimized/b2c-banner-2@2800x1120.jpg';
+
+import b2c_banner_3_700x280 from '../../../images/site-images/optimized/b2c-banner-3@700x280.jpg';
+import b2c_banner_3_1400x559 from '../../../images/site-images/optimized/b2c-banner-3@1400x559.jpg';
+import b2c_banner_3_2100x839 from '../../../images/site-images/optimized/b2c-banner-3@2100x839.jpg';
+import b2c_banner_3_2800x1118 from '../../../images/site-images/optimized/b2c-banner-3@2800x1118.jpg';
+
+import b2c_product_1_568x834 from '../../../images/site-images/optimized/b2c-product-1@568x834.jpg';
+import b2c_product_1_852x1251 from '../../../images/site-images/optimized/b2c-product-1@852x1251.jpg';
+import b2c_product_1_1136x1668 from '../../../images/site-images/optimized/b2c-product-1@1136x1668.jpg';
+
+import b2c_product_2_395x397 from '../../../images/site-images/optimized/b2c-product-2@395x397.jpg';
+import b2c_product_2_593x596 from '../../../images/site-images/optimized/b2c-product-2@593x596.jpg';
+import b2c_product_2_790x794 from '../../../images/site-images/optimized/b2c-product-2@790x794.jpg';
+
+import b2c_product_3_283x399 from '../../../images/site-images/optimized/b2c-product-3@283x399.jpg';
+import b2c_product_3_425x599 from '../../../images/site-images/optimized/b2c-product-3@425x599.jpg';
+import b2c_product_3_566x798 from '../../../images/site-images/optimized/b2c-product-3@566x798.jpg';
+
+import b2c_product_4_284x401 from '../../../images/site-images/optimized/b2c-product-4@284x401.jpg';
+import b2c_product_4_426x602 from '../../../images/site-images/optimized/b2c-product-4@426x602.jpg';
+import b2c_product_4_568x802 from '../../../images/site-images/optimized/b2c-product-4@568x802.jpg';
+
+import b2c_product_5_565x397 from '../../../images/site-images/optimized/b2c-product-5@565x397.jpg';
+import b2c_product_5_848x595 from '../../../images/site-images/optimized/b2c-product-5@848x595.jpg';
+import b2c_product_5_1130x793 from '../../../images/site-images/optimized/b2c-product-5@1130x793.jpg';
+
+import b2c_product_6_284x400 from '../../../images/site-images/optimized/b2c-product-6@284x400.jpg';
+import b2c_product_6_426x600 from '../../../images/site-images/optimized/b2c-product-6@426x600.jpg';
+import b2c_product_6_568x800 from '../../../images/site-images/optimized/b2c-product-6@568x800.jpg';
+
+import b2c_product_7_284x401 from '../../../images/site-images/optimized/b2c-product-7@284x401.jpg';
+import b2c_product_7_426x602 from '../../../images/site-images/optimized/b2c-product-7@426x602.jpg';
+import b2c_product_7_568x802 from '../../../images/site-images/optimized/b2c-product-7@568x802.jpg';
 
 const B2CHomePage: React.FunctionComponent = () => {
   // Set the language-specific configuration for indi integration
@@ -59,7 +79,17 @@ const B2CHomePage: React.FunctionComponent = () => {
   return (
     <div className="home-page-b2c">
       <section className="main-banner">
-        <ImageContainer className="main-banner-image" fileName={bannerFileName1} imgUrl={bannerImage1} />
+        <img
+          className="main-banner-image"
+          src={b2c_banner_1_2800x956}
+          srcSet={`
+            ${b2c_banner_1_700x239} 700w,
+            ${b2c_banner_1_1400x478} 1400w,
+            ${b2c_banner_1_2100x717} 2100w,
+            ${b2c_banner_1_2800x956} 2800w
+          `}
+          alt=""
+        />
         <div className="main-banner-title-wrap">
           <div className="container">
             <h2 className="goods-heading">{intl.get('b2c-main-banner-heading')}</h2>
@@ -90,7 +120,16 @@ const B2CHomePage: React.FunctionComponent = () => {
                       <button type="button" className="ep-btn primary learn-more-btn">{intl.get('learn-more')}</button>
                     </div>
                   </div>
-                  <ImageContainer className="main-goods-image" fileName={productFileName1} imgUrl={productImage1} />
+                  <img
+                    className="main-goods-image"
+                    src={b2c_product_1_1136x1668}
+                    srcSet={`
+                      ${b2c_product_1_568x834} 568w,
+                      ${b2c_product_1_852x1251} 852w,
+                      ${b2c_product_1_1136x1668} 1136w
+                    `}
+                    alt=""
+                  />
                 </div>
               </li>
               <li className="main-goods__cell">
@@ -101,7 +140,16 @@ const B2CHomePage: React.FunctionComponent = () => {
                     <p className="goods-description">{intl.get('b2c-product2-description')}</p>
                     <button type="button" className="ep-btn primary learn-more-btn">{intl.get('add-to-cart-2')}</button>
                   </div>
-                  <ImageContainer className="main-goods-image" fileName={productFileName2} imgUrl={productImage2} />
+                  <img
+                    className="main-goods-image"
+                    src={b2c_product_2_790x794}
+                    srcSet={`
+                      ${b2c_product_2_395x397} 395w,
+                      ${b2c_product_2_593x596} 593w,
+                      ${b2c_product_2_790x794} 790w
+                    `}
+                    alt=""
+                  />
                 </div>
               </li>
               <li className="main-goods__cell">
@@ -114,7 +162,16 @@ const B2CHomePage: React.FunctionComponent = () => {
                     </p>
                     <button type="button" className="ep-btn primary learn-more-btn">{intl.get('b2c-product3-label')}</button>
                   </div>
-                  <ImageContainer className="main-goods-image" fileName={productFileName3} imgUrl={productImage3} />
+                  <img
+                    className="main-goods-image"
+                    src={b2c_product_3_566x798}
+                    srcSet={`
+                      ${b2c_product_3_283x399} 283w,
+                      ${b2c_product_3_425x599} 425w,
+                      ${b2c_product_3_566x798} 566w
+                    `}
+                    alt=""
+                  />
                 </div>
               </li>
               <li className="main-goods__cell">
@@ -126,7 +183,16 @@ const B2CHomePage: React.FunctionComponent = () => {
                       {intl.get('b2c-product4-description')}
                     </p>
                   </div>
-                  <ImageContainer className="main-goods-image" fileName={productFileName4} imgUrl={productImage4} />
+                  <img
+                    className="main-goods-image"
+                    src={b2c_product_4_568x802}
+                    srcSet={`
+                      ${b2c_product_4_284x401} 284w,
+                      ${b2c_product_4_426x602} 426w,
+                      ${b2c_product_4_568x802} 568w
+                    `}
+                    alt=""
+                  />
                 </div>
               </li>
               <li className="main-goods__cell">
@@ -137,7 +203,16 @@ const B2CHomePage: React.FunctionComponent = () => {
                       {intl.get('b2c-product5-heading')}
                     </h3>
                   </div>
-                  <ImageContainer className="main-goods-image" fileName={productFileName5} imgUrl={productImage5} />
+                  <img
+                    className="main-goods-image"
+                    src={b2c_product_5_1130x793}
+                    srcSet={`
+                      ${b2c_product_5_565x397} 565w,
+                      ${b2c_product_5_848x595} 848w,
+                      ${b2c_product_5_1130x793} 1130w
+                    `}
+                    alt=""
+                  />
                 </div>
               </li>
             </ul>
@@ -146,7 +221,17 @@ const B2CHomePage: React.FunctionComponent = () => {
       </section>
 
       <section className="main-banner banner-section-2">
-        <ImageContainer className="main-banner-image" fileName={bannerFileName2} imgUrl={bannerImage2} />
+        <img
+          className="main-banner-image"
+          src={b2c_banner_2_2800x1120}
+          srcSet={`
+            ${b2c_banner_2_700x280} 700w,
+            ${b2c_banner_2_1400x560} 1400w,
+            ${b2c_banner_2_2100x840} 2100w,
+            ${b2c_banner_2_2800x1120} 800w
+          `}
+          alt=""
+        />
         <div className="main-banner-title-wrap">
           <div className="container">
             <h2 className="goods-heading">{intl.get('b2c-main-banner-heading2')}</h2>
@@ -174,7 +259,16 @@ const B2CHomePage: React.FunctionComponent = () => {
                     <h3 className="goods-title">{intl.get('b2c-product6-heading')}</h3>
                     <p className="goods-description">{intl.get('b2c-product6-description')}</p>
                   </div>
-                  <ImageContainer className="main-goods-image" fileName={productFileName6} imgUrl={productImage6} />
+                  <img
+                    className="main-goods-image"
+                    src={b2c_product_6_568x800}
+                    srcSet={`
+                      ${b2c_product_6_284x400} 284w,
+                      ${b2c_product_6_426x600} 426w,
+                      ${b2c_product_6_568x800} 568w
+                    `}
+                    alt=""
+                  />
                 </div>
               </li>
               <li className="main-goods__cell">
@@ -184,7 +278,16 @@ const B2CHomePage: React.FunctionComponent = () => {
                     <h3 className="goods-title">{intl.get('b2c-product7-heading')}</h3>
                     <p className="goods-description">{intl.get('b2c-product7-description')}</p>
                   </div>
-                  <ImageContainer className="main-goods-image" fileName={productFileName7} imgUrl={productImage7} />
+                  <img
+                    className="main-goods-image"
+                    src={b2c_product_7_568x802}
+                    srcSet={`
+                      ${b2c_product_7_284x401} 284w,
+                      ${b2c_product_7_426x602} 426w,
+                      ${b2c_product_7_568x802} 568w
+                    `}
+                    alt=""
+                  />
                 </div>
               </li>
             </ul>
@@ -193,7 +296,17 @@ const B2CHomePage: React.FunctionComponent = () => {
       </section>
 
       <section className="main-banner banner-section-3">
-        <ImageContainer className="main-banner-image" fileName={bannerFileName3} imgUrl={bannerImage3} />
+        <img
+          className="main-banner-image"
+          src={b2c_banner_3_2800x1118}
+          srcSet={`
+            ${b2c_banner_3_700x280} 700w,
+            ${b2c_banner_3_1400x559} 1400w,
+            ${b2c_banner_3_2100x839} 2100w,
+            ${b2c_banner_3_2800x1118} 2800w
+          `}
+          alt=""
+        />
         <div className="main-banner-title-wrap">
           <div className="container">
             <h2 className="goods-heading">{intl.get('b2c-main-banner-heading3')}</h2>

src/ep.config.json

@@ -2,7 +2,7 @@
   "cortexApi": {
     "path": "/cortex",
     "scope": "vestri",
-    "pathForProxy": "http://localhost:9080",
+    "pathForProxy": "https://reference.epdemos.com",
     "reqTimeout": "30000"
   },
   "supportedLocales": [