이미지 최적화하기 (img 태그 속성 알아보기)

프론트엔드 개발자로서, 웹페이지의 최적화를 위해서 번들링 사이즈를 최소화할 필요가 있다.

오늘날 웹 사이트에서 큰 비중을 차지하는 자바스크립트가 번들링으로 최적화되는 것 처럼, 이미지 역시 최적화할 필요가 있다.

따라서, 이미지 최적화를 위해서 여러 방법을 알아보았다.

• css의 background-img를 사용하는 것 보다는 html img 태그를 사용하자.
• 모던 브라우저에서 제공되는 고품질이면서도 용량이 작은 webp나 avif와 같은 최신 이미지 확장자를 사용하자.
• JPEG는 압축률과 이미지 품질을 조절할 수 있어 복잡한 이미지에 적합하다.
• 투명 배경을 사용하기 위해서 PNG를 사용할 수는 있지만, 품질이 좋은 만큼 많은 용량을 차지한다.
• 불필요하게 큰 이미지를 사용하지 않는다.
• 캐싱을 통해서 여러번의 이미지 호출을 효율적으로 관리한다.

적절하게 Img 태그 속성 설정하기

• decoding : 이미지의 디코딩에 관해서 브라우저에 힌트를 제공한다. sync / async / auto
• importance : 이미지의 다운로드 중요도를 설정한다. auto / high / low
• srcset : 이미지 소스의 후보들을 나타내는 속성이다. 이미지 소스의 url을 여러개 설정할 수 있다. (,를 통해 여러개의 url을 구분한다)
• sizes : 이미지 소스의 크기를 나타내는 속성이다. ,를 통해 여러 개의 크기가 설정될 수 있으며 srcset과 함께 사용될 수 있다.

srcset & sizes

<img src="clock-demo-200px.png"
     alt="Clock"
     srcset="clock-demo-200px.png 200w,
             clock-demo-400px.png 400w"
     sizes="(min-width: 600px) 200px, 50vw">

mdn 문서를 보면, 위와 같이 srcset과 sizes를 동시에 적용한 예가 있다.

srcset과 sizes는 각각 순서대로 매칭되며, 미디어 조건을 만족했을 때 해당 이미지를 불러오게 만들 수 있다.

• loading : 브라우저가 이미지를 불러올 때, 즉시 이미지를 불러올지 (eager, 기본값) 사용자에게 이미지가 보여지는 순간 불러올지(lazy, 지연로딩)를 정할 수 있다. 때때로 지연 로딩을 사용함으로써, 웹 성능을 향상시킬 수 있다.
• fetchpriority : 이미지를 가져올 때 상대적인 우선순위를 정할 수 있다. auto(기본값) / high / low

 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/img

<img>: 이미지 삽입 요소 - HTML: Hypertext Markup Language | MDN

https://developer.mozilla.org/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

반응형 이미지 - Web 개발 학습하기 | MDN

 

 

 

🍈 React에서는 이미지의 지연 로딩을 위해서 라이브러리를 사용할 수도 있다.

 

https://www.npmjs.com/package/react-lazy-load-image-component

react-lazy-load-image-component