performance: responsive image loading

pages/[lang]/index.res

@@ -77,7 +77,13 @@ module T = {
   ) =>
     <Page.Unstructured>
       <Hero
-        imageSrc="/static/oc-sq.jpeg"
+        imageSrc="/static/hero-caml-400w.jpeg"
+        imageSrcSet="/static/hero-caml-400w.jpeg 400w,
+                     /static/hero-caml-600w.jpeg 600w,
+                     /static/hero-caml-800w.jpeg 800w"
+        imageSizes="(max-width: 599px) 200px, 
+                    (max-width: 799px) 300px, 
+                    (min-width: 800px) 400px"
         imagePos={#Right}
         header=heroContent.heroHeader
         body=heroContent.heroBody

pages/storybook.res

@@ -434,7 +434,7 @@ module Categories = {
     module Hero = {
       @react.component
       let make = () => {
-        let imageSrc = "/static/oc-sq.jpeg"
+        let imageSrc = "/static/hero-caml-800w.jpeg"
         let header = "A Header"
         let body = "Some body text here that should be in latin. Some more body text here and here. Text text text text text text text text text text text text text."
         let buttonLinks = {

src/Hero.res

@@ -21,14 +21,14 @@ module HeroTextContainer = {
     </div>
 }
 
-let image = (~src, ~pos) => {
+let image = (~srcSet="", ~sizes="", ~src, ~pos) => {
   let horizontalPlace = switch pos {
   | #Right => "lg:right-0"
   | #Left => "lg:left-0"
   }
   <div
     className={`relative w-full h-64 sm:h-72 md:h-96 lg:absolute lg:inset-y-0 ${horizontalPlace} lg:w-1/2 lg:h-full`}>
-    <img className="absolute inset-0 w-full h-full object-cover" src alt="" />
+    <img className="absolute inset-0 w-full h-full object-cover" src srcSet sizes alt="" />
   </div>
 }
 
@@ -89,10 +89,10 @@ let callToActionArea = (~header, ~body, ~buttonLinks, ~imagePos) => {
 }
 
 @react.component
-let make = (~imageSrc, ~header, ~body, ~buttonLinks=?, ~imagePos, ()) =>
-  <SectionContainer.LargeCentered>
+let make = (~imageSrcSet="", ~imageSizes="", ~imageSrc, ~header, ~body, ~buttonLinks=?, ~imagePos, ()) =>
+  <SectionContainer.LargeCentered> 
     <div className="lg:relative">
       {callToActionArea(~header, ~body, ~buttonLinks, ~imagePos)}
-      {image(~src=imageSrc, ~pos=imagePos)}
+      {image(~srcSet=imageSrcSet, ~sizes=imageSizes, ~src=imageSrc, ~pos=imagePos)}
     </div>
   </SectionContainer.LargeCentered>

src/Hero.resi

@@ -14,6 +14,8 @@ type buttonLinks = {
 
 @react.component
 let make: (
+  ~imageSrcSet: string=?,
+  ~imageSizes: string=?,
   ~imageSrc: string,
   ~header: string,
   ~body: string,