인프런 커뮤니티 질문&답변

형우리님의 프로필 이미지
형우리

작성한 질문수

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

3-5) 동영상 사이즈 최적화

webp 확장자질문

해결된 질문

작성

·

333

1

강사님 안녕하세요

좋은강의 잘 수강중인 학생입니다.

강의중에는 클라이언트에 저장된 확장자 2개의 이미지를 사용해서 분기처리를 하셨는데요,

서버에서 받아오는 이미지파일을 분기처리 할려면(webp를 지원하지않는 브라우저를 위해)

webp파일 이미지와 jpg(또는 png) 파일 이미지 총 2개 파일 이미지를 보내줘야 분기처리가 가능한가요?

아니면 서버에서 1개의 확장자 이미지를 보내주면

jpg -> webp 또는 webp->jpg로 바꾸어서 분기처리 하는방법은 없을까요?

답변 1

0

유동균님의 프로필 이미지
유동균
지식공유자

안녕하세요, 형우리 님

이미비 포맷별 분기 처리에 대해서 질문을 주셨는데요,

강의에서 적용한 picture 태그를 통한 분기는 이미지를 모두 불러와서 분기를 하는 것이 아니라,

source 태그에 명시된 type 속성을 보고 브라우저가 지원 가능한 타입인지를 판단합니다.

따라서 굳이 파일을 로드해보지 않고도 지원 가능 여부를 알 수 있습니다.

반대로 파일 자체는 지원이 가능하더라도 type 속성에 이상한 값을(예를들어, webt라거나) 넣게되면 파일의 확장자와 상관없이 지원할 수 없는 타입이라고 판단하여 로드하지 않습니다.

 

그럼 답변이 도움되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다. :)

형우리님의 프로필 이미지
형우리

작성한 질문수

질문하기