Website: Compresses images on site

frontend/website-redesign/src/components/AboutpageRows.re

@@ -5,7 +5,7 @@ module Styles = {
       height(`percent(100.)),
       width(`percent(100.)),
       important(backgroundSize(`cover)),
-      backgroundImage(`url("/static/img/BackgroundGlowCluster01.png")),
+      backgroundImage(`url("/static/img/BackgroundGlowCluster01.jpg")),
     ]);
 
   let container =

frontend/website-redesign/src/components/Investors.re

@@ -3,15 +3,15 @@ module Styles = {
   let backgroundImage =
     style([
       backgroundSize(`cover),
-      backgroundImage(url("/static/img/InvestorsBackgroundMobile.png")),
+      backgroundImage(url("/static/img/InvestorsBackgroundMobile.jpg")),
       media(
         Theme.MediaQuery.tablet,
-        [backgroundImage(url("/static/img/InvestorsBackgroundTablet.png"))],
+        [backgroundImage(url("/static/img/InvestorsBackgroundTablet.jpg"))],
       ),
       media(
         Theme.MediaQuery.desktop,
         [
-          backgroundImage(url("/static/img/InvestorsBackgroundDesktop.png")),
+          backgroundImage(url("/static/img/InvestorsBackgroundDesktop.jpg")),
         ],
       ),
     ]);

frontend/website-redesign/src/components/QuoteSection.re

@@ -14,7 +14,7 @@ module Styles = {
       media(
         Theme.MediaQuery.tablet,
         [
-          background(`url("/static/img/SectionQuoteTablet.png")),
+          background(`url("/static/img/SectionQuoteTablet.jpg")),
           height(`rem(42.)),
         ],
       ),
@@ -24,7 +24,7 @@ module Styles = {
           justifyContent(`flexEnd),
           alignContent(`spaceAround),
           padding2(~v=`zero, ~h=`rem(9.5)),
-          background(`url("/static/img/SectionQuoteDesktop.png")),
+          background(`url("/static/img/SectionQuoteDesktop.jpg")),
         ],
       ),
     ]);

frontend/website-redesign/src/components/SecuredBySection.re

@@ -10,7 +10,7 @@ module Styles = {
       ),
       media(
         Theme.MediaQuery.desktop,
-        [backgroundImage(url("/static/img/SecuredByLarge.png"))],
+        [backgroundImage(url("/static/img/SecuredByLarge.jpg"))],
       ),
     ]);
   let grid =

frontend/website-redesign/src/pages/Blog.re

@@ -172,8 +172,8 @@ let make = (~posts) => {
           title: featured.ContentType.BlogPost.title,
           description: featured.snippet,
           textColor: Theme.Colors.white,
-          image: "/static/img/BlogLandingHero.png",
-          background: Image("/static/img/MinaSimplePattern1.png"),
+          image: "/static/img/BlogLandingHero.jpg",
+          background: Image("/static/img/MinaSimplePattern1.jpg"),
           contentBackground: Image("/static/img/MinaSepctrumSecondary.png"),
           button: {
             buttonColor: Theme.Colors.orange,
@@ -193,7 +193,7 @@ let make = (~posts) => {
       </Wrapped>
       <ButtonBar
         kind=ButtonBar.CommunityLanding
-        backgroundImg="/static/img/ButtonBarBackground.png"
+        backgroundImg="/static/img/ButtonBarBackground.jpg"
       />
       <InternalCtaSection />
     </Page>

frontend/website-redesign/src/pages/BlogAll.re

@@ -18,7 +18,7 @@ let make = (~posts) => {
     </Wrapped>
     <ButtonBar
       kind=ButtonBar.CommunityLanding
-      backgroundImg="/static/img/ButtonBarBackground.png"
+      backgroundImg="/static/img/ButtonBarBackground.jpg"
     />
     <Blog.InternalCtaSection />
   </Page>;

frontend/website-redesign/src/pages/BlogPost.re

@@ -120,9 +120,9 @@ let make = (~post: option(ContentType.BlogPost.t)) => {
         header=title
         copy={Js.Undefined.toOption(subtitle)}
         background=Theme.{
-          desktop: "/static/img/BlogDetailImage.png",
-          tablet: "/static/img/BlogDetailImage.png",
-          mobile: "/static/img/BlogDetailImage.png",
+          desktop: "/static/img/BlogDetailImage.jpg",
+          tablet: "/static/img/BlogDetailImage.jpg",
+          mobile: "/static/img/BlogDetailImage.jpg",
           // TODO: Get non-desktop versions of this image
         }
       />

frontend/website-redesign/src/pages/Community.re

@@ -49,7 +49,7 @@ module Styles = {
     ]);
   let leaderboardBackground =
     style([
-      backgroundImage(`url("/static/img/backgrounds/SectionBackground.png")),
+      backgroundImage(`url("/static/img/backgrounds/SectionBackground.jpg")),
       backgroundSize(`cover),
     ]);
 
@@ -209,7 +209,7 @@ let make = (~profiles) => {
     />
     <ButtonBar
       kind=ButtonBar.CommunityLanding
-      backgroundImg="/static/img/ButtonBarBackground.png"
+      backgroundImg="/static/img/ButtonBarBackground.jpg"
     />
     <FeaturedSingleRow
       row=FeaturedSingleRow.Row.{
@@ -218,7 +218,7 @@ let make = (~profiles) => {
         title: "Genesis Program",
         description: "Calling all block producers and snark producers, community leaders and content creators! Join Genesis, meet great people, play an essential role in the network, and earn Mina tokens.",
         textColor: Theme.Colors.white,
-        image: "/static/img/BlogLandingHero.png",
+        image: "/static/img/BlogLandingHero.jpg",
         background:
           Image("/static/img/community-page/CommunityBackground.png"),
         contentBackground: Image("/static/img/BecomeAGenesisMember.jpg"),

frontend/website-redesign/src/pages/Demo.re

@@ -152,11 +152,11 @@ let make = () => {
     </div>
     <ButtonBar
       kind=ButtonBar.HelpAndSupport
-      backgroundImg="/static/img/ButtonBarBackground.png"
+      backgroundImg="/static/img/ButtonBarBackground.jpg"
     />
     <ButtonBar
       kind=ButtonBar.CommunityLanding
-      backgroundImg="/static/img/ButtonBarBackground.png"
+      backgroundImg="/static/img/ButtonBarBackground.jpg"
     />
   </Page>;
 };

frontend/website-redesign/src/pages/Genesis.re

@@ -2,13 +2,13 @@ module Styles = {
   open Css;
   let genesisSection =
     style([
-      backgroundImage(`url("/static/img/GenesisMiddleBackground.png")),
+      backgroundImage(`url("/static/img/GenesisMiddleBackground.jpg")),
       backgroundSize(`cover),
     ]);
   let background =
     style([
       backgroundImage(
-        `url("/static/img/BecomeAGenesisMemberBackground.png"),
+        `url("/static/img/BecomeAGenesisMemberBackground.jpg"),
       ),
       backgroundSize(`cover),
     ]);
@@ -20,7 +20,7 @@ module Styles = {
     ]);
   let leaderboardBackground =
     style([
-      backgroundImage(`url("/static/img/backgrounds/SectionBackground.png")),
+      backgroundImage(`url("/static/img/backgrounds/SectionBackground.jpg")),
       backgroundSize(`cover),
     ]);
 
@@ -169,7 +169,7 @@ module FoundingMembersSection = {
     let container =
       style([
         padding2(~v=`rem(4.), ~h=`rem(0.)),
-        backgroundImage(`url("/static/img/GenesisMiddleBackground.png")),
+        backgroundImage(`url("/static/img/GenesisMiddleBackground.jpg")),
         backgroundSize(`cover),
       ]);
     let h2 = merge([Theme.Type.h2, style([color(white)])]);
@@ -364,7 +364,7 @@ let make = (~profiles) => {
           description: "Up to 1,000 community participants will be selected to help us harden Mina's protocol, strengthen the network and receive a distribution of 66,000 tokens.",
           textColor: Theme.Colors.white,
           image: "/static/img/GenesisCopy.jpg",
-          background: Image("/static/img/BecomeAGenesisMemberBackground.png"),
+          background: Image("/static/img/BecomeAGenesisMemberBackground.jpg"),
           contentBackground: Image("/static/img/BecomeAGenesisMember.jpg"),
           button: {
             FeaturedSingleRow.Row.buttonText: "Apply Now",