로딩 성능 최적화 - 이미지, 동영상

이미지 사이즈 최적화

이미지 크기 확인하기

이미지 크기를 적절하게 줄여서 로딩 성능을 향상시킨다.

Lighthouse의 Opportunity의 Properly size images 항목을 보면 적절하지 않은 크기의 이미지들의 목록을 볼 수 있다.

이미지 요소의 src 링크에 커서를 올려보면 rendered size: 화면에 그려진 이미지의 크기와 Intrinsic size: 불러온 이미지의 크기를 확인할 수 있다.

예시를 보면 화면에 그려지는 이미지의 크기에 비해 불러오는 이미지의 크기가 너무 크다.

적절한 크기는 화면에 그려지는 이미지의 너비,높이 기준으로 2배정도 되는 크기이다.

이미지 크기를 줄여서 로딩 시간을 줄일 수 있다.

이미지 크기 줄이기

그렇다면 이미지는 어떻게 줄일까?

image processing CDN(이미지를 사용자에게 보내기전 크기를 줄이거나 format을 변경) 을 활용해서 이미지를 줄일 수 있다.

예시) http://cdn.image.com?src=[img src]&width=200&height=100

이렇게 주면 원본이미지를 가공(크기 줄이기)해서 사용자에 전달

이미지 cdn 을 직접 구축하거나

상용 솔루션을 사용하면 된다. ex) imgix

이미지 크기 줄이기 #2

이미지 변환 툴을 통해 이미지 크기를 줄일 수 있다. (소스코드 폴더 asset에 저장해두는 이미지들에 활용 가능)

이미지 포맷 별 장단점

• PNG : 무손실 압축, 용량 제일 큼, 투명한 색 사용 시 사용
• JPG: PNG보다 용량 적음
• WEBP: 화질 제일 좋음, 용량 제일 적음, 지원되지 않는 브라우저가 있다.

PNG, JPG 대신 WEBP를 사용해서 고화질, 저용량의 이미지를 사용할 수 있다.

JPG -> WEBP 컨버터를 활용해서 포맷 변환이 가능하다. https://squoosh.app 75~80% 화질로 변환 -> 용량이 많이 줄어든다.

크기 또한 변환이 가능하다. (권장: 화면에 들어가는 크기의 너비,높이 각 2배)

이미지 크기, 용량을 많이 줄일 수 있다.

주의

WEBP는 호환이 되지 않는 브라우저가 있다. 이 때 <picture> 태그를 사용할 수 있다.

<--! 예시 -->
<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

media 조건에 따라 다른 source의 이미지를 사용할 수 있다.

어떤 조건에도 맞지 않는 경우 img 태그의 src로 폴백

type을 활용해서 webp가 지원되는 경우와 아닌 경우 다른 src를 줄 수 있다. 위와 같은 방식으로 작동한다.

<picture>
    <source srcset="logo.webp" type="image/webp">
    <img src="logo.jpg" alt ="logo">
</picture>

picture 태그에 레이지 로딩 적용하기

img태그에 적용한 것과 같은 방식으로 레이지로딩을 적용할 수 있다.

처음엔 src 대신 dataset-src에 주소를 놓고, IntersectionObserver 활용해 해당 태그가 화면상에 보일 때 불러오도록 한다.

동영상 최적화

동영상을 작은 용량으로 압축해주는 툴을 활용해 용량을 줄인다. 대신 화질을 저하시킨다.

동영상이 메인이 아닌 경우에 사용할 수 있다.

ex) https://www.media.io/

video 태그를 활용해 여러 src를 줄 수 있다. (브라우저 별 호환 문제로 재생 안될 시 대비)

<video controls width="250">
    <source src="/media/cc0-videos/flower.webm" type="video/webm">

    <source src="/media/cc0-videos/flower.mp4" type="video/mp4">

    Download the
    <a href="/media/cc0-videos/flower.webm">WEBM</a>
    or
    <a href="/media/cc0-videos/flower.mp4">MP4</a>
    video.
</video>

화질과 용량 둘다 포기하기 어려우면

1) 동영상 길이를 줄이거나

2) 화질을 줄이고 동영상 위에 필터, 작은 이미지 등을 덮어씌움으로써 사용자가 눈치 채지 못하게 한다.

ex) 동영상 위에 4x4 크기의 작은 이미지를 패턴으로 뿌려 놓는다.

   .bg-texture {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4'       height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23000000' fill-opacity='0.84' d='M1 3h1v1H1V3zm2-  2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
   }

ex) css로 filter: blur[5px]를 줘서 흐리게 만들수도 있다.