[SEO] <picture> 태그와 이미지 포맷 최적화

들어가며

 많은 사용자들이 페이지의 로딩 속도가 느린 경우에 높은 이탈율을 보이곤 합니다. 특히 많은 이미지가 포함된 웹 사이트에서 로딩 속도가 느린 것을 볼 수 있습니다.

 이렇듯 이미지 최적화는 초기 사용자 이탈율을 줄일 수 있는, 웹 개발에서 빼놓을 수 없는 중요한 작업입니다. 사용자 환경에 따라 적합한 포맷과 크기의 이미지를 제공하면 웹사이트의 성능, SEO, 그리고 사용자 경험이 모두 향상됩니다. 이번 포스팅에서는 특히 포맷 최적화를 위한 <picture> 태그의 강점을 알아보고자 합니다.

 

이미지 포맷 최적화의 중요성

이미지 포맷 최적화의 중요성은 아래와 같습니다. 

 

• 파일 크기 감소 
  이미지 포맷은 같은 품질의 이미지를 얼마나 압축할 수 있는지를 결정합니다.
  • WebP는 JPG 대비 최대 30% 더 작은 파일 크기를 제공합니다.
  • AVIF는 JPG 대비 최대 80% 더 작은 파일 크기를 제공합니다.
• 브라우저 지원 차이 
  최신 포맷(WebP, AVIF)은 모든 브라우저에서 지원되지 않으므로, 상황에 맞는 포맷을 제공해야 합니다.
• 빠른 로딩 속도 
  빠른 로딩 속도는 좋은 사용자 경험과 사용자 만족도, SEO 점수로 이어집니다.

 

<picture> 태그로 포맷 최적화하기

 위 내용을 미루어보면 각 브라우저가 사용할 수 있는 제일 최신 압축 포맷을 사용하는 것은 매우 중요한 문제입니다. 다행인 점은 <picture> 태그를 사용하면 현재 브라우저에서 지원되는 가장 최신 압축 포맷을 자동으로 설정합니다.

 

 예를 들어 avif를 지원하지 않는 브라우저는 webp를, webp를 지원하지 않는 브라우저를 jpg를 로드할 수 있도록 설정할 수 있습니다.

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="설명 텍스트">
</picture>

 

 

• <source>: 브라우저가 지원하는 포맷을 기준으로 우선순위를 지정합니다.
• <img>: 브라우저가 지정된 포맷을 모두 지원하지 않을 경우 기본 이미지로 대체합니다.

 

<picture> 태그를 사용해야 하는 이유 

1. 압축 포맷 및 디바이스 최적화
   압축 포맷뿐만 아니라 디바이스와 해상도에 따른 반응형 이미지를 동시에 제공할 수 있습니다.
2. SEO 및 성능 개선
   이미지 로드 속도를 줄이는 것으로 SEO 점수 향상까지 가져갈 수 있습니다.
3. 데이터 절약 
   더 작은 파일 크기의 이미지를 로드함으로써 불필요한 사용자 데이터 사용량을 줄이고 모바일 환경에서 좋은 사용자 경험을 제공합니다.