feat: change png/jpg to lossless webp (#41)

package.json

@@ -76,9 +76,6 @@
   "devDependencies": {
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
-    "@types/imagemin": "^7.0.1",
-    "@types/imagemin-optipng": "^5.2.1",
-    "@types/imagemin-webp": "^5.1.2",
     "@types/jest": "^27.0.1",
     "@types/react": "^17.0.20",
     "@types/react-dom": "^17.0.9",
@@ -95,9 +92,6 @@
     "fork-ts-checker-webpack-plugin": "^6.3.3",
     "html-webpack-plugin": "^5.3.2",
     "husky": "^7.0.2",
-    "imagemin": "^8.0.1",
-    "imagemin-optipng": "^8.0.0",
-    "imagemin-webp": "^6.0.0",
     "jest": "^27.1.1",
     "node-sass": "^6.0.1",
     "postcss": "^8.3.6",
@@ -122,6 +116,9 @@
   },
   "optionalDependencies": {
     "@types/convert-excel-to-json": "^1.7.1",
+    "@types/imagemin": "^7.0.1",
+    "@types/imagemin-optipng": "^5.2.1",
+    "@types/imagemin-webp": "^5.1.2",
     "@types/sharp": "^0.29.1",
     "convert-excel-to-json": "^1.7.0",
     "csv-parse": "^4.16.3",
@@ -134,6 +131,9 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "fontmin": "^0.9.9",
     "http-server": "^13.0.1",
+    "imagemin": "^8.0.1",
+    "imagemin-optipng": "^8.0.0",
+    "imagemin-webp": "^6.0.0",
     "join-images": "^1.0.0",
     "opencc-js": "^1.0.3",
     "prettier": "^2.4.0",

src/components/Card.tsx

@@ -16,8 +16,8 @@ import {
 
 import dataCards from '../../src/data/cards'
 
-import noise from '../../assets/img/noise.png'
-import cardbackbg from '../../assets/img/cardback.png'
+import noise from '../../assets/img/noise.webp'
+import cardbackbg from '../../assets/img/cardback.webp'
 import brick from '../../assets/img/brick.svg'
 import gem from '../../assets/img/gem.svg'
 import recruit from '../../assets/img/recruit.svg'
@@ -435,7 +435,7 @@ const Card = ({
               'm-1 shadow bg-no-repeat bg-cover bg-center flex justify-center items-center text-red-500 font-bold uppercase text-shadow-stroke',
             )}
             style={{
-              backgroundImage: `url(${require(`../../assets/img/cards/${n}.png`)})`,
+              backgroundImage: `url(${require(`../../assets/img/cards/${n}.webp`)})`,
             }}
           >
             {discarded && _.i18n('discarded')}

src/components/Resource.tsx

@@ -5,9 +5,9 @@ import { GameSizeContext } from '../utils/GameSizeContext'
 
 import ResourceNumber from './ResourceNumber'
 
-import brickBg from '../../assets/img/res_1.png'
-import gemBg from '../../assets/img/res_2.png'
-import recruitBg from '../../assets/img/res_3.png'
+import brickBg from '../../assets/img/res_1.webp'
+import gemBg from '../../assets/img/res_2.webp'
+import recruitBg from '../../assets/img/res_3.webp'
 import { I18nContext, upper1st } from '../i18n/I18nContext'
 import { smallRootFontScreenMax, unitTextMaxLength } from '../constants/visuals'
 

src/components/TableCommon.tsx

@@ -8,7 +8,7 @@ import { createUseStyles } from 'react-jss'
 
 import { useAppSelector } from '../utils/useAppDispatch'
 
-import bg from '../../assets/img/bg.jpg'
+import bg from '../../assets/img/bg.webp'
 import { GameSizeContext } from '../utils/GameSizeContext'
 
 const useStyles = createUseStyles({

src/components/Tower.tsx

@@ -4,9 +4,9 @@ import { createUseStyles } from 'react-jss'
 import { GameSizeContext } from '../utils/GameSizeContext'
 import TowerOrWallNumber from './TowerOrWallNumber'
 
-import tower from '../../assets/img/tower.png'
-import towerRed from '../../assets/img/tower_red.png'
-import towerBlue from '../../assets/img/tower_blue.png'
+import tower from '../../assets/img/tower.webp'
+import towerRed from '../../assets/img/tower_red.webp'
+import towerBlue from '../../assets/img/tower_blue.webp'
 import { I18nContext } from '../i18n/I18nContext'
 import { useAppSelector } from '../utils/useAppDispatch'
 import TooltipAll from './special/TooltipAll'

src/components/Wall.tsx

@@ -5,7 +5,7 @@ import { GameSizeContext } from '../utils/GameSizeContext'
 import TowerOrWallNumber from './TowerOrWallNumber'
 import { maxWallOnScreen } from '../constants/visuals'
 
-import wall from '../../assets/img/wall.png'
+import wall from '../../assets/img/wall.webp'
 import { I18nContext } from '../i18n/I18nContext'
 import TooltipAll from './special/TooltipAll'
 

src/components/effects/NumberChangeVisual.tsx

@@ -2,8 +2,8 @@ import React, { useContext, useEffect, useRef } from 'react'
 import cx from 'classnames'
 import { createUseStyles } from 'react-jss'
 
-import explosion from '../../../assets/img/explosion.png'
-import firework from '../../../assets/img/firework.png'
+import explosion from '../../../assets/img/explosion.webp'
+import firework from '../../../assets/img/firework.webp'
 import { GameSizeContext } from '../../utils/GameSizeContext'
 import { numberChangeVisualDuration } from '../../constants/visuals'
 

src/components/screens/EndScreen.tsx

@@ -5,7 +5,7 @@ import { createUseStyles } from 'react-jss'
 import winImg from '../../../assets/img/end_win.svg'
 import loseImg from '../../../assets/img/end_lose.svg'
 import tieImg from '../../../assets/img/end_tie.svg'
-// import firework from '../../../assets/img/firework.png'
+// import firework from '../../../assets/img/firework.webp'
 import { I18nContext } from '../../i18n/I18nContext'
 import { useAppDispatch } from '../../utils/useAppDispatch'
 import { CLOSE_SCREEN_END_INIT } from '../../constants/ActionTypes'

src/declarations.d.ts

@@ -1,5 +1,10 @@
 declare module '*.scss'
 
+declare module '*.webp' {
+  const value: any
+  export = value
+}
+
 declare module '*.png' {
   const value: any
   export = value
@@ -15,6 +20,11 @@ declare module '*.svg' {
   export = value
 }
 
+declare module '*.gif' {
+  const value: any
+  export = value
+}
+
 declare module '*.ico' {
   const value: any
   export = value

webpack.config.js

@@ -101,7 +101,7 @@ module.exports = (env, argv) => {
           use: 'svgo-loader',
         },
         {
-          test: /\.(png|jpe?g|gif|ico)$/i,
+          test: /\.(webp|png|jpe?g|gif|ico)$/i,
           type: 'asset/resource',
         },
         {