• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

1-5 이미지 사이즈 최적화

20.10.08 19:09 작성 조회수 152

1

질문 있습니다.

해당 회차에서 나온 이미지 사이즈 최적화 내용중에 imageCDN을 통해 이미지 사이즈를 줄일수 있다고 하는데, lecture-1에서 받아오는 이미지들은 unsplash라는 사이트에서 제공하고, url에 원하는 이미지 크기과 퀄리티를 넣어줘 이미지를 최적화하여 받아오는 것으로 이해했는데, 이 기법은 단순 unsplash라는 사이트에서 제공되는 이미지에만 적용되는 거 아닌가요? s3 같이 imageCDN이 따로 없는 경우에는 최적화 할 수 없고, 애초에 서버에 저장할 때 이미지를 적절히 크롭해서 넣어주는 방법밖에 없는건가요?

답변 1

답변을 작성해보세요.

2

안녕하세요, 묭묭묭님.

imageCDN의 유무에 따른 이미지 최적화 방법에 대해서 질문을 주셨는데요.

결론적으로 생각하시는 것이 맞습니다. 실습 프로젝트에서 사용한 unsplash의 방식은 unsplash에서 이미지를 서비스하기 위해 만든 자체의 기술이고, 우리에게 그런 이미지 CDN 없다면 최적화가 힘듦니다. 

조금 상세하게 답변을 드리면, 우리는 이미지를 세 가지로 구분하여 생각해볼 수 있습니다. 

  1. 정적 이미지: 서비스에 고정적으로 필요한, 거의 변하지 않는 이미지 (ex: 버튼 이미지, 아이콘 이미지 등)
  2. 업로드된 이미지: 사용자에 의해 s3와 같은 버킷에 업로드된 이미지 (ex: 블로그 글 작성시 올린 사진, 썸네일 등)
  3. 외부 서버의 이미지: 자신의 서비스의 이미지가 아닌 다른 서버의 이미지 (ex: 실습 프로젝트의 unsplash 이미지 등)

먼저, 1번, 정적 이미지의 경우 사실상 이미지 CDN이 거의 필요없습니다. 직접 처음부터 가공된 이미지를 넣고 그대로 사용하면 되니까요. 물론, 어떤 경우에는 이런 이미지들 또한 이미지 CDN에 캐시해두고 서비스를 하기도 하지만, 추가적인 가공이 필요없는 이미지이기 때문에 캐시나 이미지 사용방식의 통일성 등의 목적으로 이미지 CDN을 사용합니다.

2번, 업로드된 이미지의 경우는 이미지 CDN 없이는 최적화가 힘듦니다. 별도의 이미지 CDN 없이 이미지를 서비스해주는 서버에서 직접 이미지를 가공하여 전달해준다면 가능하지만, 어찌됐든 이런식의 이미지를 가공해줄 서버가 필요합니다. 직접 이미지 CDN을 구축하기 힘들다면, 이미지 CDN 솔루션을 사용할 수도 있습니다. 대부분의 회사에서는 이런 이미지 CDN 서버를 직접 구축하여 이미지를 서비스합니다.
*다른 방법으로는 이미지를 업로드하는 시점에 미리 이미지를 가공하여 저장하는 방법도 있습니다.

3번의 경우 또한 이미지 CDN이 있다면 이미지 CDN을 통해 가공하여 가져올 수 있습니다.

한 가지 짚고 넘어갈 것은, 이미지 CDN을 사용하는 목적은,
사용자와 이미지의 물리적 거리를 좁히고, 더 작은 이미지를 제공함으로써 이미지가 빠르게 다운로드 될 수 있도록 함에 있습니다. 
즉, 위의 목적만 달성 한다면 그게 이미지 CDN이 아니여도 상관없습니다.
(이미지 업로드 시점에 미리 가공하여 저장하도록 하거나, 브라우저 캐시를 사용하거나 등등)

답변이 도움되었기를 바라며, 강의에 관심을 가져주셔서 감사합니다. :)