Img - resizing

🔴 이미지 리사이징의 필요성

다량의 이미지를 업로드 해야하는 경우가 생기면, 이미지들은 서로 다른 크기와 용량으로 사이트의 전반적인 속도를 낮출 수가 있다. 또한 네트워크 전송량이 증가하는 것이기에 이에 따른 비용도 기하급수적으로 오를 수 있다는 문제점이 생긴다.

⚪ 여러 가지 방법

🔷 <picture> 태그

<picture> 태그는 브라우저가 여러 이미지 중에서 적절한 이미지를 선택하도록 돕는 태그이다. meida query 와 비슷한 개념이라고 생각하면 이해하기 편하다.

// 상대경로
<picture>
  <source media="(min-width: 1200px)" srcset="large.jpg" />
  <source media="(min-width: 768px)" srcset="medium.jpg" />
  <source media="(min-width: 480px)" srcset="small.jpg" />
  <img src="default.jpg" alt="Description of your image" />
</picture>


// 절대경로
<picture>
    <source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg">
    <source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg">
    <img src="/examples/images/people_200.jpg" alt="People">
</picture>

🔷 srcset 속성

이미지의 여러 버전을 제공하여, 브라우저가 화면 크기 및 해상도에 맞는 이미지를 선택하도록 돕는다. 

<img
  src="default.jpg"
  srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
  alt="Description of your image"
  sizes="(max-width: 480px) 480px, (max-width: 768px) 768px, 1200px"
/>

🔷 온디맨드 리사이징

이미지를 요청할 때 서버에서 동적으로 이미지의 크기를 조정하는 방법이다. 일반적으로 이 방법은 CDN이나 이미지 처리 서비스를 사용하여 구현된다. 직접 구현할 수도 있지만, 이미 구현되어 있는 서비스를 이용하는 것이 편하다. ( ex : Cloudinary, imgix 등)

- 작동 순서

1. URI에 parameter를 담아 원하는 해상도의 이미지를 요청한다.

2. 이미지 캐시 서버에 캐싱된 이미지가 있으면 이미지를 전송한다. (없다면 다음 단계로 넘어간다)

3. 캐싱된 이미지가 없으므로 이미지 리사이징 서버에 API 또는 SDK를 통해 이미지를 요청한다.

4. 이미지 리사이징 서버는 API 또는 SDK를 통해 이미지 스토리지 서버에 원본 이미지를 요청한다.

5. 이미지 스토리지 서버는 이미지 리사이징 서버에 이미지를 전송한다. 이미지가 없다면 에러 코드 발생.

6. 이미지 리사이징 서버는 에러코드가 아닌 정상적인 이미지를 받을 시 URI를 해석하여 원하는 이미지로 리사이징 후 이미지 캐시 서버로 전송한다. 다만 이미지 스토리지에 서버에서 에러코드를 받으면 이미지 캐시 서버에 에러코드를 전송한다.

<img
  src="https://res.cloudinary.com/your-cloud-name/image/upload/w_500,h_300,c_fill/sample.jpg"
  alt="Description of your image"
/>

🔵 img, pickture 태그와 온디맨드 리사이징의 차이

기존의 방식들은 다양한 해상도의 이미지로 미리 저장을 하는 문제 해결방식에 초점이 맞추어져 있다.

따라서 업로드 시에 이미지를 리사이징 하거나 렌더링 해야하기 때문에 서버 사양이 좋아야하고, 새로운 해상도의 이미지가 필요할 경우 대응이 어려우며, 스토리지 비용 증가 등의 문제점이 발생할 수 있다.

온디맨드 이미지 리사이징은 이미지 로딩 시 필요할 때만 해상도 또는 렌더링을하여 문제를 해결하는 방식에 초점이 맞추어져 있기 때문에 스토리지 비용 감소, 해상도 대응 원할 등의 장점은 있지만, 최초 이미지를 요청 시 이미지를 리사이징 해야 하므로 로딩이 느리고, 캐싱 되어 있지 않은 해상도의 이미지를 대응하기위해 많은 연산이 필요하다는 단점 또한 발생합니다.

여러가지 상황을 고려하여 맞는 리사이징 방식을 선택하는 것이 좋은 것 같다. 

⚫ img 태그와 pickture 태그의 차이

두 태그의 srcset 속성은 모두 반응형을 위해 사용하는 속성으로, 여러 해상도에서도 브라우저가 자동으로 최상의 이미지를 출력할 수 있게 선택권을 주는 태그이다. 단 조금 쓰임새가 다르다.

img 태그 : x(pixel density : 몇 배수 ) 와 w(viewport) 를 동시에 사용할 수 없다.

srcset을 사용했지만 src 태그를 같이 기재해주는 것은 이전 브라우저 대응을 위해 필요하다.

picture 태그 : 태그 안에 source 태그들로 이미지를 그리는데 모든 source 요소의 이미지 사용이 불가능하면 마지막 img 를 렌더링하기에 반드시 img 태그 또한 사용해야한다.

srcset으로 어떤 이미지를 가져올 것인지 경로를 지정하고, media를 통해 viewport의 너비에 따라 각각의 srcset을 불러온다. type 속성으로는 webp 나 avif 와 같은 포맷까지 지정해줄 수 있다.

<picture>
    <source srcset="awesomeNewFormat.avif" type="image/avif">
    <source srcset="NewFormat.webp" type="image/webp">
    <img src="oldFormat.jpeg" alt="구형 이미지 포맷을 마지막에 꼭 배치해야합니다.">
</picture>

 

위에서 알 수 있듯, img 태그의 srcset은 다른 이미지로 바꾸지 못한다. 즉 해상도에 따라 같은 이미지의 화질을 컨트롤 하고 싶으면 img srcset 을, 해상도에 따라 다른 이미지 or format 을보여주고 싶을 때는 picture를 사용하면 된다.

 

🟠 Reference

https://jaycode.tistory.com/17               ==> img vs pickture