Drupal 9에서 반응형 이미지 설정 - 단계별 가이드
게시 됨: 2022-07-262010년 초 Jason Grigsby는 이미지의 너비를 백분율로 설정하는 것만으로는 충분하지 않으며 더 나은 사용자 경험(src)을 위해 이러한 이미지의 크기를 조정해야 한다고 지적했습니다. 그에 따르면 더 작은 화면에서 적절한 크기의 이미지를 제공하면 이미지 무게의 75% 이상을 절약할 수 있습니다. 그 이후로 반응형 이미지에 대한 논쟁은 번거로움 없이 완벽하고 반응형 이미지를 렌더링할 수 있는 최상의 솔루션을 찾는 것으로 발전했습니다.
Drupal 9는 반응형 이미지를 위한 즉시 사용 가능한 솔루션을 제공하는 놀라운 일을 합니다(Drupal 8 이후). 반응형 이미지가 Drupal 9에서 작동하는 방식에 대해 자세히 알아보고 간단한 단계별 프로세스를 사용하여 이를 구현하는 방법을 알아보세요.
Drupal 9의 반응형 이미지
혼란스러우면 브라우저에 맡기십시오. 그리고 이것이 바로 Drupal 9가 Breakpoints 모듈과 Responsive images 모듈의 도움으로 하는 일입니다.
그러나 먼저 중단점이란 무엇입니까? 장치에 가장 최적의 이미지 크기를 제공하려면 CSS에서 중단점이라고 하는 다양한 화면 크기를 정의해야 합니다. 물론 모든 장치를 포함할 수는 없지만 대부분의 장치를 포함할 수 있는 대략적이고 합리적인 크기를 지정해야 합니다.
Breakpoint 모듈은 Drupal 9 코어에 있으며 기본 제공 테마와 함께 사용할 수 있는 다양한 뷰포트의 높이와 너비가 미리 구성되어 있습니다. 사용자 정의 테마의 중단점 yml 파일에도 자신만의 중단점을 추가할 수 있습니다.
Drupal 9의 반응형 이미지 모듈은 사진 태그를 사용하여 원본 이미지의 중단점을 기반으로 완벽한 반응형 이미지를 렌더링합니다. 이전에 Drupal 7에 있던 Picture 모듈은 이제 Drupal 9의 새로운 반응형 이미지 모듈입니다.
문제
웹 개발에서 이미지의 주요 문제 중 하나는 브라우저가 이미지에 대해 아무것도 모르고 CSS와 자바스크립트가 로드될 때까지 다른 화면의 뷰포트와 관련하여 어떤 크기의 이미지가 렌더링되는지에 대해 단서가 없다는 것입니다.
그러나 브라우저는 뷰포트의 크기와 화면의 해상도를 포함하여 이미지가 렌더링되는 환경에 대해 알 수 있습니다.
해결책
앞서 언급했듯이 반응형 이미지는 기본적으로 이미지 스타일 선택을 기반으로 최상의 이미지를 선택하도록 브라우저에 알리는 주요 역할을 하는 크기 및 srcset 속성을 갖는 그림 요소를 사용합니다.
Drupal 9는 핵심에서 반응형 이미지 모듈을 제공하는 데 큰 역할을 했습니다. 이렇게 하면 브라우저가 화면 해상도가 낮은 장치에 대해 더 작은 크기의 이미지를 다운로드하는 데 도움이 되므로 웹 사이트 로드 시간과 성능이 향상됩니다.
재현 단계
- 반응형 이미지 및 중단점 모듈을 활성화합니다.
- 프로젝트 테마에 대한 중단점을 설정합니다.
- 반응형 이미지의 이미지 스타일 설정
- 테마에 대한 반응형 이미지 스타일 만들기
- 반응형 이미지 스타일을 이미지 필드에 할당합니다.
1단계: 반응형 이미지 및 중단점 모듈 활성화
두 모듈 모두 Drupal 9 코어의 일부이므로 설치하거나 다른 모듈을 추가할 필요가 없습니다. 중단점 모듈이 표준 프로필과 함께 설치되므로 반응형 이미지 모듈을 활성화하기만 하면 됩니다. 그렇지 않은 경우 중단점 모듈을 활성화합니다.
모듈을 활성화하려면 관리->확장으로 이동하여 모듈을 선택하고 활성화합니다.
2단계: 프로젝트 테마에 대한 중단점 설정
테마의 중단점을 설정하는 것은 Drupal 9에서 반응형 웹사이트를 구축하는 데 가장 중요한 부분입니다.
comminfo.phone: label: phone mediaQuery: '(max-width: 767px)' weight: 0 multipliers: -1x -2x comminfo.tablet: label: tablet mediaQuery: '(min-width: 768px) and (max-width: 1024px)' weight: 1 multipliers: -1x -2x comminfo.desktop: label: desktop mediaQuery: '(min-width: 1025px) and (max-width: 1250px)' weight: 2 multipliers: -1x comminfo.lg-desktop: label: lg-desktop mediaQuery: '(min-width: 1251px)' weight: 3 multipliers: -1x Bartik, Seven, Umami 또는 Claro와 같은 핵심 테마를 사용하는 경우 이미 중단점 파일이 있으므로 새로 만들 필요가 없습니다.
그러나 프로젝트에 사용자 지정 테마를 사용하는 경우 테마 디렉토리에서 찾을 수 있는 "yourthemename.breakpoints.yml" 파일에서 중단점을 정의하는 것이 중요합니다. 일반적으로 "/themes/custom/ 당신의 테마 이름" .
각 중단점은 이미지를 미디어 쿼리에 할당합니다. 예를 들어, 모바일에서 렌더링되는 이미지는 너비가 768픽셀보다 작을 수 있는 반면 중간 화면의 너비는 768픽셀에서 1024픽셀 사이입니다.
각 중단점에는 다음이 포함됩니다.
- label: 중단점에 대해 제공된 유효한 레이블입니다.
- mediaQuery: 이미지가 렌더링되는 뷰포트입니다.
- 무게: 표시 순서입니다.
- 승수: 뷰포트의 장치 해상도 측정. 일반적으로 1x는 표준 크기에 사용되고 2x는 레티나 디스플레이에 사용됩니다.
3단계: 반응형 이미지의 이미지 스타일 설정
이제 각 중단점에 대한 이미지 스타일을 만들어 보겠습니다. Admin -> Config -> Media -> Image-styles 에서 자신만의 이미지 스타일을 구성할 수 있습니다.
'이미지 스타일 추가'를 클릭합니다. 이미지 스타일에 유효한 이름을 지정하고 잘린 이미지를 제공하는 크기 조정 및 자르기 효과를 사용하십시오. 이미지가 늘어나면 다른 뷰포트에 대해 여러 이미지 스타일을 추가합니다.
4단계: 테마에 대한 반응형 이미지 스타일 만들기
여기에서 브라우저에 여러 이미지 스타일 옵션을 제공하고 브라우저가 많은 중에서 가장 좋은 것을 선택하도록 합니다.
새로운 반응형 Drupal 9 이미지 스타일을 생성하려면 다음으로 이동하십시오.
홈 -> 관리자 -> 구성 -> 미디어 -> 반응형 이미지 스타일 에서 '반응형 이미지 추가'를 클릭합니다.
반응형 이미지 스타일에 유효한 이름을 지정한 다음 중단점 그룹을 선택합니다(테마 선택). 다음으로 나열된 중단점에 이미지 스타일을 할당합니다.
이미지 스타일 구성에는 여러 옵션이 있습니다.
- 단일 이미지 스타일 선택: 특정 화면에서 렌더링될 단일 이미지 스타일을 선택할 수 있는 곳
- 다중 이미지 스타일 선택: 다중 이미지 스타일 을 선택하고 이미지 스타일의 표시 영역 너비를 지정할 수 있습니다.
결국 대체 이미지 스타일 을 선택하는 옵션이 있습니다. 대체 이미지 스타일은 오류가 발생한 경우에만 사이트에 나타나야 합니다.
5단계: 반응형 이미지 스타일을 이미지 필드에 할당
모든 구성이 완료되면 반응형 이미지 스타일을 추가하여 이미지 필드로 이동합니다. 그렇게 하려면 필드의 디스플레이 관리 섹션으로 이동하여 이전에 만든 반응형 이미지 스타일을 선택합니다.
이제 콘텐츠를 추가하고 반응형 이미지 스타일로 페이지에서 결과를 확인하세요.
최종 결과
최소 너비가 1024픽셀인 이미지(대형 장치의 경우).
최소 너비 768px의 이미지(중간 장치용).
최대 너비 767px의 이미지(소형 장치용).
마지막 생각들
이미지 최적화는 반응 속도를 높이고자 하는 웹사이트의 주요 과제였습니다. 이미지 품질을 포기하거나 페이지 로드 시간을 늘려야 합니다. 그러나 Drupal 9 Responsive Images 모듈과 Breakpoints 모듈(이제 핵심입니다!)을 사용하면 이제 다양한 해상도의 중단점에서 이미지 크기를 조정하거나 자를 수 있습니다.
인상적인 반응형 Drupal 웹사이트를 구축할 검증된 Drupal 개발 회사를 찾고 계십니까? 저희가 도와드리겠습니다! 오늘 우리에게 이야기하십시오.