패스틀리(Fastly), Image Optimizer 서비스의 유용한 옵션

지난번 포스팅에서는 Image Opimizer(이하 IO)에 대해서 간단하게 소개해 드렸습니다. 이번 포스팅에서는 IO에서 사용 가능한 몇가지 옵션에 대해서 소개해 드리도록 하겠습니다.

 

지난번 포스팅 에서 말씀드린 것과 같이 IO가 활성화가 되어 있고, IO를 적용할 이미지에 대해서 x-fastly-imageopto-api request header를 설정하는 것으로 이미지를 최적화 하여 요청하는 클라이언트에게 제공하는 것이 가능합니다.

 

IO에는 URL에 쿼리스트링을 설정하는 것으로 다양한 효과를 사용할 수 있습니다. 링크를 클릭하시면 해당 옵션이 적용된 이미지를 확인하실 수 있습니다.

 

1. bg-color: bg-color 매개변수는 패딩을 적용하거나 투명 픽셀을 교체할 때 사용할 이미지의 배경 색상을 설정합니다.
   • bg-color={value} 의 형식으로 사용 가능하며 Value에는 Hex RGB, Decimal RGB, Decimal RGB with alpha가 사용될 수 있습니다.
   • ?bg-color=c5c5c5 와 같이 설정하며 백그라운드 컬러를 Grey로 설정할 수 있습니다.
2. blur: 0.5에서 1000혹은 퍼센트로 설정하여 이미지에 가우시안 Blur효과를 줄 수 있습니다.
   • blur={value} 의 형식으로 설정가능하며, ?blur=50와 같이 설정하면 반경 50px의 가우시안 블러를 적용할 수 있습니다.
3. crop: 이미지를 크롭하는 기능입니다.
   • ?crop=1000,500 와 같이 사용 가능하며 원하는 사이즈로 대상 이미지를 크롭 할 수 있습니다.
4. orient: 이미지를 회전 시키는 기능입니다. 특정 옵션을 사용해서 이미지를 좌우로 돌리거나 할 수 있습니다.
   1. ?orient=r 와 같이 사용하면 이미지를 오른쪽으로 회전 시킬수 있습니다.

 

위에 IO에서 사용 가능한 몇가지 옵션을 설정해 드렸습니다. 이외에도 굉장히 많은 옵션을 가지고 있으므로 아래 사이트에서 확인해 보시길 바랍니다. 웹에서 클라이언트에 제공되는 이미지를 일일이 가공하는 것은 굉장히 손이 많이 가는 일입니다. 패스틀리에서 제공하는 IO서비스를 이용하게 되면 이러한 공수를 많이 줄일 수 있을 것입니다. 긴 글 읽어 주셔서 감사합니다.

 

 

https://www.fastly.com/documentation/reference/io/ 

Image Optimizer reference | Fastly Documentation