WordPress Core에서 반응형 이미지의 중요성

반응형 이미지의 인기가 높아지고 있으며 누구도 무시할 수 없는 부분입니다. 그러나 WordPress와 같은 인기 있는 CMS에서 동일한 기능을 사용하는 것은 어려운 경험이 될 수 있습니다. 사용자가 테마 내에서 기능을 작성하는 것이 가능하더라도 작업은 시간이 많이 소요될 수 있습니다. 그러나 WordPress 4.4가 도입된 이후로 상황이 크게 변경되어 개발자와 관리자가 테마에 반응형 이미지 기능을 포함하는 것이 훨씬 쉬워졌습니다.

주요 하이라이트는 WordPress 코어 내에서 반응형 이미지 플러그인을 사용할 수 있다는 것입니다. 즉, 사용자는 이제 WordPress 내에서 기본 기능으로 제공되는 반응형 이미지 지원을 즐길 수 있습니다. 이 기능이 실제로 어떻게 작동하고 WordPress 사이트의 잠재력을 활용하기 위해 어떻게 주의 깊게 사용할 수 있는지 자세히 살펴보겠습니다.

기능의 기능

WordPress 4.4로 업데이트하면 모든 콘텐츠와 이미지는 srcset 및 크기 속성으로 구성됩니다. 이는 주로 실제 요청된 이미지 크기를 유지하기 위해 모든 이미지 크기의 가용성을 보장하기 위한 것입니다. 종횡비가 원래 요청된 이미지와 다른 경우 사용자 지정 자르기는 srcset 속성에서 제외됩니다. 동시에 wp-get-attachment-image 함수를 통해 이미지를 호출하면 반응형 이미지가 반환됩니다.

반응형 이미지는 미디어 업로더를 통해 WordPress에 이미지가 업로드될 때마다 발생하는 자동 기능 때문에 WordPress 4.4에서 배경 기능으로 작동합니다. 이 자동 백그라운드 프로세스로 인해 페이지에 이미지가 나타날 때마다 srcset 및 크기 속성이 표시됩니다. 이는 새로운 반응형 이미지 기능에 가시적인 인터페이스가 없음을 의미합니다. 표시되는 인터페이스가 없기 때문에 채우기 목적을 위한 양식 또는 확인 목적 및 토글 목적을 위한 옵션의 존재와 같은 옵션을 사용할 수 없습니다.

테마 개발자는 테마의 functions.php 파일을 편집하여 이미지에서 정확한 크기 속성을 사용할 수 있도록 해야 합니다. 이미지 태그에 있는 srcset 및 크기 속성이 실제로 WordPress에서 반응형 이미지를 나타내는 것이기 때문에 고려하는 것이 중요합니다. WordPress가 srcset 속성 내에 사용 가능한 모든 크기를 포함할 때 잘 수행되지만 가장 예측하기 어려운 것은 크기 속성입니다. 사용 가능한 모든 뷰포트에서 이미지가 얼마나 넓은지 브라우저를 설명하는 것은 크기 속성의 의무입니다. 그러나 결과는 사용자의 테마에서 사용 가능한 스타일에 따라 다를 수 있으며 합리적인 기본값인 'sizes='(최대 너비: {{이미지 너비}}) 100 vw, {{이미지 너비}}를 제공합니다.

크기 속성을 사용하여 사용자는 특히 두 가지를 수행할 수 있습니다. 첫째, 사양과 관련하여 이제 전제 조건이 된 이미지에서 유효한 크기 속성의 가용성을 보장합니다. 둘째, 브라우저가 요청한 원래 너비보다 더 큰 이미지 소스를 제공하는 것을 방지합니다. 그러나 CSS가 완전히 다른 뷰포트 너비에서 이미지 크기를 조작할 때마다 기본 크기 속성의 이점이 줄어듭니다.

테마 개발자는 모든 중단점 동안 완벽한 크기 속성의 전달을 보장하기 위해 필터 후크를 사용하여 각 이미지에 해당하는 크기 속성을 조정할 수 있습니다. 따라서 정확한 반응형 이미지 지원을 제공할 때 테마가 기본 크기 속성에 의존하지 않도록 하는 것이 바람직합니다. 주된 이유는 뷰포트의 크기가 원래 요청된 이미지 크기에 비해 작은 경우 브라우저가 기본 크기 속성으로 이미지 소스를 수정하거나 변경할 수 없다는 사실입니다. 그러나 이미 중단점에서 CSS로 이미지가 변경된 경우 소스도 변경할 수 없습니다.

WordPress Code Base에 액세스할 수 있는 개인이거나 테마 개발자인 경우 정확한 크기 속성을 제공하기 위해 테마의 이미지를 필터링하는 것이 더 필요합니다. 이것은 새 버전이 출시된 후 수행해야 하는 가장 중요한 작업입니다.

테마에 대한 반응형 이미지 구성

테마에 맞게 조정된 반응형 이미지 지원 수준을 제공하는 데 사용할 수 있는 새로운 기능과 함께 여러 가지 새로운 후크가 도입되었습니다. srcset 속성에 포함되어야 하는 이미지의 최대 너비는 테마 개발자가 max_srcset_image_width 훅을 통해 필터링할 수 있습니다. 이미지의 srcset 속성은 wp_calculate_image_srcset 에 연결하여 필터링할 수 있으며, 크기 속성은 wp_calculate_image_sizes 필터링을 통해 테마의 이미지 중단점에 맞도록 테마 개발자가 사용자 지정할 수 있습니다.

콘텐츠 이미지는 wp_calculate_image_sizes로 필터링할 수 있는 반면 게시물 썸네일/추천 이미지는 wp_get_attachment_image_attributes 함수로 필터링할 수 있습니다. 동일한 상황에서 콘텐츠 이미지가 표시되는 방식과 다른 중단점에서 특집 이미지가 표시되는 방식이 완전히 다르기 때문에 두 가지 다른 기능이 필요합니다. 따라서 WordPress 4.4는 테마 개발자에게 다양한 방식으로 이미지를 필터링할 수 있는 향상된 기회를 제공하여 가능한 한 구체적입니다.

이 모든 것은 사용자와 테마 개발자가 WordPress 4.4 업데이트를 통한 반응형 이미지 지원으로 달성할 수 있는 즉각적인 이점을 강조합니다. 또한 테마 개발자는 뷰포트 크기 및 픽셀 밀도에 관계없이 깨끗하고 선명한 이미지를 포함할 수 있으므로 웹 페이지에서 더 큰 이미지를 로드하는 데 필요한 추가 시간을 피할 수 있으므로 웹 사이트의 성능이 향상됩니다. 사용자를 위한 자동 절차이지만 테마 개발자는 테마 내 functions.php 파일에서 시간을 들여 이미지 크기 속성을 조정할 책임이 있습니다. 또한 반응형 이미지 플러그인을 만들고 병합하는 것은 팀의 노력이 더 많다는 점을 염두에 두어야 합니다.