<aside> 🔍 이런 방법도 있다!를 알려주기 위함. 구체적인 구현 방식은 키워드를 포함해 검색해보기!

</aside>

<aside> ⚠️ 보통의 최적화는 구현이 다 된 상태에서 하는 게 좋아요! 이 문서는 참고만 하고 우선 구현에 집중하기!

</aside>

기기 환경에 따라 다른 이미지 전송하기

모바일 화면으로 보는 사람에게 큰 모니터에서 보는 사람과 동일한 해상도를 제공할 필요 없음.

• 방법 1 ) 화면의 width에 따라 다른 해상도의 이미지를 보여줌. ex) 미디어쿼리

  .image-box {
    width: 400px;
    height: 400px;
    background-image: url(./small.png);
  }
  
  @media (min-width: 401px) {
  	.image-box {
    	width: 700px;
    	height: 700px;
    	background-image: url(./midium.png);
    }
  }
  
  @media (min-width: 701px) {
  	.image-box {
      width: 1000px;
      height: 1000px;
      background-image: url(./large.png);
    }
  }
  

• 방법 2) img 태그의 srcSet 속성을 활용.

  

  보통은 png, jpeg, svg라 괜찮지만 webp 파일 형식은 구형 브라우저에서 읽을 수 없기에 webp를 읽을 수 없는 브라우저에서는 대체용 이미지를 대신 보여주는 처리(picture 태그)가 필요함.

어떤 사이즈가 적당한지 측정하기

• 이미지의 사이즈가 너무 크면 서비스가 무거워짐.
• 또한 사이즈가 너무 작으면 저화질이어서 불편함을 느낄 수 있음.

→ 그렇다면 어떻게 적당한 사이즈를 알 수 있을까?

• 위 사진에서 보여지는건 120 x 120이지만 실제 사진 사이즈는 1200 x 1200.
• 이때 사진 사이즈를 240 x 240으로 주는게 적당.(2배)
• 프론트에서 img 태그에 src 값을 바로 넣지 말고 data-src에 우선 해당 값을 할당함. 그 후 isIntersecting이 true일 때, target.src = target.dataset.src처럼 할당함.
• 백엔드에서 조절해서 내려줄 수 있다면 좋겠지만 만약 불가능하다면 이미지 CDN(Contents Delivery Network)을 사용하자
  • 이미지를 사용자에게 보내기 전에 가공을 해서 사용자에게 전달한다. (이미지 포맷 변경 및 사이즈 변경)
  • http://cdn.image.com?src=[img src]&width=200&height=100, <https://unsplash.it/640> 등의 형태.
  • CDN은 이미지 캐싱도 해줌.
• webP라는 이미지 포맷을 사용하자.

  • Squoosh라는 구글에서 만든 이미지 컨버터 웹 애플리케이션을 이용하면 좋음.

  • 이는 무손실 압축과 손실 압축을 모두 제공하는 최신 이미지 포맷으로, 기존의 png나 jpg에 비해 효율적으로 이미지를 압축할 수 있음. 다만 2010년에 발표된 비교적 최근 기술이라 지원하지 않는 브라우저도 존재함.

  • picture 태그로 webP 이미지를 지원하지 않는 경우를 대비할 수 있음. 브라우저가 webP를 렌더링하지 못할 때 JPG 이미지로 렌더링하게 할 수 있음. 이 뿐만 아니라 이 태그는 서로 다른 디스플레이에서 이미지를 보다 유연하게 노출할 수 있음.

    <picture>
        <source srcset="/images/wide_image.webp" media="all and (min-width: 800px)"> 
        <img src="/images/default.jpg" alt="" />
    </picture>
    

  • webP, picture 모두 caniuse 확인해야 함.

  • 동일하게 webM이라는 구글에서 개발한 동영상 포맷이 있음. 웹에 최적화됨. video 태그에는 picture와 같이 source 태그로 대체 가능한 영상으로 재생하는 기능이 있음.