[2023.03.16] 프론트엔드 스쿨 오늘의 TIL
srcset
srcset은 img 태그의 속성이다. 간단하게 말해서, 브라우저에게 이미지의 선택권을 위임할 수 있다.
srcset 속성을 사용하면 여러 해상도에 대응하여 브라우저가 최상의 이미지를 로딩하는데 도움을 줄 수 있다.
x 서술자
x 서술자는 화소의 밀도에 따른 이미지를 렌더링 하도록 브라우저에게 알려준다.
<img
width="200px"
srcset="img/logo_1.png 2x,
img/logo_2.png 3x"
src="a.png"
alt="test">
크롬 브라우저 개발자 도구에서 콘솔창을 열고, window.devicePixelRatio 명령어를 입력하면 사용자의 화소 밀도를 알 수 있다. 위의 코드에서, 2x는 이 화소 밀도가 2일때를 뜻하고 3x는 화소 밀도가 3일때를 뜻한다.
그리하여 위 코드를 해석해보면 화소 밀도가 2일때 logo_1.png, 3일때 logo_2.png, 그외에는 src값인 a.png를 브라우저가 선택하여 보여주게 된다. 여기서 화소밀도는 반올림 처리가 되므로 1.5, 2.5이상이면 각각 2x , 3x의 이미지가 보여진다.
w 서술자
w 서술자는 브라우저에게 현재 사용자의 환경에 따른 가장 적절한 이미지를 로딩하도록 정보를 알려준다.
<img
width="200px"
srcset="img/logo_3.png 700w,
img/logo_2.png 600w,
img/logo_1.png 300w"
src="a.png"
alt="test">
w 서술자는 브라우저 창 크기에 따른 이미지를 로딩하도록 하며, 브라우저가 이미지를 선택하므로 사용자가 원하는 이미지를 선택할 수 없다. 네트워크 속도, 이미지 용량, 화면 해상도를 고려하여 가장 적절한 이미지를 브라우저가 선택하는 것이다. w서술자는 px 대신 w를 쓰는 것에 주의한다. w 산술자는 width값을 따로 지정하지 않으면 기본적으로 뷰포트의 100%를 차지하게 된다.
💡x서술자와 y서술자는 동시에 사용될 수 없다. 또한 src 속성을 비워두면 안된다. srcset을 지원하지 않는 브라우저를 대비해서 사용하는 이미지이다.
sizes
뷰포트 조건에 따라 이미지가 UI안에서 차지하게 될 사이즈를 브라우저에 알려준다. w서술자에 더해 브라우저 에게 이미지를 선택할 수 있는 더 많은 힌트를 준다.
<img
srcset="img/logo_3.png 700w,
img/logo_2.png 600w,
img/logo_1.png 300w"
sizes="(min-width: 960px) 250px,
(min-width: 620px) 150px,
300px"
src="a.png"
alt="test">
srcset 속성은 sizes 속성 없이도 잘 동작하겠지만, 웹 표준을 위해서 srcset 속성 사용시 sizes를 명시해주는 것이 좋다.
sizes 속성은 얼핏보면 미디어쿼리랑 비슷한 모습이다. 실제로 동작하는 방식도 비슷하다. 하지만 미디어쿼리가 sizes 속성을 이기기 때문에, 협업할 때 반응형 이미지를 어떤 방식으로 구현했는지 공유할 필요가 있다.
<picture>
<picture> 요소는 <source> 요소와 <img> 요소를 통해 각기 다른 디스플레이 혹은 디바이스에 따라 조건에 맞는 이미지를 보여주는 요소다.
<picture>
<source srcset="babies_large.jpeg" media="(min-width:960px)">
<source srcset="babies.jpeg" media="(min-width:620px)">
<img src="babies_small.jpeg" alt="귀여운 아기 팽귄들">
</picture>
💡srcset과 picture의 차이점
srcset은 같은 이미지들 중 가장 적절한 하나를 선택
picture는 여러 다른 종류의 이미지중 하나를 선택
media 속성
picture 요소는 source 안의 media 속성값을 통해 조건에 알맞는 이미지를 찾게 된다. 조건에 맞는 source 요소의 srcset 속성값에 들어있는 이미지를 img 요소의 src 속성에 넣어서 화면에 보여주게 되는 것이다. picture 요소와 source 요소 자체는 이미지를 나타내지 않기 때문에 img 요소가 없으면 작동하지 않게 되므로 주의해야한다.
type 속성
<picture>
<source srcset="babies.webp" type="image/webp">
<source srcset="babies.avif" type="image/avif">
<img src="babies.jpeg" alt="귀여운 아기 팽귄들">
</picture>
source 요소안의 type 속성으로 브라우저에게 이미지의 포맷 타입을 알려준다. 위에서부터 차례대로 브라우저가 지원하는 확장자인지 판단하고, 지원하지 않는 포맷이라고 판단되면 다음 source로 넘어간다. 만약 모든 source 요소의 이미지들을 지원하지 않는다면 최종적으로 img 요소의 src 이미지를 출력하게 된다. webp, avif 같은 최신 이미지 포맷은 지원하지 않는 브라우저가 있을 수 있기 때문에 크로스브라우징을 위해 picture 요소를 사용해주면 좋다.
🪜점진적 향상기법 (Progressive enhancement)
기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고, 최신 기술을 사용할 수 있는 환경에서는 최신 기술을 제공하여 더 나은 사용자 경험을 제공할 수 있는 방법입니다.
📷이미지 포맷의 종류
GIF(Graphics Interchange Format) : 256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 든다. 투명은 표현 가능하지만 그 정도를 조절하는건 불가능하며, 때문에 그림자 표현도 불가능하다. 애니메이션 처리가 가능하다.
JPG/JPEG (Joint Photographic Expert Group image): 매우 화소가 높고, 용량도 적지만 투명처리가 불가능하다.
PNG (Portable Network Graphics) : 만한 컬러는 모두 표현 가능하여 투명 영역을 처리 가능하지만 용량이 크다.
SVG (Scalable Vector Graphics) : SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능합니다.
WebP (Web Picture Format) : 압축률이 좋다고 소문난 JPEG 이미지보다 용량이 70% 수준으로 낮지만 더 뛰어난 색상을 지원하는 포맷이다. 그럼에도 불구하고 PNG 처럼 투명도 표현 가능하며, GIF 처럼 애니메이션 표현도 가능하다.
AVIF (AV1 Image File Format) : WebP 처럼 뛰어난 색상표현, 애니메이션 지원, 투명도 표현 모두 가능하며 JPEG 이미지의 50% 수준인 용량을 자랑하는 차세대 이미지 포맷이다. 아직 지원하지 않는 브라우저가 많으므로 주의해야한다.
🤔picutre VS srcset
해상도에 따라 '다른 이미지(포멧 포함)'를 보여주고 싶을 때에는 picture를,
‘같은 이미지’인데 해상도에 따라 더 높은 해상도 이미지를 보여주고 싶을 때에는 srcset을 사용한다.
느낀점 및 회고
쓰다보니 내용이 길어지는건 기분탓일까..? 재현님이 가르쳐주신 내용들은 처음 듣는 내용들이라 다 받아 적다보니 이렇게 길어진 것 같다. 원근법 관련 강의도 해주셨는데 이건 따로 정리해봐야겠다.. 이제부터는 실습 위주의 강의가 진행되다보니 약간 강의템포도 빨라진 느낌이다. 그래도 실습 위주로 배웠던 것들을 활용해보면 조금씩 익숙해지지 않을까 싶다. 물론 아직은 익숙하지가 않다.. 과제를 풀면서 감을 조금씩 익혀가야겠다.
내일은 네이버 프론트엔드 책임 리더 우상훈님의 특강이 있다.. 제코베 강사님들도 너무 좋지만, 특강은 또 특강 나름대로의 재미와 감동이 있는 것 같다. 너무너무 기대된다.. 내일도 한걸음 더 성장할 수 있기를 기대해본다. 파이팅하자❗