반응형 웹 페이지에서 사진 사이즈 설정

반응형 웹 페이지를 만들 때 사진의 크기는 중요합니다.

사진 파일은 크기가 클 수록 용량이 더 크고 그 만큼 트레픽이 더 발생하기 때문에 비용이 증가합니다.

그렇다고 작은 크기의 사진을 사용한다면 큰 화면에서 보았을 때 찌그러지는 못 생긴 사진이 됩니다.

무조건 작게도 무조건 크게도 할 수 없다는 뜻 입니다.

선사시대 방법으로 가볼까요?

PC 버전, 모바일 버젼. 구분해서 화면을 만들면 됩니다. 동일한 화면을 두개 만들어서 PC와 모바일로 구분하면 되겠네요.

진짜???  사실은 아니죠!!

프론트 엔드 개발이 조금이라도 있다면 알겠지만 요즘에는 테블릿 PC도 많습니다. 더군다나 테블릿 PC를 전국민에게 알려준 최ㅅㅅ님도 계셨기 때문에 그 존재에 대해서도 신경써야 합니다.

css 의 media query인 max-width를 사용하는 방법도 있겠지만 모든 img 엘레멘트에 해 주기는 힘들기 때문에 더욱더 간단하며 막강한 방법을 소개합니다.

picture / img srcset

html5 문법인 picture를 사용하고 화면 해상도에 따라 media 를 통해 다른 파일을 로드할 수 있습니다.

srcset에 , (콤마)로 구분된 url경로를 넣고 뒤에 "배수x"를 적습니다. 없으면 1x입니다.

<picture>

  <source

    media="(min-width: 650px)"

    srcset="path/image1-650.png,

            path/image1-970.png 1.5x,

            path/image1-1300.png 2x">

  <source

    media="(min-width: 465px)"

    srcset="path/image1-465.png,

            path/image1-565.png 1.5x

            path/image1-650.png 2x">

  <img

    src="path/image1-650.png"

    srcset="path/image1-970.png 1.5x,

            path/image1-1300.png 2x"

    alt="새 보다 자유롭게 블로그">

</picture>

코드를 보면 바로 알겠지만 화면 크기에 따라 알아서 적당한 크기의 파일을 로드합니다. 

주의 할 점은 모든 브라우저가 picture 엘레멘트를 지원하는 것이 아니므로 그런 경우에는 picture 엘레멘트는 무시되고 img 엘레멘트가 나타나야 합니다.

--- html 관련 카테고리가 없어서 우선 여기에 저장한다. 나를 위한 저장.