이미지를 잘 보여주는 방법

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

• 방법 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 속성을 활용.

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

• 이미지의 사이즈가 너무 크면 서비스가 무거워짐.

• 또한 사이즈가 너무 작으면 저화질이어서 불편함을 느낄 수 있음.

• 위 사진에서 보여지는건 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 태그로 대체 가능한 영상으로 재생하는 기능이 있음.

Lazy loading

• 페이지 안에 있는 실제 이미지들이 실제로 화면에 보여질 필요가 있을 때(유저가 이미지를 보여줘야 할 위치에 도달했을 때) 로딩.

• 왜 lazy일까? → 게으르게 로딩!

• intersection observer로 만들 수 있음.

placehoder Loading (점진적 이미지 로드)

• 보여질 콘텐츠를 도형으로 미리 보여주는 것.

• 스켈레톤 UI라고 부르기도 함.

• 이미지가 곧 보일 것임을 인식하게 함으로써 사용자 경험을 향상할 수 있음.

• 낮은 해상도의 이미지를 블러처리해서 먼저 보여주고 추후 높은 해상도로 로딩하는 방법도 있음.

• 개인 의견) 아무 데이터도 불러오지 않았을 때 스켈레톤 UI, 저해상도 이미지라도 불러올 수 있다면 저해상도 + 블러처리, 최종적으로 높은 해상도의 이미지를 보여주는 방식이 제일 베스트지 않을까 싶음! (근데 복잡하니 상황에 맞춰 적절히 도입하면 좋을듯) → 복잡하다 한 이유 : 네트워크 통신이 어떤 상태에 있는지 완벽히 알고 통제해야 하기 때문.