Drupal 11.2+에서 AVIF 이미지 지원 도입 및 활용 가이드

핵심 기술: Drupal 11.2 버전부터 AVIF 이미지 형식을 코어 기능으로 지원하게 되었으며, 이는 이미지 최적화를 통해 웹 페이지 성능을 크게 향상시킬 수 있습니다.

기술적 세부사항:
* AVIF의 장점: JPEG 대비 30-50% 작은 파일 크기, 낮은 비트레이트에서도 우수한 품질 유지, 투명도, HDR, 애니메이션 지원.
* Drupal 코어 지원: Drupal 11.2+ 버전부터 GDToolkit을 통해 Image Styles에서 AVIF 변환 기능을 제공합니다.
* 필수 환경: AVIF 지원을 위해서는 PHP 8.1 이상, GD 확장 기능이 libgd 2.3.2 이상 및 libavif와 함께 컴파일되어 있어야 합니다 (phpinfo()에서 확인 가능).
* 구현 방법:
1. Drupal 관리자 페이지에서 Image Styles로 이동합니다.
2. Add effect를 선택하고 Convert to AVIF를 추가합니다.
3. (선택 사항) WebP 또는 JPEG를 위한 폴백(fallback)을 설정하여 호환성을 높입니다.
* 프로덕션 적용: Safari 16 미만 버전과 같이 AVIF를 지원하지 않는 브라우저를 위해 <picture> 태그를 사용하여 폴백 이미지를 제공해야 합니다.
* 추가 모듈: 더 세밀한 압축 레벨 조절이나 자동화된 파이프라인을 위해 AVIF 모듈이나 ImageAPI Optimize AVIF 모듈을 고려할 수 있습니다.
* 브라우저 호환성: Chrome, Firefox, Edge는 AVIF를 지원하며, Safari는 16 버전부터 지원합니다. 구형 Safari/iOS는 지원하지 않으므로 폴백 전략이 필수적입니다.

개발 임팩트: 미디어 콘텐츠가 많은 웹사이트에서 페이지 로딩 속도를 크게 개선하고 사용자 경험을 향상시킬 수 있습니다. 적은 노력으로 높은 성능 향상을 얻을 수 있는 효과적인 방법입니다.

커뮤니티 반응: 글 작성자는 이 기능이 발견되었을 때 매우 유용하다고 언급하며, 다른 개발자들의 AVIF 프로덕션 사용 경험이나 폴백 관리 방법에 대한 피드백을 기다리고 있습니다.