feat(v2): optimize image processing with sharp & lqip (#1663)

* feat(v2): optimize image processing

* cleanup

website/src/data/users.js

@@ -10,7 +10,7 @@ const users = [
   {
     title: 'Channel.js',
     description: 'The missing constructor for creating safe async iterators',
-    preview: '/img/showcase/channeljs.png',
+    preview: require('./showcase/channeljs.png'),
     website: 'https://channel.js.org',
     source: 'https://github.com/channeljs/channel',
     fbOpenSource: false,
@@ -19,7 +19,7 @@ const users = [
   {
     title: 'Component Kit',
     description: 'A declarative UI framework for iOS',
-    preview: '/img/showcase/componentkit.png',
+    preview: require('./showcase/componentkit.png'),
     website: 'https://componentkit.org',
     source: 'https://github.com/facebook/componentkit',
     fbOpenSource: true,
@@ -28,7 +28,7 @@ const users = [
   {
     title: 'Flux',
     description: 'Application architecture for building user interfaces',
-    preview: '/img/showcase/flux.png',
+    preview: require('./showcase/flux.png'),
     website: 'https://facebook.github.io/flux/',
     source: 'https://github.com/facebook/flux',
     fbOpenSource: true,
@@ -37,7 +37,7 @@ const users = [
   {
     title: 'Hermes',
     description: 'JavaScript engine optimized for React Native',
-    preview: '/img/showcase/hermes.png',
+    preview: require('./showcase/hermes.png'),
     website: 'https://hermesengine.dev',
     source: 'https://github.com/facebook/hermes',
     fbOpenSource: true,
@@ -46,7 +46,7 @@ const users = [
   {
     title: 'uniforms',
     description: 'A set of React libraries for building forms',
-    preview: '/img/showcase/uniforms.png',
+    preview: require('./showcase/uniforms.png'),
     website: 'https://uniforms.tools/',
     source: 'https://github.com/vazco/uniforms',
     fbOpenSource: false,

website/src/pages/index.js

@@ -9,6 +9,7 @@ import React from 'react';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import withBaseUrl from '@docusaurus/withBaseUrl';
+import Image from '@docusaurus/Image';
 
 import Layout from '@theme/Layout';
 
@@ -18,7 +19,7 @@ import styles from './styles.module.css';
 
 const QUOTES = [
   {
-    thumbnail: 'img/christopher-chedeau.jpg',
+    thumbnail: require('./christopher-chedeau.jpg'),
     name: 'Christopher "vjeux" Chedeau',
     title: 'Lead Prettier Developer',
     text: (
@@ -34,7 +35,7 @@ const QUOTES = [
     ),
   },
   {
-    thumbnail: 'img/hector-ramos.png',
+    thumbnail: require('./hector-ramos.png'),
     name: 'Hector Ramos',
     title: 'Lead React Native Advocate',
     text: (
@@ -47,7 +48,7 @@ const QUOTES = [
     ),
   },
   {
-    thumbnail: 'img/ricky-vetter.jpg',
+    thumbnail: require('./ricky-vetter.jpg'),
     name: 'Ricky Vetter',
     title: 'ReasonReact Developer',
     text: (
@@ -197,10 +198,10 @@ function Home() {
             {QUOTES.map(quote => (
               <div className="col" key={quote.name}>
                 <div className="avatar avatar--vertical margin-bottom--sm">
-                  <img
+                  <Image
                     alt={quote.name}
                     className="avatar__photo avatar__photo--xl"
-                    src={withBaseUrl(quote.thumbnail)}
+                    img={quote.thumbnail}
                   />
                   <div className="avatar__intro">
                     <h4 className="avatar__name">{quote.name}</h4>

website/src/pages/showcase/index.js

@@ -6,6 +6,7 @@
  */
 
 import React, {useEffect} from 'react';
+import Image from '@docusaurus/Image';
 import Layout from '@theme/Layout';
 
 import classnames from 'classnames';
@@ -42,7 +43,7 @@ function Showcase() {
               <div className="col col--4">
                 <div className={classnames('card', styles.showcaseUser)}>
                   <div className="card__image">
-                    <img src={user.preview} alt={user.title} />
+                    <Image img={user.preview} alt={user.title} />
                   </div>
                   <div className="card__body">
                     <div class="avatar">