패스틀리(Fastly), Image Optimizer 서비스에 대해서

 PC시대를 벗어나 모바일 시대로 들어오면서 많은 웹사이트들의 큰 고민 중의 하나는 웹사이트에서 가장 많은 크기를 차지하는 웹 이미지를 어떻게 효과적으로 클라이언트들에게 전달할까라는 것이다.

 집에서 데스크 탑이나 노트북을 통해서 wi-fi나 wired를 통해서 웹사이트를 이용할 때에는 제한 없는 전송량 사용량과 높은 속도에 대한 퀄리티 때문에 웹사이트에서 이미지를 볼 때 극히 특별한 케이스를 제외하고는 너무 느려서 접속 못하겠다라는 일은 많지 않았을 것이다. 그렇지만, 모바일 시대로 접어들면서 많은 클라이언트들은 PC보다 성능이 떨어지는 모바일 기기를 사용하여 웹사이트에 접속 하는 일이 많아 졌고, 특히 모바일 망을 통해서 접속 시에는 wi-fi나 wired에 비해서 굉장히 떨어지는 인터넷 환경에서 해당 사이트에 접속을 해야 하고, 이미지나 웹사이트의 크기에 대해서 모바일용으로 최적화 되지 않은 사이트를 접속할때는 표시가 너무 느려 접속을 포기하는 지경까지 이르게 됩니다.

 

이로 인해서 많은 웹사이트들은 어떻게 가장 많은 용량을 차지하는 이미지를 효율적으로 모바일 사용자에게 제공할 것인가에 대해서 고민하는 것이 현실입니다.

 

이러한 경우에 고려해 볼 수 있는 것이 Fastly의 Image Optimizer서비스 입니다.

 

IO는 Fastly APP(UI)상에서 설정이 가능하며, IO가 사용가능 하게 되면 메뉴에서 아래와 같은 설정 화면을 볼 수 있습니다.

 

 

설정 내용은 아래와 같습니다.

• Auto WebP에서는 초기 설정을 유지하거나 브라우저가 WebP 형식을 지원하는 경우 이미지가 WebP로 변환되도록 Yes를 선택합니다. 초기 설정의 No를 이용하는 경우, Fastly는 그 이미지 포맷을 유지합니다.
  
  
• Default WebP (lossy) quality 필드는 기본 설정 그대로 두거나 비가역 형식 이미지의 압축률을 입력할 수 있습니다. Fastly의 디폴트 압축률은 85로 설정되어 있는데, 1부터 100 사이의 값을 지정할 수 있습니다.
  
  
• Default JPEG format 필드는 기본 설정 상태로 두거나 이미지 전송 시 사용합니다. 기본적으로는 JPEG의 종류에 Auto 가 선택되어 있으며 입력과 같은 형식으로 출력된 화상이 전달됩니다. Baseline을 선택하면, 이미지는 왼쪽 위에서 오른쪽 아래를 향해 차례로 표시되고, Progressive를 선택하면, 처음에 화질이 거친 이미지가 표시되고, 이미지를 읽어들이면서 서서히 화질을 올려 표시됩니다.
  
  
• Default JPEG quality 필드는 기본 설정 그대로 두거나 비가역 파일 형식의 화질에 대한 압축률을 입력할 수 있습니다. Fastly의 디폴트 압축률은 85로 설정되어 있는데, 1부터 100 사이의 값을 지정할 수 있습니다.
  
  
• Allow upscaling 필드는 기본 설정 그대로 두거나 Yes를 선택하여 요청된 크기에 맞게 원래 소스 파일보다 큰 크기의 이미지를 반환할 수 있습니다.

 

 

• Enable Animated GIF to Video 옵션은 기본 설정으로 유지하거나 Yes를 선택하여 애니메이션 GIF에서 비디오로의 변환 기능을 활성화합니다. 각 비디오 프레임은 이미지 옵티마이저의 요청으로 카운트 및 과금됩니다.
  
  
• Resize filter 의 옵션에서는, 픽셀수를 증감시켜 화상의 리사이즈나 생성을 실시할 때에 이용하는 화상 품질 필터를 선택합니다. Fastly 기본 설정에서는 Lanczos3 필터가 선택되어 있습니다. 또한 Lanczos2, Bicubic, Bilinear, Nearest도 선택할 수 있습니다.

 

위의 설정이 끝나면 다음에 필요한 설정은 x-fastly-imageopto-api 헤더를 Request시에 보내도록 설정하는 것이 필요합니다. Fastly의 캐쉬 서버가 해당 헤더를 받게 되면 그 컨텐츠는 IO가 적용되는 컨텐츠라는 것으로 인식하게 되고 설정된 내용으로 이미지를 압축하게 됩니다. 아래의 Sample VCL 코드를 설명드리면, 특정 확장자 및 User-agent를 가진 클라이언트의 Request에 대해서만 IO를 적용하게 되는 것을 알 수 있습니다. 이렇게 설정하므로써 예를들면 모바일 클라이언에게는 resizing한 이미지 파일을 그 외에게는 일반 이미지를 보여주도록 설정 하는 것이 가능합니다. 그러면 모바일 클라이언트의 경우에는 원본 이미지 보다 훨씬 작은 사이즈의 이미지가 제공되게 되어 웹시이트가 로딩 될때에 더욱 빠른 시간에 사이트를 보게 될 수 있을 것입니다.

if ((req.url ~ "(?i)^(?:gif|png|jpeg|jpg|webp)\z" && req.http.user-agent ~ "(?:iphone|ipad|android)") || (req.url.path ~ "^/image/" && req.http.user-agent ~ "(?:iphone|ipad|android)")) {
    set req.http.x-fastly-imageopto-api = "fastly; qp=*";
}

 

다음 포스팅에서는 IO의 다양한 사용 방법에 대해서 포스팅해 드리도록 하겠습니다. 긴글 읽어 주셔서 감사합니다.