배경 이미지의 srcset인 이미지 세트를 사용한 React형 배경 이미지

반응형

소스 세트는 웹 사이트가 더 빨리 로딩되도록 도와줍니다. 우리는 화면 크기, 픽셀 밀도 또는 네트워크 속도에 맞춰 동일한 이미지의 대체 버전을 브라우저에 제공하기 위해 그것들을 다양한 방법으로 사용할 수 있습니다.

배경 이미지의 소스 세트

이미지 세트 속성을 통해 CSS의 배경 이미지에 대해서도 동일한 작업을 수행할 수 있습니다. 이 기능은 수년 동안 요청되었지만 상위 선택기 또는 컨테이너 쿼리와 같은 다른 최신 CSS 기능과 같은 과대 포장되지 않았습니다.

단계별로 이미지 세트 이해

 

먼저 소스 세트를 이해하고 있는지 확인합시다.

소스 세트란 무엇이며 사용 방법은 무엇입니까?

일반적인 사용 사례에서는 다양한 이미지 버전을 제공하고 적절한 화면 크기에 대한 권장 사항을 추가하지만 로드할 이미지는 브라우저에 따라 결정됩니다.

출처: csswg.org

이미지 파일 제공

 

예를 들어 가로 2048픽셀, 높이 1536픽셀의 풍경 사진을 이미지 요소에 넣기 시작합니다. 디테일이 많은 고해상도 사진답게 파일 크기는 557.7kB로 대략 0.5메가바이트에 달한다.

우리는 이 사진을 우리의 웹사이트에 보여주기 위해 이미지 요소를 사용할 것입니다. 이미지 소스(이미지 파일의 URL)와 원본 이미지 치수(너비와 높이)를 지정해야 합니다.

<img
  src="large-landscape-2048x1536.jpg"
  width="2048"
  height="1536"
  alt="landscape"
>
    ```

    다음 스타일시트를 추가하면 가로 뷰포트가 원래 이미지 너비보다 작을 때 브라우저가 이미지 및 해당 페이지의 다른 모든 이미지 크기를 비례적으로 조정합니다.

    ```js
    img {
      max-width: 100%;
        height: auto;
        }
        ```

        <div class="content-ad"></div>

        의도대로 동작하는지 테스트할 수 있습니다.

        ### 하지만 대역폭 낭비라니!

        이것은 시각적인 방식으로 반응하지만, 작고 오래된 휴대 전화에서도 브라우저는 여전히 0.5 메가바이트의 데이터인 동일한 큰 이미지 파일을 로드하지만, 작은 화면에 동일한 이미지의 축소된 버전을 표시할 수 있습니다.

        ![Same large image on a small mobile phone screen](https://res.cloudinary.com/practicaldev/image/fetch/s--hxQ3eIyW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/piq1saqjg7k9fh23bly4.jpg)

        ### 여전히 보기 좋은 훨씬 더 작은 이미지 파일

        <div class="content-ad"></div>

        모바일 화면이 326 CSS 픽셀이라면 CSS 픽셀당 2개의 장치 픽셀 해상도에서 화면을 채울 750 x 536 픽셀의 이미지가 필요합니다. 이미지를 해당 크기로 축소하고 고품질 JPEG 파일로 저장(JPEG 화질이 80으로 설정됨)해도 새 이미지 파일은 90킬로바이트만 차지하지만 이미지는 여전히 좋아 보입니다.

        만약 당신이 너무 야심적이지 않다면, 코데펜의 자산 서버에서 추가 이미지 처리 후 70kB 파일도 마찬가지입니다.

        ![large-landscape-750x536.jpg](https://res.cloudinary.com/practicaldev/image/fetch/s--79IrxD4v--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://assets.codepen.io/2332100/large-landscape-750x536.jpg)

        ### 이미지 요소에 소스 세트 및 크기 추가

        이제 화면 크기가 750(CSS) 픽셀보다 크지 않으면 더 작은 버전을 사용하도록 브라우저에 지시하겠습니다. 기존 이미지에 srcset 속성을 추가할 수 있습니다.

        <div class="content-ad"></div>

        ```js
        <img
          src="large-landscape-2048x1536.jpg"
            srcset="small-landscape-750x536.jpg 750w,
                      large-landscape-2048x1536.jpg 20480w"
                        width="2048"
                          height="1536"
                            alt="landscape"
                            >
                            ```

                            좀 더 복잡한 정의를 위해 이미지 주위에 그림 요소를 래핑하고 각각 고유한 srcset 속성을 가진 여러 소스 요소를 추가할 수 있습니다. 화면 너비 및 픽셀 밀도와 같은 동일한 이미지 요소에 대해 서로 다른 측면의 반응성 이미지를 결합해야 하는 경우 유용할 수 있습니다.

                            ## 반응성 배경 이미지

                            왜 전혀 배경 이미지를 사용하지? 글쎄요, 객체 맞춤 속성 이전과 오늘날처럼 배치와 z 인덱스를 사용하여 컨텐츠를 계층화하기 전의 옛날에는 배경 이미지가 영웅 배너를 코딩하는 데 매우 유용한 기술이었고 여전히 페이지와 요소에 선택적 장식을 추가하는 쉬운 방법을 제공합니다.

                            부드럽고 유연한 비주얼 스타일링에도 불구하고 모바일 대역폭을 절약하기 위해 배경 이미지를 최적화하는 것은 불가능했으며 이미지 세트 속성의 "매우 제한적인 지원"에 대한 경고는 웹 개발자들 사이에서 인기를 얻는 데 도움이 되지 않았다.

                            <div class="content-ad"></div>

                            ### 배경 이미지에 이미지 세트 사용

                            img 및 소스 요소에 srcset 속성을 사용하는 방법을 알고 있다면 배경-이미지 URL에 대한 이미지 세트를 정의하는 것은 쉽습니다.

                            기존 브라우저에서 제한된 이미지 세트 지원의 단점은 픽셀 폭 해상도를 사용할 수 없어 픽셀 밀도(1x, 2x) 등을 셀렉터로 설정해야 한다는 점이다.

                            이미지 세트를 단일 URL의 대체품으로 사용할 수 있습니다.

                            ```js
                            .landscape-background {
                            background-image: url(large-landscape-2048x1536.jpg);
                            }
                            ```

                            <div class="content-ad"></div>

                            ...그럼...

                            ```js
                            .box {
                              background-image: image-set(
                                  url("small-landscape-750x536.jpg") 1x,
                                      url("large-landscape-2048x1536.jpg") 2x);
                                      }
                                      ```

                                      브라우저 호환성을 극대화하기 위해 단일 이미지 URL뿐만 아니라 웹킷 수정 버전을 추가해야 합니다. 현재 크롬 브라우저는 리플렉스되지 않은 버전을 지원하지 않습니다.

                                      ```js
                                      .box {
                                        background-image: url("small-landscape-750x536.jpg");
                                          background-image: -webkit-image-set(
                                              url("small-landscape-750x536.jpg") 1x,
                                                  url("large-landscape-2048x1536.jpg") 2x);
                                                    background-image: image-set(
                                                        url("small-landscape-750x536.jpg") 1x,
                                                            url("large-landscape-2048x1536.jpg") 2x);
                                                            }
                                                            ```

                                                            ### W 유닛을 통한 점진적 향상

                                                            <div class="content-ad"></div>

                                                            CSS 4 이미지 초안은 미래에 폭과 높이 단위를 도입하는 것을 이미 제안했다:

                                                            인용된 "우리는 추가해야 한다"는 브라우저 벤더가 CSS 엔진에 기능을 추가해야 한다는 것을 의미하지만, 웹 개발자로서 우리는 브라우저가 실제로 그들을 지원하기 전에 코드에 차원을 추가해야 한다는 것을 의미하기도 한다.

                                                            선택적 방식으로 새로운 기능을 사용하는 점진적 개선 기능을 사용하여 단순히 너비 기반 이미지 세트를 사용하여 다른 줄을 추가할 수 있습니다. 잘못된 값을 포함하는 경우(현재) 무시되지만 브라우저가 새 구문을 구현하기 시작하면 작동합니다.

                                                            마지막으로, 이미지가 로드되기 전에 또는 어떤 이유로 이미지가 로드되지 않는 경우 표시되는 정적 배경색을 추가할 수 있습니다.

                                                            ```js
                                                            .box {
                                                              background: skyblue;
                                                                background-image: url("small-landscape-750x536.jpg");
                                                                  background-image: -webkit-image-set(
                                                                      url("small-landscape-750x536.jpg") 1x,
                                                                          url("large-landscape-2048x1536.jpg") 2x);
                                                                            background-image: image-set(
                                                                                url("small-landscape-750x536.jpg") 1x,
                                                                                    url("large-landscape-2048x1536.jpg") 2x);
                                                                                      background-image: image-set(
                                                                                          url("small-landscape-750x536.jpg") 750w,
                                                                                              url("large-landscape-2048x1536.jpg") 20480w);
                                                                                              }
                                                                                              ```

                                                                                              <div class="content-ad"></div>

                                                                                              Firefox 96은 접두사가 없는 이미지 세트를 지원하지만 750w와 2048w는 여전히 잘못된 값으로 인식되며 밀도 값이 있는 이미지 세트로 돌아갑니다.

                                                                                              ![Image description](https://res.cloudinary.com/practicaldev/image/fetch/s--YJdaOe6_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qzqto8icd2a1eioyr0d.png)

                                                                                              Internet Explorer(인터넷 익스플로러)는 여전히 첫 번째 줄, 이미지 세트를 제외한 배경 이미지를 인식하므로 모든 브라우저에 멋진 디스플레이와 점진적인 브라우저의 성능을 최적화할 준비가 된 것으로 보입니다.

                                                                                              다음은 NAT의 전체 데모 코드입니다.

                                                                                              ## CSS의 다음 계획은?

                                                                                              <div class="content-ad"></div>

                                                                                              읽어줘서 고맙고, 조심해요, 앞으로 더 많이 올 거예요!