๋ฐ์ํ
1๏ธโฃ <img> ํ๊ทธ์ src ์ alt ์์ฑ
- img์ src ์์ฑ์ ๋ธ๋ผ์ฐ์ ์๊ฒ ์ด๋ฏธ์ง ํ์ผ์ ๊ฒฝ๋ก, ํ์ผ๋ช ์ ์๋ ค์ฃผ๋ ์ญํ .
- imgํ๊ทธ ์์ ์ด๋ฏธ์ง ํ์ผ์ด ๋ณด์ด์ง ์์ ๋ alt ์์ฑ์ ์ด๋ฏธ์ง ๋์ ํ
์คํธ๋ฅผ ํ์ํ๋ ์ญํ .
์คํฌ๋ฆฐ๋ฆฌ๋์ ๊ฐ์ด ์๊ฐ์ ์ผ๋ก ์ ๊ทผ์ด ์ด๋ ค์ด ๊ฒฝ์ฐ์๋ ์ด๋ฏธ์ง์ ๋ํ ์ ๋ณด๋ฅผ ํ ์คํธ๋ก ์ ๊ณต. - alt ์์ฑ์ SEO(Search Engine Optimization)์ ๋์๋๋ค๋ ์ฌ์ค! ์ ๋ ๋ธ๋ก๊ทธ ์ด๋ฏธ์ง์๋ ์ ๋ถ alt ์์ฑ์ ์ ๋ ฅํ๊ณ ์์ต๋๋ค! :)
<!-- ์ ๋ ๊ฒฝ๋ก -->
<img src="https://jaycode.tistory.com/image.jpg" alt="์ด๋ฏธ์ง ์ ๋ณด">
<!-- ์๋ ๊ฒฝ๋ก -->
<img src="../image.jpg" alt="์ด๋ฏธ์ง ์ ๋ณด๋ฅผ ์
๋ ฅํ๋ฉด ์คํฌ๋ฆฐ ๋ฆฌ๋๊ฐ ์ฝ์ ์ ์์ด์. ์ฌ์ฉ์์๊ฒ ํฐ ๋์์ ์ค ์ ์๊ฒ ์ฃ ?">
2๏ธโฃ ๋ฐ์ํ ์ด๋ฏธ์ง๋ฅผ ์ํ srcset ์์ฑ
- ๋ฐ์ํ์ ์ํด ์ฌ์ฉํ๋ ์์ฑ.
- ์ฌ๋ฌ ํด์๋์์๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์๋์ผ๋ก ์ต์์ ์ด๋ฏธ์ง๋ฅผ ์ถ๋ ฅํ ์ ์๊ฒ ์ ํ๊ถ์ ๋๊ธด๋ค.
- x(pixel density) ์ w(viewport) ์์ ์๋ ๋์์ ์ฌ์ฉ ๋ถ๊ฐ.
- srcset ์์ฑ์ ์ฌ์ฉํด๋ ๊ฐ์ฅ ๋ง์ง๋ง์ src ์์ฑ์ ๊ฐ์ด ๊ธฐ์ฌํด์ฃผ๋ ๊ฒ์ ํ์! (์ด์ ๋ธ๋ผ์ฐ์ ๋์)
x ์์ ์ (pixel density)
- x์์ ์ ๋ ํ๋ฉด์ ๋ฐ๋ pixel density ๊ธฐ์ค์ผ๋ก ๋ค๋ฅธ ์ด๋ฏธ์ง๋ฅผ ๋ก๋ฉ.
- ๋ชจ๋ฐ์ผ ๋ฑ ์ ์ํ ์ฌ์ฉ์์ ๋๋ฐ์ด์ค์ ํ๋ฉด ๋ฐ๋๊ฐ ๋ค ๋ค๋ฅด๊ธฐ ๋๋ฌธ์ 2, 3 ๋ฐฐ์ ๊น์ง ์์ ํ๊ธฐ๋ ํ๋ค.
- ๋๋ฐ์ด์ค์ ํ์ ๋ฐ๋์ ๋ฐ๋ฅธ ์ด๋ฏธ์ง๋ฅผ ๋ก๋ฉํ๋๋ก ๋ธ๋ผ์ฐ์ ์ ์๋ ค์ค๋ค.
<!-- srcset = x ๋ฅผ ์ฌ์ฉํด์ 2x 3x ํ๋ฉด ๋ฐ๋๋ฅผ ๊ณ ๋ คํ ์ด๋ฏธ์ง ์ถ๋ ฅ -->
<img srcset="images/2๋ฐฐ์-์ด๋ฏธ์ง.png 2x,
images/3๋ฐฐ์-์ด๋ฏธ์ง.png 3x"
src="images/๊ธฐ๋ณธ-์ด๋ฏธ์ง.png"
alt="x์์ ์ ํ์ฉ ์์ ">
w ์์ ์ (viewport width)
- w์์ ์ ๋ ์๋ณธ ์ด๋ฏธ์ง์ ๋์ด viewport width ๊ธฐ์ค์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ๋ก๋ฉ.
- px์ด ์๋ w๋ก ํ๊ธฐํด์ผํ๋ค. ํท๊ฐ๋ฆฌ์ง ๋ง ๊ฒ!
- w์์ ์๊ฐ ์ ์ฉ๋๋ฉด ์ด๋ฏธ์ง width๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ทฐํฌํธ์ 100%๋ฅผ ์ฐจ์ง.
- sizes ์ @media query ํ์์ผ๋ก ๋ทฐํฌํธ ๋์ด๋ฅผ ๊ธฐ์ฌํ๋ฉด ๋ธ๋ผ์ฐ์ ๊ฐ ํ๊ฒฝ์ ๋ฐ๋ผ ์ ์ ํ ์ด๋ฏธ์ง๋ฅผ ์ ํ.
- css์ ์ถฉ๋ํ ์ ์์ผ๋ ์ฃผ์! sizes ๋ณด๋ค css ์ฐ์ ์์๊ฐ ๋ ๋๊ฒ ์ ์ฉ๋๋ค.
<!-- size=(min-whdth) ์ w ๋ฅผ ์ฌ์ฉํด์ ๋ทฐํฌํธ๋ฅผ ๊ณ ๋ คํ ์ด๋ฏธ์ง ์ถ๋ ฅ -->
<img srcset="images/vw-1000.png 1000w,
images/vw-800.png 800w,
images/vw-600.png 600w" sizes="(min-width:1000px) 800px,
(min-width : 800px) 600px,
300px" src="images/vw-600.png" alt="๋ทฐํฌํธ srcset ํ์ฉ ์์ ">
3๏ธโฃ ์ต์ํ img ํ๊ทธ์ ๋์ฒด์ ์ธ picture ํ๊ทธ์ ์ฌ์ฉ๋ฒ์?
- <img> ๊ฐ ํด์๋์ ๋ฐ๋ผ ๋์ผํ ์ด๋ฏธ์ง๋ฅผ ํ๋ฉด ๋ค๋ฅด๊ฒ ๋ณด์ฌ์ค๋ค๋ฉด <picture> ๋ ํ๋ฉด ํด์๋์ ๋ฐ๋ผ ๋ค๋ฅธ ์ด๋ฏธ์ง๋ฅผ ๋ณด์ฌ์ค ์๋ ์๊ณ , ์ต์ ์ด๋ฏธ์ง ํฌ๋งท(ํ์ฅ์)์ ์ ์ฉํ ๋ ๋ค์ํ ๋ธ๋ผ์ฐ์ ์์ ๋์ํด์ผ ํ ๋ ์ฌ์ฉ.
- <picture> <source srcset="" media="min-width:" type=””> <img> </picture> ์ ๊ตฌ์กฐ.
- ์์ฐจ์ ์ผ๋ก ์์์๋ถํฐ ๋ชจ๋ <source> ์์์ ์ด๋ฏธ์ง ์ฌ์ฉ์ด ๋ถ๊ฐ๋ฅํ๋ฉด ๋ง์ง๋ง <img> ๋ฅผ ๋๋๋งํ๊ธฐ ๋๋ฌธ์ ๋ฐ๋์ ํจ๊ป ์ฌ์ฉ.
- ์ด๋ ๊ฒ ์ด์ ๊ธฐ์ ์ด ๋์ํ ์ ์๋ ํ๊ฒฝ์ ๋๋นํด ๋๊ณ ์ต์ ๊ธฐ์ ์ ์ ๊ณตํ๋ ๋ฐฉ๋ฒ์ ์ ์ง์ ํฅ์๊ธฐ๋ฒ Progressive enhancement ์ด๋ผ๊ณ ํ๋ค! :)
4๏ธโฃ picture ํ๊ทธ์ srcset, media ์์ฑ
- <img> ์ sizes ์ ๋น์ทํ ๊ธฐ๋ฅ
- midia ์ @media query ํ์์ผ๋ก ๋ทฐํฌํธ ๋์ด๋ฅผ ๊ธฐ์ฌํ๋ฉด ๋ธ๋ผ์ฐ์ ๊ฐ ํ๊ฒฝ์ ๋ฐ๋ผ ์ ์ ํ ์ด๋ฏธ์ง๋ฅผ ์ ํ.
<!-- picture ์์ ์๋ source ํ๊ทธ์ srcset ๊ณผ media ์์ฑ์ ์ ๋ณด๋ฅผ ์
๋ ฅํด์ ์ ์ด -->
<picture>
<source srcset="large.jpeg" media="(min-width:960px)"">
<source srcset="medium.jpeg" media="(min-width:620px)">
<img src="small.jpeg" alt="์ด๋ฐ ์์ผ๋ก ๊ฐ๊ฐ ๋ค๋ฅธ ์ด๋ฏธ์ง๋ฅผ ๋ทฐํฌํธ ๋๋น์ ๋ฐ๋ผ์ ์ถ๋ ฅํฉ๋๋ค.">
</picture>
5๏ธโฃ picture ํ๊ทธ์ type ์์ฑ
- ์ด๋ฏธ์ง์ ํฌ๋งท(ํ์ฅ์) ์ ๋ณด๋ฅผ ๋ธ๋ผ์ฐ์ ์๊ฒ ์ ๋ฌํ๊ณ ์์ฐจ์ ์ผ๋ก ๋ธ๋ผ์ฐ์ ๊ฐ ์ง์ํ๋ ํฌ๋งท์ธ์ง ํ์, ์ง์ํ์ง ์๋ ํฌ๋งท์ด๋ฉด ๋ค์ ์์๋ก ์ด๋.
- WebP๋ AVIF ์ ๊ฐ์ ์ต์ ํฌ๋งท์ ์ง์ํ๋ ค๋ฉด ํฌ๋ก์ค๋ธ๋ผ์ฐ์ง์ ์ํด <img> ์์๋ฅผ ๊ฐ์ฅ ๋ง์ง๋ง์ ๊ผญ ๋ฐฐ์นํ ๊ฒ!
<!-- type ์์ฑ์ ์
๋ ฅํ๋ฉด ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ก๋ถํฐ ์์ฐจ์ ์ผ๋ก ๋์ ๊ฐ๋ฅํ ํฌ๋งท๋ถํฐ ์ ์ฉ -->
<picture>
<source srcset="awesomeNewFormat.avif" type="image/avif">
<source srcset="NewFormat.webp" type="image/webp">
<img src="oldFormat.jpeg" alt="๊ตฌํ ์ด๋ฏธ์ง ํฌ๋งท์ ๋ง์ง๋ง์ ๊ผญ ๋ฐฐ์นํด์ผํฉ๋๋ค.">
</picture>
๐ฉ๐ป๐ป ์์ฝ!
- ํด์๋์ ๋ฐ๋ผ ๊ฐ์ ์ด๋ฏธ์ง๋ฅผ ๊ณ ํ์ง๋ก ๋ณด์ฌ์ฃผ๊ณ ์ถ์ ๋ img srcset์,
ํด์๋์ ๋ฐ๋ผ ๋ค๋ฅธ ์ด๋ฏธ์ง or ๋ค๋ฅธ ํฌ๋งท์ ๋ณด์ฌ์ฃผ๊ณ ์ถ์ ๋์๋ picture๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค. - <img>์ srcset ์์ฑ์ผ๋ก๋ ํ๋ฉด ๋ฐ๋๋ฅผ ๊ธฐ์ค์ผ๋ก ํ x ์์ ์, ๋ทฐํฌํธ ๋๋น๋ฅผ ๊ธฐ์ค์ผ๋ก ํ w ์์ ์๊ฐ ์๋ค.
- <picture>์ midia ์์ฑ์ @media query ํ์์ผ๋ก ๋ทฐํฌํธ ๋์ด๋ฅผ ๊ธฐ์ฌํ๋ฉด ๋ธ๋ผ์ฐ์ ๊ฐ ํ๊ฒฝ์ ๋ฐ๋ผ ์ ์ ํ ์ด๋ฏธ์ง๋ฅผ ์ ํํ๋ค.
- ์์ฐจ์ ์ผ๋ก ์์์๋ถํฐ ๋ชจ๋ ์์์ ์ด๋ฏธ์ง ์ฌ์ฉ์ด ๋ถ๊ฐ๋ฅํ๋ฉด ๋ง์ง๋ง <img> ๋ฅผ ๋๋๋ง.
- ์ด๋ ๊ฒ ์ด์ ๊ธฐ์ ์ด ๋์ํ ์ ์๋ ํ๊ฒฝ์ ๋๋นํด ๋๊ณ ์ต์ ๊ธฐ์ ์ ์ ๊ณตํ๋ ๋ฐฉ๋ฒ์ ์ ์ง์ ํฅ์๊ธฐ๋ฒ Progressive enhancement ์ด๋ผ๊ณ ํ๋ค! :)
๋ฐ์ํ