feat: add background-image set for compatibility

src/@components/CategoryPage/style.ts

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 
 import { ImgCategoryBanner } from "../../asset/image";
+import { OriginImgCategoryBanner } from "../../asset/image/origin";
 
 export const St = {
   Root: styled.main`
@@ -14,7 +15,11 @@ export const St = {
     height: 17.9rem;
     padding: 2rem 0 0 1.6rem;
 
-    background: url(${ImgCategoryBanner});
+    background-image: url(${ImgCategoryBanner});
+    background-image: image-set(
+      ${ImgCategoryBanner} type("image/webp"),
+      ${OriginImgCategoryBanner} type("image/png"),
+    )
     background-size: cover;
 
     position: relative;

src/@components/MainPage/PiickleMe/style.ts

@@ -2,6 +2,7 @@ import { Link } from "react-router-dom";
 import styled from "styled-components";
 
 import { ImgVoteBanner } from "../../../asset/image";
+import { OriginImgVoteBanner } from "../../../asset/image/origin";
 
 const Container = styled.section``;
 
@@ -17,6 +18,7 @@ const BannerContainer = styled.section`
   align-items: center;
 
   background-image: url(${ImgVoteBanner});
+  background-image: image-set(${ImgVoteBanner} type("image/webp"), ${OriginImgVoteBanner} type("image/png"));
 `;
 
 const BannerContentWrapper = styled.div`

src/asset/image/origin/index.tsx

@@ -1,3 +1,5 @@
 export { default as OriginImgBanner1 } from "./banner_1.png";
 export { default as OriginImgBanner2 } from "./banner_2.png";
 export { default as OriginImgBanner3 } from "./banner_3.png";
+export { default as OriginImgCategoryBanner } from "./categoryBanner.png";
+export { default as OriginImgVoteBanner } from "./voteBanner.png";