Merge pull request #268 from boostcampwm-2024/Feature/#267_이미지_최적화

Feature/#267 이미지 최적화
boostcampwm-2024 · Dec 2, 2024 · 427b4d4 · 427b4d4
2 parents 371099a + cd32303
commit 427b4d4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/client/src/assets/images/background.avif b/client/src/assets/images/background.avif
diff --git a/client/src/assets/images/background.webp b/client/src/assets/images/background.webp
diff --git a/client/src/styles/global.ts b/client/src/styles/global.ts
@@ -9,7 +9,16 @@ export const globalStyles = defineGlobalStyles({
   },
 
   "html, body": {
-    backgroundImage: 'url("./assets/images/background.png")',
+    // 기본 이미지
+    backgroundImage: 'url("./assets/images/background.jpg")',
+    // WebP 지원
+    "@supports (background-image: url('./assets/images/background.webp'))": {
+      backgroundImage: 'url("./assets/images/background.webp")',
+    },
+    // AVIF 지원
+    "@supports (background-image: url('./assets/images/background.avif'))": {
+      backgroundImage: 'url("./assets/images/background.avif")',
+    },
     backgroundSize: "cover",
     fontFamily: "Pretendard, sans-serif",
     boxSizing: "border-box",