반응형 이미지 최적화하기

srcset 속성

img 태그에 srcset 속성을 사용하면 크기가 다른 여러 이미지를 정의할 수 있어 화면 크기에 가장 잘 맞는 이미지를 자동으로 선택한다.

브라우저 창이 작아져도 굉장히 큰 이미지 하나를 이용해서 보여주고 있어 비효율적이다.

srcset을 활용하면 뷰포트 크기나 기기의 해상도에 따라 최적의 이미지를 선택하여 로드할 수 있게 된다.

📌 w unit을 사용하는 이유

srcset 속성에서 사용되는 w 단위는 이미지의 실제 너비를 나타낸다. 예를 들어, 300w는 이미지의 너비가 300픽셀임을 의미한다.

<img 
  srcset="small.jpg 300w,
          medium.jpg 600w,
          large.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 
         (max-width: 1200px) 50vw, 
         33vw"
  src="default.jpg" 
  alt="Responsive Image">

• srcset: 각 이미지 파일의 URL과 함께 해당 이미지의 너비를 w 단위로 지정. 브라우저는 뷰포트 크기와 기기의 픽셀 밀도에 따라 가장 적합한 이미지를 선택.

• sizes 속성: 브라우저가 srcset에서 어떤 이미지를 선택할지 결정할 때 참고. 뷰포트의 최대 너비에 따라 이미지가 화면의 몇 %를 차지할지 정의.

브라우저는 이를 판단하기 위해서 우리가 사용하는 기기의 pixel density를 확인하는데, 이것은 window.devicepixelRatio 를 이용하게 된다.

window.devicePixelRatio는 사용자가 사용하는 기기의 화면 픽셀 밀도를 나타내는 값이다. 이 값이 2라면, 기기의 물리적 픽셀 2개가 CSS 픽셀 1개로 렌더링된다. 예를 들어, devicePixelRatio가 2인 경우, 브라우저는 300px 대신 600px 이미지를 선택할 수 있다.

사용하는 기기(스크린)의 해상도가 좋으면 브라우저는 우리가 사용하는 화면에서 더 선명한 이미지를 보여주기 위해서 더 큰 이미지를 받아오게 된다.

• 일반 해상도: 기기의 devicePixelRatio가 1일 때, 100x100 픽셀 이미지는 물리적 픽셀 100x100으로 표시됩니다.
• 고해상도: devicePixelRatio가 2인 경우, 같은 100x100 픽셀 이미지가 200x200 물리적 픽셀로 표시됩니다. 이때, 더 많은 픽셀이 사용되므로 이미지가 더 선명하게 보입니다.

w 단위를 사용하면 동일한 이미지의 다양한 해상도 버전을 제공할 수 있으며, 브라우저는 가장 적합한 이미지를 선택하여 로드할 수 있다. 이는 특히 고해상도 디스플레이(예: 레티나 디스플레이)에서 더 선명한 이미지를 제공하는 데 유용하다.

이로 인해 이미지가 더 선명하고 명확하게 표시되며, 필요 이상의 대용량 이미지를 로드하지 않아 성능도 최적화할 수 있다

📌 picture랑 srcset의 차이점

is()

• 함수형 선택자로, 여러 개의 선택자를 한 번에 매칭
• 코드의 중복을 줄이고, 여러 요소에 공통 스타일을 적용
• 브라우저 엔진이 성능을 최적화할 수 있도록 도움
• 전달된 선택자들 중 하나라도 매칭되면 스타일을 적용하기 때문에, 다양한 조건을 가진 요소들을 한꺼번에 스타일링할 때 유용

기본문법

:is(selector1, selector2, selector3, ...)

예시

/* 모든 <h1>, <h2>, <h3> 요소에 동일한 스타일 적용 */
:is(h1, h2, h3) {
    color: blue;
    font-family: Arial, sans-serif;
    margin-bottom: 20px;
}


/* 특정 클래스나 태그를 가진 요소들에 동일한 스타일 적용 */
:is(.btn-primary, .btn-secondary, button) {
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #007BFF;
    color: white;
}

❓:is(h1, h2, h3) 와 h1, h2, h3 의 차이
두 코드의 기능은 동일하지만 몇 가지 미묘한 차이점이 있다.

1. 우선순위(Priority)

• :is() 선택자: 특이성(Specificity) 계산에서 주어진 선택자들 중 가장 낮은 특이성을 가집니다. 예를 들어, :is(h1, h2, h3)는 단순히 요소 선택자(h1, h2, h3)로만 계산되므로, 특이성이 더 낮습니다. 따라서, 다른 더 특이성이 높은 선택자가 있을 경우, 해당 선택자가 우선하게 됩니다.
• 일반 선택자: h1, h2, h3를 직접 나열하는 방식은 :is()를 사용한 방식과 동일한 특이성을 가집니다. 다만, 여기서는 각각의 선택자가 별도로 평가되기 때문에 :is()와는 약간의 차이가 있을 수 있습니다.

2. 지원 및 호환성

• :is() 선택자: 비교적 최신 CSS 기능이므로, 모든 브라우저에서 완전히 지원되는 것은 아니었지만, 현재는 대부분의 최신 브라우저에서 잘 지원됩니다. 오래된 브라우저나 특정 환경에서는 호환성 문제가 있을 수 있습니다.
• 일반 선택자: 전통적인 방법이기 때문에 모든 브라우저에서 잘 지원됩니다. 호환성 걱정 없이 사용할 수 있습니다.