remove filter to improve performance

Author: ueewbd

README.md

@@ -133,9 +133,11 @@ Put your images into `src/public/images/`.
 
 Compress image:
 ```shell
-cd /PATH/TO/IMAGE_FOLDER
-for i in `ls`; do
-  gm convert -size 1280x1280 $i -resize 1280x1280 /DIST/FOLDER/$i
+src=PATH/TO/INPUT/IMAGES
+dst=PATH/TO/OUTPUT/IMAGES
+for i in `ls $src`; do
+  gm convert -size 1280x1280 $src/$i -resize 1280x1280 $dst/normal/$i
+  gm convert $dst/normal/$i -blur 0x4 $dst/blur/$i
 done
 ```
 

src/config-helper.ts

@@ -6,9 +6,9 @@ import configJson from './config/config.json';
 /**
  * The pictures location, we place pictures at public/images
  */
-const images = fs.readdirSync(path.resolve(__dirname, 'public/images'))
+const images = fs.readdirSync(path.resolve(__dirname, 'public/images/normal'))
   .filter((f) => f.indexOf('.jpg') !== -1 || f.indexOf('.png') !== -1)
-  .map((f) => `/images/${f}`);
+  .map((f) => `/images/normal/${f}`);
 
 /**
  * Parsed questions

src/frontend/src/components/slideshow/index.jsx

@@ -19,7 +19,7 @@ function PicSlider({ curImage, images }) {
           <div key={image}
             className={`${styles.blur} ${image === curImage ? styles.visible : styles.hidden}`}
             style={{
-              backgroundImage: `url("${image}")`,
+              backgroundImage: `url("${image.replace('normal', 'blur')}")`,
               display: activeIndices.includes(index) ? 'block' : 'none'
             }}
           >

src/frontend/src/components/slideshow/slideshow.css

@@ -29,11 +29,6 @@
     background-repeat: no-repeat;
     background-size: cover;
     z-index: 1;
-    -webkit-filter: blur(5px);
-    -moz-filter: blur(5px);
-    -o-filter: blur(5px);
-    -ms-filter: blur(5px);
-    filter: blur(5px);
 }
 
 @media (max-width: 480px) {