use next-optimized-images@canary and its <Img />

Author: pastleo

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["react-optimized-image/plugin"]
+}

components/Background.js

@@ -1,23 +1,20 @@
 import classnames from 'classnames';
 
-import bgWebpSrc from '../assets/bg.jpg?webp';
-import bgJpgSrc from '../assets/bg.jpg';
+import Img from 'react-optimized-image';
+
+import bgSrc from '../assets/bg.jpg';
 
 const Background = ({ className }) => (
-  <picture>
-    <source srcSet={bgWebpSrc} type='image/webp' />
-    <source srcSet={bgJpgSrc} type='image/jpeg' />
-    <img
-      alt='background'
-      src={bgJpgSrc}
-      className={
-        classnames(
-          'bg-background-avg print:hidden top-0 left-0 h-full w-full object-cover -z-1',
-          className,
-        )
-      }
-    />
-  </picture>
+  <Img
+    alt='background'
+    src={bgSrc} webp
+    className={
+      classnames(
+        'bg-background-avg print:hidden top-0 left-0 h-full w-full object-cover -z-1',
+        className,
+      )
+    }
+  />
 );
 
 export default Background;

components/IndexNavbar.js

@@ -13,8 +13,8 @@ import styles from '../styles/components/index-navbar.module.scss';
 const Navbar = () => (
   <nav className={classnames(styles.indexNavbar, 'relative py-6')}>
     <Background className='absolute object-left-top' />
-    <div className='py-4 max-w-2xl mx-auto flex'>
-      <Logo className='w-32 pl-8' />
+    <div className='pl-8 py-4 max-w-2xl mx-auto flex'>
+      <Logo width='108' />
       <div className='flex-1 pl-4 pr-4 screen:text-center flex flex-col justify-center'>
         <h1 className='text-4xl font-bold'>PastLeo</h1>
         <div className='pt-1 sm:pt-3'>

components/Logo.js

@@ -1,52 +1,53 @@
 import { useState } from 'react';
 import classnames from 'classnames';
 
+import Img from 'react-optimized-image';
+
 import styles from '../styles/components/logo.module.scss';
 
-import hackerWebpSrc from '../assets/logo/avatar-hacker.jpg?webp';
-import hackerJpgSrc from '../assets/logo/avatar-hacker.jpg';
-import avatarWebpSrc from '../assets/logo/avatar.jpg?webp';
-import avatarJpgSrc from '../assets/logo/avatar.jpg';
-import speakerWebpSrc from '../assets/logo/speaker.jpg?webp';
-import speakerJpgSrc from '../assets/logo/speaker.jpg';
+import avatarSrc from '../assets/logo/avatar.jpg';
+import hackerSrc from '../assets/logo/avatar-hacker.jpg';
+import speakerSrc from '../assets/logo/speaker.jpg';
 
-const srcSets = {
-  normal: {
-    webp: hackerWebpSrc,
-    jpg: hackerJpgSrc,
-  },
-  hover: {
-    webp: avatarWebpSrc,
-    jpg: avatarJpgSrc,
-  },
-  revealed: {
-    webp: speakerWebpSrc,
-    jpg: speakerJpgSrc,
-  },
-};
+const NormalLogoImg = props => (
+  <Img
+    src={avatarSrc} webp
+    className={classnames(styles.normal, 'rounded-full')}
+    {...props}
+  />
+);
+const HackerLogoImg = props => (
+  <Img
+    src={hackerSrc} webp
+    className={classnames(styles.hacker, 'rounded-full')}
+    {...props}
+  />
+);
+const SpeakerLogoImg = props => (
+  <Img
+    src={speakerSrc} webp
+    className={classnames(styles.speaker, 'rounded-full')}
+    {...props}
+  />
+);
 
-const Logo = ({ className, forcerRvealed }) => {
+const Logo = ({ className, width, forcedRvealed }) => {
   const [revealed, setRevealed] = useState(false);
-  const [hover, setHover] = useState(false);
-
-  const srcSetKey = (forcerRvealed || revealed) ? 'revealed' : (hover ? 'hover' : 'normal');
+  const widthProps = { width, height: width };
 
   return (
     <div
-      className={classnames(styles.logo, className)}
+      className={
+        classnames(
+          styles.logo, className,
+          { [styles.revealed]: revealed || forcedRvealed },
+        )
+      }
       onClick={() => setRevealed(r => !r)}
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
     >
-      <picture>
-        <source srcSet={srcSets[srcSetKey].webp} type='image/webp' />
-        <source srcSet={srcSets[srcSetKey].jpg} type='image/jpeg' />
-        <img
-          alt='logo'
-          src={srcSets[srcSetKey].jpg}
-          className={classnames(styles.img, 'max-w-full max-h-full rounded-full border')}
-        />
-      </picture>
+      <NormalLogoImg alt='logo' {...widthProps} />
+      <HackerLogoImg {...widthProps} />
+      <SpeakerLogoImg {...widthProps} />
     </div>
   );
 };

components/Navbar.js

@@ -1,27 +1,24 @@
 import Link from 'next/link';
 import classnames from 'classnames';
 
+import Img from 'react-optimized-image';
+
 import Background from '../components/Background.js';
 
 import styles from '../styles/components/navbar.module.scss';
 
-import avatarWebpSrc from '../assets/logo/avatar-hacker.jpg?webp';
-import avatarJpgSrc from '../assets/logo/avatar-hacker.jpg';
+import avatarSrc from '../assets/logo/avatar.jpg';
 
 const Navbar = () => (
   <nav className={classnames(styles.navbar, 'relative h-16 p-1 flex justify-center items-center')}>
     <Background className='absolute object-left-top' />
     <Link href='/'>
       <a className='flex justify-center items-center p-1'>
-        <picture>
-          <source srcSet={avatarWebpSrc} type='image/webp' />
-          <source srcSet={avatarJpgSrc} type='image/jpeg' />
-          <img
-            alt='logo'
-            src={avatarJpgSrc}
-            className={classnames(styles.logo, 'rounded-full w-8 md:w-10')}
-          />
-        </picture>
+        <Img
+          alt='logo'
+          src={avatarSrc} webp
+          className={classnames(styles.logo, 'rounded-full w-8 md:w-10')}
+        />
         <h1 className='hidden md:block md:mx-3 md:text-xl font-bold'>PastLeo</h1>
       </a>
     </Link>