diff --git a/src/@components/CategoryPage/style.ts b/src/@components/CategoryPage/style.ts index e511071c..76c7c669 100644 --- a/src/@components/CategoryPage/style.ts +++ b/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; diff --git a/src/@components/MainPage/PiickleMe/style.ts b/src/@components/MainPage/PiickleMe/style.ts index d3aaadcb..749fb529 100644 --- a/src/@components/MainPage/PiickleMe/style.ts +++ b/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` diff --git a/src/asset/image/origin/index.tsx b/src/asset/image/origin/index.tsx index 9320cf1e..45a6a2e6 100644 --- a/src/asset/image/origin/index.tsx +++ b/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";