WordPress에서 반응형 이미지 작업

최근까지 WordPress에서 반응형 이미지로 작업하는 것은 정말 어려운 일이었습니다. 사용자가 스스로 기능을 작성하지 않는 한 운이 좋지 않았습니다. 다른 옵션은 플러그인을 구입하거나 다른 해결 방법을 찾는 것이지만 개발자가 활용할 수 있는 핵심 기능이 없었습니다. 반응형 이미지를 지원하지 않고 만든 테마는 성능이 느린 경우가 많았고 다양한 화면 크기에서 사용성이 불안정한 경우가 있었습니다. 이는 고객과 사용자가 좋은 기능과 연관시키는 정확히 속성이 아닙니다.

다행히 WordPress 4.4가 출시되면서 이 모든 것이 변경되었습니다. 이제 반응형 이미지에 대한 기능이 WordPress에 직접 포함되어 개발자가 테마에서도 작업할 수 있습니다. 이것은 반응형 이미지 플러그인을 가져 와서 WordPress 코어의 일부로 만들었습니다.

작동 원리

분명히, 이미 수행하지 않은 경우 첫 번째 단계는 WordPress 4.4로 업데이트하는 것입니다. 업데이트를 완료한 후 사이트의 소스 코드를 보면 사이트의 이미지에 이제 sizes 와 srcset 두 가지 새로운 속성이 있음을 알 수 있습니다. 이러한 속성은 필터링되어 사용 가능한 모든 이미지 크기가 있지만 크기가 원본 이미지와 일관되게 유지됨을 의미합니다. srcset 속성은 종횡비가 이미지의 원본 버전과 같지 않은 경우 사용자 정의 자르기를 허용하지 않습니다. 이는 사용자의 화면에 표시될 때 이미지 품질이 손상되지 않도록 하기 위한 것입니다.

내부에 들어가서 변경하기

워드프레스는 반응형 이미지를 배경 기능으로 추가했는데, 이는 프로세스가 자동으로 발생함을 의미합니다. 미디어 업로더를 사용하여 이미지를 업로드하면 사용자의 개입 없이 해당 이미지에 속성이 적용됩니다. 이는 이미지 최적화에도 유용합니다.

배경 기능이기 때문에 반응형 이미지는 사용자 인터페이스와 함께 제공되지 않습니다. 개발자는 이미지에 정확한 sizes 속성이 부여되도록 각 테마에서 functions.php 파일을 수정할 수 있습니다. 기억하십시오: 반응형 이미지를 참조하려는 경우 sizes 및 srcset 의 이미지 태그 속성을 의미합니다.

기본 속성

이 기능으로 작업을 시작하면 WordPress가 가능한 모든 크기를 찾아 srcset 속성에 추가하는 데 매우 능숙하다는 것을 알 수 있습니다. 불행히도 sizes 속성의 예측 가능성과 관련하여 문제가 발생할 수 있습니다. 이것은 이미지가 모든 디스플레이 화면에서 사용 가능하고 볼 수 있도록 이미지 너비를 브라우저에 전달하는 데 사용되는 속성입니다.

이 속성을 기본값으로 설정하면 몇 가지 방식으로 작동합니다. 첫 번째는 sizes 속성이 각 이미지에 적용되도록 강제한다는 것입니다. 이것은 이제 필수 요구 사항이라는 점을 고려하면 유용합니다. 두 번째는 브라우저가 이미지의 원본 크기보다 더 넓은 이미지 소스를 사용하는 것을 허용하지 않는다는 것입니다. 디스플레이 화면 너비(예: 미디어 쿼리)에 따라 이미지 크기를 조정하는 데 사용되는 CSS 코드는 불행히도 이 기본값을 훨씬 덜 유용하게 만들 수 있습니다.

테마 개발자를 위한 필터 후크

이 기본 속성은 CSS 코드로 수정되지 않은 이미지에서만 작동하기 때문에 WordPress는 테마 개발자가 사용할 필터 후크를 만들었습니다. 이 후크를 사용하여 모든 이미지의 sizes 속성을 조정하기만 하면 됩니다. 결과적으로 제공되는 sizes 속성이 모든 상황에서 이상적임을 확신할 수 있습니다.

주의 사항

계속 진행하기 전에 기본 속성 옵션이 좋은 반응형 이미지 기능을 제공하는 최선의 방법이 아니라는 점을 잠시 말씀드리겠습니다. 사실, 이 기본값에 의존하는 테마를 생성하지 않도록 노력해야 합니다. 그 이유는 기본 속성이 표시 영역이 원본 이미지의 크기만큼 크지 않을 때 브라우저가 이미지 소스를 수정하는 것을 방지하기 때문입니다. CSS에 의해 수정되었고 더 큰 이미지가 필요한 경우 브라우저는 소스를 수정할 수도 없습니다.

이미지 필터링

테마 개발자는 정확한 sizes 속성을 가져오기 위해 이미지에서 필터링을 사용할 수 있습니다. 이것은 WordPress 함수 wp_calculate_image_sizes 에 대한 후크를 사용하여 수행할 수 있습니다. 이 기능을 사용하여 현재 테마와 함께 작동하도록 할 수 있습니다. 다른 유형의 이미지에 다른 sizes 속성을 적용하도록 변경할 수 있습니다.

이 릴리스와 함께 제공되는 새로운 기능을 통해 이제 WordPress 미디어 업로더를 사용하여 추가한 모든 이미지에 sizes 및 srcset 속성을 적용할 수 있습니다. 또한 게시물의 이미지에 속성을 추가할 수 있습니다. wp_get_attachment_image_sizes 를 살펴보십시오. 이렇게 하면 테마에 대한 functions.php 파일의 필터를 통해 포착하고 변경할 수 있는 sizes 속성이 반환됩니다. 마찬가지로 wp_get_attachment_image_srcset 은 srcset 속성에 대해서만 동일한 작업을 수행합니다.

반응형 이미지 및 사용자 정의 테마

이 최신 릴리스와 함께 제공되는 새로운 기능에는 테마 내 반응형 이미지를 효과적으로 지원하는 데 사용할 수 있는 많은 후크가 있습니다. 이러한 후크에는 다음이 포함됩니다.

Wp_calculate_image_sizes – 테마 개발자가 테마에 있는 중단점과 함께 작동하도록 sizes 속성을 조정하는 데 사용할 수 있는 후크입니다.

Max_srcset_image_width – 테마 개발자가 srcset 속성에 있는 이미지의 최대 너비에 따라 필터링하는 데 사용할 수 있는 후크입니다.

W_calculate_image_srcset – 개발자가 srcset 속성에 따라 필터링할 수 있는 기능을 제공하는 후크입니다.

반응형 이미지 지원에 대해 자세히 알아보기

WordPress 개발자 매뉴얼은 이러한 후크를 효과적으로 사용하는 것과 관련하여 더 많은 지침을 제공할 수 있습니다. 수행해야 하는 조사는 이러한 종류의 배후 조정을 수행할 때 편안함 수준에 따라 다릅니다. 이것을 엄밀히 취미로 추구하는 테마 개발자라면 약간의 실험을 해볼 수도 있습니다. 반면에 직업 테마 개발자라면 이 업데이트를 완전히 마스터하는 데 필요한 시간과 리소스에 투자할 수 있습니다.

업데이트의 이점

아직 WordPress를 업데이트하지 않은 경우(또는 관리되는 WordPress 호스트가 아직 업데이트되지 않은 경우) 업데이트할 때 사용자는 몇 가지 큰 혜택을 누릴 수 있습니다. 반응형 이미지 지원은 페이지가 너무 큰 이미지를 끌어내리는 데 시간을 낭비하지 않으므로 페이지 성능을 향상시킬 수 있습니다. 사용자는 또한 이미지 품질이 매우 인상적으로 향상되었음을 알 수 있습니다. 그들은 모든 것에 들어가는 '소시지 만들기'를 보지 않을 것입니다. 대신, 그들은 그것이 잘 작동하는 것을 볼 것입니다.

개발자는 모든 테마에 대한 각 functions.php 파일의 sizes 속성을 조정해야 합니다. 그러나 일단 이 초기 노력을 기울이면 일이 훨씬 쉬워집니다. 학습 곡선을 처리한 후에는 이 새로운 기능을 사용하는 것이 매우 자연스럽게 수행된다는 것을 알게 될 것입니다.

이 새로운 기능을 익히고 사용자 정의 테마에서 작동하는 반응형 이미지 지원을 얻으려면 약간의 연구와 연습이 필요할 수 있습니다. 그러나 개발자 매뉴얼을 자세히 살펴보고 상황을 파악하려는 경우 클라이언트는 성능 및 기능 개선에 대해 진정으로 감사할 것입니다. 이것은 오랜 시간 동안 왔으며 노련한 테마 개발자와 사용자 정의 테마를 유지 관리하는 임무를 맡은 사람들은 이 업데이트에 대해 당연히 흥분하고 있습니다.