최적화 작업(삽질) (2/2)

나에겐 3번째 문제가 있었다.

"Properly size images" : 브라우저가 필요로 하는 크기보다 더 큰 이미지를 로드해서 성능이 떨어질 때 발생

적절한 크기의 이미지를 요청하도록 설정해야 한다. 

이 문제를 풀어야 하는데 전 글에서 말했듯 나는 S3 + CloudFront를 건드릴 수 없는 환경이다.

포기할 순 없으니 CloudflareCDN을 사용하기로 했다.

 

unplash라는 친구를 소개 하겠다.

https://unsplash.com/ko

아름다운 무료 이미지 및 사진 | Unsplash

Unsplash가 하는 역할:

• 이미지를 저장, 최적화, 가공한 뒤 Cloudflare CDN을 통해 제공.
• 사용자가 이미지에 접근하면, 가장 가까운 Cloudflare 노드에서 이미지를 로드해 빠른 전달을 보장.

unplash는 CDN에 비해 빠르고 간단하지만 유연성면에서 불리하다.(압축,캐싱,보안 설정 등이 그렇다.)

 

현재 이미지가 너무 크다.

예를 들어 273 x 153px의 이미지가 필요하다면 1200x1100px 크기의 이미지가 들어온다.

 

그래서 나는 webp 형식을 사용해 크기도 작게 변환하려고 한다.

(넥제 기본 Image 컴포넌트도 webp로 변환 해주긴 하나 크기 이슈가 있어 사용했다.)

 

방법은 이렇다.

서버에서 이미지 URL 받기 -> URL을 unplash 주소로 변경 -> unplash에서 받은 이미지 사용

 

내가 한 일

1. resize 이미지 컴포넌트 만들기 (블러,기본용 이미지)

2. 기존 Image 컴포넌트 대체

 

unplash에 보내는 주소형태는 이렇다.

https://source.unsplash.com/random?w={width값}&h={height값}&q={퀄리티값}&fm={이미지포멧}&fit=crop
https://source.unsplash.com/random?w=272&h=153&q=75&fm=webp&fit=crop

 

나는 기본 사진도 필요하지만 시간이 오래 걸릴 때 쓸 blur처리도 필요하다.

blur처리도 사용하기 위해 해당 코드도 같이 썼다.

blur는 svg가 안되니 jpg 쓰는 게 좋다.

const optimizedBlurDataURL =
    blurDataURL ||
    `${optimizedSrc}${getParametersForUnsplash({
      width: 10,
      height: 10,
      quality: 1,
      format: "jpg",
    })}`; // Blur용 낮은 품질 이미지

 

컴포넌트를 사용할 땐 w,h는 272 , 153에 두배인 544,306을 썼다.

요즘엔 레티나 디스플레이 때문에 이렇게 쓰는 게 좋다고 책에서 봤다.

 

받아올 때 엄청나게 컸던 이미지의 크기가 줄었다.

 

경고도 사라졌다!^-^