이미지 최적화에 대한 명확한 가이드

원문을 토대로 작성하였습니다. - https://www.builder.io/blog/the-definitive-guide-to-image-optimization

✅ 이미지 최적화(Image optimization)란? 

가장 작은 크기를 유지하면서 최고 품질의 이미지를 제공하는 과정이다. 즉, 이미지를 최적화하면 최적의 형식, 크기, 해상도로 이미지를 만들고 화면에 표시하여 사용자 참여를 높일 수 있다.

 

🤔 이미지 최적화를 하는 이유

선명하고 아름다운 이미지는 좋은 사용자 경험 제공을 위한 핵심요소이지만 품질을 위해 속도를 희생할 수 없고, 반대의 경우도 마찬가지이다.

이미지 최적화의 이점

• 사용자 경험 향상: 사용자들은 이미지가 로드될 때까지 기다리려고 하지 않는다. 그리고 중요하거나 긴급한 콘텐츠를 포함하는 이미지인 경우, 기다릴 시간이 없을 수도 있다. 어떤 경우에도, 사용자들이 가능한 한 적은 장애물로 페이지에서 원하는 작업과 예상되는 작업을 완료할 수 있도록 해야 한다.
• 페이지 성능 향상: 크고, 최적화되지 않은 이미지는 페이지 로드 속도를 저하시킨다. 
• 가시성 향상: 이미지 최적화는 SEO의 장점도 있다. 최적화된 이미지는 검색 엔진에 맥락 정보를 제공하고 시각적 텐츠에 더 쉽게 접근할 수 있도록 하여 구글의 이미지 검색 결과 상단에 노출될 수 있도록 보장해 준다. 또한, 웹 페이지가 더 빨리 로드될 때, 구글 검색 알고리즘은 더 많은 가시성을 보상한다.

🟢 이미지 최적화를 위한 모범 사례

🟡 <img> 태그 사용하기

 

HTML의 <img> 태그와 CSS background-image 속성은 모두 시각적 콘텐츠를 표시하는 비슷한 결과를 보여주지만 동일하지 않다.

 

<img> 태그를 사용하면 사용자가 이미지 콘텐츠를 사용하는 방법을 조금 더 제어할 수 있다. 특히 아래와 같은 경우에 적합하다.

• 이미지가 단지 장식의 역할이 아닌, 콘텐츠의 일부일 때
• 사용자가 페이지를 인쇄할 수 있고, 당신도 이미지가 인쇄되기를 원할 때
• 경고 아이콘과 같이, 이미지에 중요한 의미가 있고, 이러한 맥락이 스크린 리더와 같은 보조 기술에 전달되기를 원할 때
• 이미지가 SEO의 이점을 얻기를 원할 때. 구글은 배경 이미지를 자동으로 인덱싱 하지 않는다.
• 브라우저에 의존하여 텍스트 크기에 비례하여 이미지 크기를 조정하고 렌더링 할 때

또한 <img> 태그는 srcset이나 sizes와 같은 유용한 최적화 속성을 제공한다. (이후에 설명)

🟡 차세대 포맷 활용

WebP와 같은 차세대 형식을 이용하여 최적화할 수 있다. WebP는 JPEG, PNG보다 파일 크기가 최소 25~30% 작다. 기존 형식에 비해 로드 속도가 더 빠를 뿐만 아니라 모바일 데이터를 적게 소모한다. 예로, 페이스 북은 WebP 이미지로 전환하면 JPEG의 경우 파일 크기가 25~35%, PNG의 경우 80% 감소한다는 사실을 발견했다.

 

모든 웹 브라우저가 WebP를 지원하는 것은 아니지만 <source>와 <picture> 태그를 사용하면, 이전 버전과 호환이 되어 모든 브라우저에서 사용할 수 있다.

🟡 alt text로 이미지의 접근성 높이기

대체 텍스트, Alternative text(alt description 또는 alt text라고도 함)는 그래픽의 기능과 모양에 대해 정확하고 맥락에 맞는 설명을 제공한다. 이것은 사용자 경험을 향상하고, 장애가 있는 사용자의 접근성을 높여주는 데에도 중요하다. 디지털 접근성을 높여주는 것 외에도, 구체적으로 잘 작성된 alt text는 이미지 검색 순위를 높이고 웹 사이트에 더 많은 트래픽을 끌어들이는 데에 도움이 된다. 또한 이미지가 충분히 빠르게 로드되지 않더라도 이미지 위로 마우스를 가져가서 어떤 이미지인지 알 수 있어야 한다.

 

alt text가 중요한 것처럼 장식용으로만 사용되는 이미지에 표시해 두는 것도 중요하다. 콘텐츠 일부가 아닌 페이지 외관을 향상시키기 위해서만 존재하는 배경 이미지에는 role 속성으로 "presentation" 값이 지정되어야 한다.

 

🟡 scrset으로 반응형 이미지 만들기

고정된 크기의 이미지를 생성하는 것이 아닌 srcset으로 반응형 이미지를 생성할 수 있다. srcset 속성을 다양한 너비의 다양한 그래픽 옵션과 함께 사용하면 사용자들의 단말기 화면 너비에 따라 서로 다른 이미지를 제공해 줄 수 있다. 이는 웹사이트에 접근하는 방법과 관계없이 성능이 향상되고, 데이터 낭비를 줄여 좋은 UX를 보장한다.

 

x 대신 w 단위를 사용하는 것이 좋다. x 단위는 픽셀의 밀도를 다루고 고정 크기의 이미지에 더 적합하다. 반면 w 단위는 화면 너비에 따라 올바른 이미지를 가져오도록 해준다. 예를 들어,  <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src=”...” alt=”...”>  는 사용자의 해상도에 따라서 올바른 이미지를 표시하라고 브라우저에게 알려준다.

🟡 sizes로 해상도 전환 지원

브라우저는 첫 번째 로드에서 이미지를 미리 가져올 때, 렌더링 할 이미지의 크기를 알지 못한다. <img> 태그에 sizes 속성을 명시하지 않는 이상, 브라우저는 이미지가 페이지 전체 너비를 차지한다고 가정하게 되고 결국 지나치게 큰 이미지를 가져오게 된다.

sizes 속성은 이미지의 너비가 몇 픽셀인지 브라우저에 미리 알려주는 유용한 방법이다. sizes 속성을 통해 이미지에 대한 특정 조건과 해당 조건이 참일 경우 이미지가 차지할 슬롯 너비를 지정할 수 있다. 픽셀로 이미지의 절대 너비를 제공하는 대신에, vw 단위를 사용하여 화면에서 차지할 예상 비율을 지정할 수도 있다.

🟡 aspect ratio(종횡비) 유지하기

화면 크기에 따라 이미지 크기를 조정할 때 이미지의 종횡비를 유지하는 것을 잊으면 안 된다. 완전히 반응하도록 이미지를 최적화하지 않으면 예기치 않은 레이아웃 변경(layout shift)이 발생할 수 있다. 페이지의 이미지 위치나 크기가 변경되면 주변 콘텐츠의 위치에 영향을 미칠 수 있다. 이는, 이해도, 사용성 및 전반적인 사용자 경험에 영향을 미친다.  

[역주] 레이아웃 시프트 (layout shift) : 느린 이미지 로딩으로 화면 레이아웃이 갑자기 변경되거나 밀리는 현상

HTML에서 이미지의 너비와 높이를 지정하고, 올바른 CSS 너비와 결합하고 CSS 높이를 "auto"로 설정하면 레이아웃 시프트를 쉽게 최소화할 수 있다. 추가로 CSS의 object-fit 속성을 활용해도 좋다. 이 속성으로 이미지가 페이지를 채울지, 덮을지, 포함될지 또는 축소될지 브라우저에 알릴 수 있다.

🟡 중요 이미지는 fetchpriority로 빠르게 로드하기

웹 페이지에 largest contentful patin(LCP)의 일부로 첫 로드 시에 가져와야 할 특정 이미지가 있다고 가정해 보자. 예를 들어, 웹 사이트 상단의 멋진 히어로 이미지는 분명히 높은 우선순위를 가질 것이다. 강한 임팩트를 주기 위해 이 이미지를 사용자가 바로 볼 수 있도록 하려면,  fetchpriority="high" 를 사용해 이 이미지를 우선 처리한다고 브라우저에 알려주고, 브라우저는 다른 이미지(페이지 하단에 있는)에 자원을 즉시 소비할 필요가 없음을 지정할 수 있다.

🟡 지연 로딩(lazy loading) 및 비동기 디코딩(async decoding)으로 성능 향상

 loading="lazy" 를 사용하는 것은 브라우저가 뷰 포트에 없는 이미지를 로드하는 데 귀중한 자원을 낭비하지 않도록 도와준다. 사용자들이 스크롤하기 전까지 웹 페이지에 직접적으로 보이지 않는 모든 것은 우선순위에서 밀려나며, 이는 자원을 절약하고 현명하게 사용하여 웹사이트의 성능을 향상할 수 있다. 이 기능은 이미지가 페이지 하단에 위치하고, LCP 이미지가 아닌 경우에만 적합하다.

 

브라우저가 이미지를 로드하는 방법은 기본적으로 성능에 최적화되어있지 않지만,   decoding="async" 를 사용하면 화면 하단 부분의 이미지에 대해 이 문제를 해결할 수 있다. 이미지 디코딩은 성능에 영향을 미치므로 화면 하단의 LCP가 아닌 이미지에 대해 디코딩을 먼저 할 필요가 없도록 지정하면, 웹사이트 성능을 향상하고 페이지 로드 속도를 높이는 데 도움이 된다. 또한, 이 이미지들에 대해  fetchpriority="low" 를 설정할 수도 있다.

🟡 이미지 최적화 자동화 하기 - 링크 확인(Cloudinary, Next.js image, Gatsby image plugin 등)

✅ 결론

눈부시게 빠른 웹 사이트를 위해, 이미지 최적화부터 시작해라. 크고, 최적화되지 않은 이미지는 느린 페이지 로드, SEO 관련 불이익, 최악의 경우 좋지 않은 사용자 경험으로 이어진다. 웹 사이트의 이미지를 최적화하고, 성능을 개선하고 사용자 경험을 향상하기 위해 성능 인사이트 도구를 활용해 봐라.