Skip to content

Commit cb582a8

Browse files
committed
feat: 이미지 최적화를 위한 WebP 포맷 변환 적용
1 parent 3f2a8aa commit cb582a8

File tree

7 files changed

+24
-6
lines changed

7 files changed

+24
-6
lines changed

images/Hero_Desktop.webp

184 KB
Loading

images/Hero_Mobile.webp

61.7 KB
Loading

images/Hero_Tablet.webp

120 KB
Loading

images/vr1.webp

7.23 KB
Loading

images/vr2.webp

14 KB
Loading

images/vr3.webp

9.27 KB
Loading

index.html

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,18 @@
5656

5757
<section class="hero">
5858

59-
<img class="desktop" src="images/Hero_Desktop.jpg">
60-
<img class="mobile" src="images/Hero_Mobile.jpg">
61-
<img class="tablet" src="images/Hero_Tablet.jpg">
59+
<picture>
60+
<source srcset="images/Hero_Desktop.webp" type="image/webp">
61+
<img class="desktop" src="images/Hero_Desktop.jpg">
62+
</picture>
63+
<picture>
64+
<source srcset="images/Hero_Mobile.webp" type="image/webp">
65+
<img class="mobile" src="images/Hero_Mobile.jpg">
66+
</picture>
67+
<picture>
68+
<source srcset="images/Hero_Tablet.webp" type="image/webp">
69+
<img class="tablet" src="images/Hero_Tablet.jpg">
70+
</picture>
6271

6372

6473
<div class="hero-content">
@@ -84,7 +93,10 @@ <h1>Best Sellers</h1>
8493

8594
<div class="product new">
8695
<div class="product-picture">
87-
<img src="images/vr1.jpg" alt="product: Penom Case">
96+
<picture>
97+
<source srcset="images/vr1.webp" type="image/webp">
98+
<img src="images/vr1.jpg" alt="product: Penom Case">
99+
</picture>
88100
</div>
89101
<div class="product-info">
90102
<h5 class="categories">Headsets, Apple</h5>
@@ -98,7 +110,10 @@ <h3 class="price">
98110

99111
<div class="product new">
100112
<div class="product-picture">
101-
<img src="images/vr2.jpg" alt="product: Noise Cancelling Headphone">
113+
<picture>
114+
<source srcset="images/vr2.webp" type="image/webp">
115+
<img src="images/vr2.jpg" alt="product: Noise Cancelling Headphone">
116+
</picture>
102117
</div>
103118
<div class="product-info">
104119
<h5 class="categories">Headsets, PS</h5>
@@ -112,7 +127,10 @@ <h3 class="price">
112127

113128
<div class="product">
114129
<div class="product-picture">
115-
<img src="images/vr3.jpg" alt="product: Canon Digital SLR EOS Rebel T6">
130+
<picture>
131+
<source srcset="images/vr3.webp" type="image/webp">
132+
<img src="images/vr3.jpg" alt="product: Canon Digital SLR EOS Rebel T6">
133+
</picture>
116134
</div>
117135
<div class="product-info">
118136
<h5 class="categories">Headsets, Oculus</h5>

0 commit comments

Comments
 (0)