[프론트엔드] 이미지 최적화하기

이미지 마크업 최적화

브라우저에서 이미지를 불러와 다운로드하게 될 때 용량이 작을수록 최적화를 할 수 있다.
최적화 하는 방법에 대해 알아보자

정적이미지 최적화

히어로이미지 같은 정적이미지의 경우 확장자를 webp로 사용하여 저장하거나 Tinypng 사이트를 이용하여 용량을 줄인적 있다.

• webp 변환
• TinyPng 사이트 이용하기Webp 확장자 사용하기webp확장자를 사용할 경우 png나 jpg 확장자 보다 일반적으로 50%의 용량을 줄일 수 있게된다.
  현재 거의 모든 브라우저에서 지원함으로 사용할 수 있다.
• 현재 ie를 제외한 모든 브라우저에서 지원함으로 webp를 사용하자
• sharp 라이브러리를 사용하여 확장자를 webp로 변경 할 수 있다.

링크: https://www.npmjs.com/package/sharp

TinyPng

정적이미지의 경우 TinyPng 사이트에서 이미지 크기를 더 줄일 수 있게 서비스를 제공한다

링크: https://tinypng.com/

picture tag 사용하기 (참고)

webp를 지원하지 브라우저에서 사용하게 될 경우 picture, source 태그를 이용하여 분기 할 수 있다.

<picture>
    <source srcset="a.webp" type="image/webp" />
    <img src="a.png" />

• source에서 media 속성을 이용해서 미디어 쿼리를 사용할 수도 있다.

  <picture>
    <source srcset="a.2x.webp, a.1x.webp" type="image/webp" />
    <img srcset="a.2x.png" src="a.1x.png" />

• retina display 지원하기
• retina display를 위해 2x를 추가하여 제공, retina가 아니면 1x로 제공이된다.
• 2x로 제공되는 원리는 화면의 크기를 2배가 된것을 리사이징으로 줄이면 더 해상도 높은 이미지를 제공받을 수 있다.

lazy-loading

이미지 지연로딩: 이미지를 전체다운하지 않고 뷰포트에 있는 부분만 로딩하고 슬라이드 될 시에 다시 이미지를 다운로드를 진행, 성능 상 below the fold 상황에서만 적용하는 것이 좋다. above the fold 상황에서 사용하면 오히려 이미지 로딩이 느려지는 현상이 발생한다.
디코딩 지연 - 이미지 외의 다른콘텐츠가 웹페이지에 빠르게 될 수 있게 도와준다. 병렬처리화

 

<img 
    loading="lazy"    // 이미지가 브라우저 화면안에 들어와야 화면에 표시한다.
    decoding="async" // 다른 콘텐츠 지연을 피하기 위해 병렬적으로 처리한다
/>