pagefx

함수 가이드

  • 이 함수는 etag 를 생성하며, 이를 기반으로 콘텐츠를 갱신한다. [ 체인함수의 ETag 헤더 지원 참조 ]

  • backend 동작시 <picture>, <video>, <source>, <img>, <style> 요소를 다루며, 이때 through="m2fx" 속성이 추가될 수 있다. 이는 결과물 안내시 간소화를 위해 생략할 수 있다.

/usr/local/m2/setting.json 다음 영역에 대해 기술한다.

{
  "functions": {
    "contents": {
      "pagefx": {
        ...
      }
    }
  }
}

How to use

명령어 리스트

# 프론트엔드 라이브러리 삽입 및 제거
https://example.com/view.html/pagefx/fxjs/true
https://example.com/view.html/pagefx/fxjs/false

# 이미지 최적화, 이미지 분할, GIF -> Video 변환, 비디오 최적화 (이상 모두 기본설정 동작)
https://example.com/view.html/pagefx/optimg/default/splitimg/default/gif2video/default/optvideo/default

# 모든 이미지 webp 변환
https://example.com/view.html/pagefx/optimg/dest.formats=webp

# 스타일 격리
https://example.com/view.html/pagefx/isolstyle/default

# 모든 이미지 800px 기준 세로분할
https://example.com/view.html/pagefx/splitimg/dest.splitHeight=800

# 모든 이미지 400px 기준 세로분할, webp 변환, 최적화
https://example.com/view.html/pagefx/splitimg/dest.splitHeight=800/optimg/dest.formats=webp;dest.optimize=auto

# 모든 이미지 400px 기준 세로분할, webp 변환, 최적화 제외
https://example.com/view.html/pagefx/splitimg/dest.splitHeight=800/optimg/dest.formats=webp;dest.optimize=none

# 모든 GIF를 mp4, webm으로 제공
https://example.com/view.html/pagefx/gif2video/dest.formats=mp4,webm

# 모든 Video를 360p로 트랜스코딩
https://example.com/view.html/pagefx/optvideo/dest.presets=360p

# 모든 Video를 10초 단위로 분할하여 제공하며 속성제거
https://example.com/view.html/pagefx/optvideo/dest.segmentation=10;dest.attr=;

명령어

파라미터

동작

fxjs

true (기본값)

false

pagefx 자바스크립트를 페이지에 자동으로 삽입한다.

자바스크립트를 삽입하지 않는다.(=프론트엔드 기능 미동작)

isolstyle

(하위설정)

isolstyle 실행

optimg

(하위설정)

optimg 실행

splitimg

(하위설정)

splitimg 실행

gif2video

(하위설정)

gif2video 실행

optvideo

(하위설정)

optvideo 실행

/pagefx/fxjs/true 로 삽입되는 태그는 다음과 같다.

<script src="https://{서비스도메인}/pagefx/fxjs/a4890ed1-b4c1-4e0f-809c-eecf7da465f1.js" type="text/javascript" charset="utf-8" />

에러 메시지

See also

응답코드

x-sc-chain-error 필드

설명

400

invalidsplitheight

이미지 분할 높이가 유효 값이 아님

404

invalidresource

fxjs 리소스 요청 주소를 찾을 수 없음

510

emptypreset

optvideo 프리셋 미설정

510

invalidpreset

optvideo 프리셋 설정 오류

frontend standalone 연동가이드

M2 백엔드 의존없이 핀치줌 등의 frontend 기능을 사용할 수 있다.

  1. pagefx 리소스를 다운로드 한다.

    # 다운로드 링크
<script src="https://{서비스도메인}/pagefx/fxjs/a4890ed1-b4c1-4e0f-809c-eecf7da465f1.js" type="text/javascript" charset="utf-8" />
<script src="https://{서비스도메인}/pagefx/fxjs/b74de465-a464-4640-a4f7-5415af4a6571.js" type="text/javascript" charset="utf-8" />

  2. 리소스를 자사 도메인으로 배포한다.

    # 자사 도메인 배포 주소
https://static.example.com/js/pagefx/1.0.0/a4890ed1-b4c1-4e0f-809c-eecf7da465f1.js
https://static.example.com/js/pagefx/1.0.0/b74de465-a464-4640-a4f7-5415af4a6571.js

  3. 상품기술서 페이지에 아래 스크립트를 삽입한다.

    # 자사 도메인 배포 리소스
# Child
<script type="text/javascript" src="//static.example.com/js/pagefx/1.0.0/a4890ed1-b4c1-4e0f-809c-eecf7da465f1.js"></script>

# Parent
<script type="text/javascript" src="//static.example.com/js/pagefx/1.0.0/b74de465-a464-4640-a4f7-5415af4a6571.js"></script>

meta

"meta" : {
  "enable" : false,
  "keyword": "pagefx"
}
enable (기본: false)

pagefx 활성화

keyword (기본: pagefx)

pagefx 키워드

Note

pagefx 엔진은 pagedesk 엔진과 같이 사용되는 경우가 많다. 이런 경우 @ 예약어를 통해 명령어를 위임하면 하나의 엔진처럼 사용이 가능하다.

# functions.contents.pagefx.meta

"meta" : {
  "enable" : true,
  "keyword": "@pagedesk"
}

위와 같이 keyword 를 pagedesk 로 위임하면 다음과 같이 하나의 명령체계 사용이 가능하다.

https://example.com/view.html/pagedesk/edit/true/fxisplit/400

frontend

frontend에서 처리할 영역을 지정한다.

# functions.contents.pagefx

"frontend": {
  "selector": null
}
selector

frontend에서 효과를 적용할 영역 (CSS Selector)

Note

pinchzoom 은 이 selector 를 오버라이딩할 수 있다.

responsive

"responsive": {
  "enable": false,
  "width": 800
}
enable (기본: false)

responsive 기능 활성화

width (기본: 800px)

responsive width

viewmore

"viewmore": {
  "enable": false,
  "style": null
}
enable (기본: false)

viewmore(더 보기) 기능 활성화

style

영역 스타일

# 예제
".arrow{border:solid #000;border-width:0 1px 1px 0;display:inline-block;padding:2px;margin-left:3px;margin-bottom:2px}.arrow-up{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)}.arrow-down{transform:rotate(45deg);-webkit-transform:rotate(45deg)}"

height

"height": {
  "initial": 900,
  "margin": 0
}
initial

페이지 최초 로딩시 보여줄 화면 height

margin

가시영역 마진

button

"button": {
  "inactiveTitle": null,
  "activeTitle": null,
  "style": null
}
inactiveTitle

“더보기” 타이틀 (HTML 사용가능)

# 예제
"inactiveTitle": "상품상세 더보기 <span class='arrow arrow-down'></span>"
activeTitle

“접기” 타이틀 (HTML 사용가능)

# 예제
"activeTitle": "상품상세 접기 <span class='arrow arrow-up'></span>"
style

“더보기” 버튼 스타일

# 예제
"style": "width: 200px; background-color: white; margin: 20px; padding: 16px 32px; outline:none; border-radius: 24px; border: 1px solid black; color: black;"

pinchzoom

"pinchzoom": {
  "enable": false,
  "selectors": []
}
enable (기본: false)

핀치줌 기능 활성화

selectors

핀치줌을 적용할 영역 (CSS Selector). 멀티 지정이 가능하다.

iframeAutoHeight

상품기술서와 같은 페이지를 <iframe> 으로 사용하는 경우 스크롤이 생기지 않도록 부모페이지의 높이를 자동으로 조절한다.

"iframeAutoHeight": {
  "enable": true,
  "selector": "iframe",
  "library": {
    "parent": {
      "enable": true,
      "option": null
    },
    "child": {
      "enable": true
    }
  }
}
enable (기본: true)

동작 활성화

selector (기본: iframe)

부모페이지의 <iframe> 요소 선택자

library.parent

"library": {
  "parent": {
    "enable": true,
    "option": null
  }
}
enable (기본: true)

부모페이지의 라이브러리 로딩 여부. true 라면 부모 페이지에서 다음 스크립트를 고객이 직접 삽입해 주어야 한다.

<script src="https://{서비스도메인}/pagefx/fxjs/b74de465-a464-4640-a4f7-5415af4a6571.js" type="text/javascript" charset="utf-8" />
option

iframeresizer 로딩 옵션

library.child

"library": {
  "child": {
    "enable": true
  }
}
enable (기본: true)

자식페이지의 라이브러리 로딩 여부

backend

backend에서 처리할 영역을 지정한다.

# functions.contents.pagefx

"backend": {
  "selector": null,
  "refresh": "12h"
}
selector

  • backend에서 리소스를 처리할 영역 (CSS Selector)

  • null 인 경우 전체페이지를 대상으로 한다.

refresh

기존에 서비스된 기술서를 무효화하고 완전히 재생성한다. 이 때 변경된 리소스의 정보가 일괄 갱신된다.

  • 상품기술서가 변경되는 경우 refresh 까지 기다리지 않고 즉시 갱신된다.

  • 만약 상품기술서 캐싱을 사용한다면 TTL 동안은 변경되지 않는다.

  • 참조 이미지만 변경되는 경우 refresh 주기에 따라 기술서가 갱신된다.

    Hint

    변경된 이미지가 반영되지 않은 기술서가 노출되더라도 서비스에 문제가 없도록 이미지 가공단계에서 보정이 이루어진다.

session

backend 요청 트랜잭션 세션정책을 설정한다.

timeout

웹 페이지 최적화 최대 프로세싱의 시간을 구성한다.

"timeout": {
  "sec": 5.0,
  "action": "dirty"
}
sec (기본: 5.0초)

프로세싱 유효시간. 0일 경우 최대 프로세싱 시간은 무제한이다.

action (기본: dirty)

프로세싱 유효시간 타임아웃 발생시 동작 정책

  • dirty (기본)

    유효한 리소스만 가공하여 전송한다. 지연된 리소스는 원본이 전송된다.

  • source

    pagefx에 입력된 페이지를 전송한다. 만약 pagedesk 나 pagemixed 처럼 외부 종속성이 없는 다른 함수가 연계되어 있다면 해당 함수처리가 반영된 결과가 서비스된다.

longlead deprecated

웹 페이지 프로세싱 중 참조가 지연되는 리소스 처리 정책을 설정한다. 지연된 리소스는 TTL 길게 부여하여 재처리 성공확률을 향상시킨다.

"longlead": {
  "elapsed": 5.0,
  "ttl": 600
}
elapsed (기본: 5.0초)

리소스 참조 트랜잭션 지연 판단 시간

ttl (기본: 600초)

지연된 리소스에 대한 캐싱 TTL(Time To Live)

Warning

longlead 기능은 deprecated 되었으며, backend > refresh 설정으로 그 목적을 대체한다.

debug

backend 요청 처리시 정상처리되지 않은 상황에 대한 디버그정보를 제공한다.

elements

정상처리되지 않은 리소스에 대해 HTML 태그의 속성으로 디버그 정보를 제공한다.

<img src="..." m2-pagefx-hint="50800005">

See also

"elements": {
  "enable": true,
  "attrname": "m2-pagefx-hint",
  "attrtype": "code",
  "priority": "debug"
}
enable (기본: true)

디버그 활성화

attrname (기본: m2-pagefx-hint)

속성명

attrtype (기본: code)

속성값

priority (기본: debug)

에러리스트 에 정의된 priority 수준 이상의 에러상황만 기록한다.

style

isolstyle

지정된 영역의 Style 이 부모 영역의 Style 과 충돌이 발생하지 않도록 격리시킨다. 이 기능은 <iframe> 이 없는 Single Page 구조에서 스타일 충돌을 회피할 목적으로 사용된다.

Note

외부 CSS링크라면 인라인으로 변환처리한다.

"isolstyle" : {
  "enable": false,
  "selector" : null
}
enable (기본: false)

Style 고립기능 활성화

selector (기본: null)

적용영역 선택자(CSS Selector). null 인 경우 전체를 대상으로 한다.

Note

도입할 페이지의 영역지정이 명확하지 않다면 다음과 같이 id 로 명확히 지정할 것을 권장한다.

<html>
  ...
  <div class="detail_info_wrap">
    ... 스타일 고립 영역 ...
  </div>
  ...
</html>

img

이미지를 처리한다.

"img": {
  "selector": null,
  "domain": null,
  "protocol": "http",
  "dims": "dims"
}
selector

<img> 태그 영역 지정 (CSS Selector). null 인 경우 pagefx.backend.selector 를 사용한다.

domain (기본: null)

이미지 트래픽을 위임할 도메인.

  • 특정 도메인이 지정되어 있고 해당 도메인이 같은 노드에서 서비스되고 있다면 해당 가상호스트로부터 다운로드를 받는다.

  • null 이거나 알 수 없는 도메인이라면 proxy 함수를 통해 proxying한다. 따라서 구성시점에 proxy 함수를 활성화해주어야 한다.

protocol (기본: http)

도메인 호출 프로토콜. http 또는 https

dims (기본: dims)

DIMS 엔진 키워드

Note

  • 백엔드 이미지 가공은 dims (또는 hyperdims) 함수의 이미지 분석 기능을 사용한다.

  • 원본서버가 이미지를 302 계열로 redirect 하는 경우 대개 빈 Body 데이터가 dims 함수로 입력되어 실패의 원인이 된다. 이런 경우 redirectionTrace 기능을 활성화하면 redirect 된 이미지를 정상적으로 다운로드 받아 처리가 가능하다.

  • avif 포맷은 hyperdims 함수 활성화 시 동작한다.

optimg

이미지를 최적화한다.

"optimg": {
  "enable": true,
  "selector": null,
  "src": {
    "size": 0,
    "width": 0,
    "height": 0,
    "formats": null,
    "data-attrs": null
  },
  "dest": {
    "formats": null,
    "maxwidth": 1200,
    "optimize": "auto",
    "loading": "lazy",
    "size": {
      "width-attr" : "width",
      "height-attr" : "height"
    },
    "responsive": {
      "picture": "auto",
      "media": {
        "usemap": "auto",
        "min-width": {
          "enable": true,
          "values": [ ],
        }
      }
    }
  }
}
enable (기본: true)

이미지 최적화를 수행한다.

selector (기본: null)

<img> 태그 처리를 적용할 영역 CSS Selector. null 인 경우 pagefx.backend.img.selector 를 사용한다.

src

원본 이미지 조건. 하위조건을 모두 만족하는 이미지만 최적화한다.

size (기본: 0 bytes)

이 값보다 큰 이미지만 최적화한다.

width (기본: 0 px)

이 값보다 넓은 이미지만 최적화한다.

height (기본: 0 px)

이 값보다 긴 이미지만 최적화한다.

formats (기본: null)

최적화할 이미지 포맷 [ jpeg , png , gif , tiff , webp , avif , bmp , bmp2 , bmp3 ] 으로 지정된 순서는 의미를 가지지 않는다. null 이라면 모든 이미지를 최적화한다.

data-attrs (기본: null)

lazy loading등에 사용되는 data-* 속성 이미지를 src 속성보다 우선하여 최적화한다. null 로 설정하면 비활성화된다.

# 원본
<img src="/default1.jpg" data-src="/sample.jpg">
<img src="/default2.jpg">

# optimg.src.data-attrs: null
# src 속성 이미지를 최적화한다.
<img src="/default1.jpg/dims/format/webp" data-src="/sample.jpg">
<img src="/default2.jpg/dims/format/webp">

# optimg.src.data-attrs: ["data-src"]
# optimg.dest.responsive.picture: none
# data-src 속성 이미지 우선 최적화한다.
<img src="/default1.jpg" data-src="/sample.jpg/dims/format/webp">
<img src="/default2.jpg/dims/format/webp">

# optimg.dest.responsive.picture: auto
# <img> 는 유지하며 대체제를 <picture><source srcset="..."> 에 명시한다.
<picture>
  <source srcset="/sample.jpg/dims/format/webp" type="image/webp">
  <img src="/default1.jpg" data-src="/sample.jpg">
</picture>
<picture>
  <source srcset="/default2.jpg/dims/format/webp" type="image/webp">
  <img src="/default2.jpg">
</picture>
dest

최적화 이미지 출력

# 원본 HTML (예제)
<img src="/sample.png">
formats (기본: null)

출력 이미지 포맷 [ jpeg , png , gif , tiff , webp , avif , bmp , bmp2 , bmp3 ] 으로 지정된 순서대로 <source> 태그가 명시되지만 브라우저 호환성 여부에 따라 선택된다.

# formats: [ "webp", "jpeg" ]
# <picture> 지원하지 않는 브라우저를 위해 원본 <img src=""> 를 항상 추가한다.
<picture>
  <source srcset="/sample.png/dims/format/webp" type="image/webp">
  <source srcset="/sample.png/dims/format/jpeg" type="image/jpeg">
  <img src="/sample.png">
</picture>

null 인 경우 원본이미지 포맷을 변경하지 않는다.

maxwidth (기본: 1200)

이미지 최대 가로폭. 0 이라면 최대 가로폭을 적용하지 않는다. 값을 설정하면 해당 값보다 큰 폭의 이미지는 줄인다.

Note

  • PNG 이미지는 다른 포맷에 비해 처리량이 급증한다. 이로인해 JPG 포맷으로 변환 후 resize 처리한다.

  • 처리 조건: 높이 20,000px ~ 65,535px

optimize (기본: auto)

이미지 최적화 정책

  • auto

    이미지 포맷에 맞추어 자동 최적화 적용

    # webp, jpeg 멀티 변환
# 원본 이미지에도 적용된다.
<picture>
  <source srcset="/sample.png/dims/format/webp/optimize" type="image/webp">
  <source srcset="/sample.png/dims/format/jpeg/optimize" type="image/jpeg">
  <img src="/sample.png/dims/optimize">
</picture>
  • none

    최적화 진행하지 않음

loading (기본: lazy)

브라우저 레벨의 lazy loading 을 적용한다.

  • null

    lazy loading 하지 않는다.

  • lazy

    문서 내 모든 이미지를 lazy loading 한다.

  • lazy:1000

    문서 상단 1000px 아래의 이미지를 lazy loading 한다.

    # 원본
<img src="/sample1.jpg" height="1000">
<img src="/sample2.jpg" height="1000">

# optimg.dest.loading: "lazy"
<img src="/sample1.jpg" height="1000" loading="lazy">
<img src="/sample2.jpg" height="1000" loading="lazy">

# optimg.dest.loading: "lazy:1000"
<img src="/sample1.jpg" height="1000">
<img src="/sample2.jpg" height="1000" loading="lazy">
lazyload

loading=lazy 설정 시 부가 기능을 정의한다.

  • style

    지연 로딩 처리된 요소의 이미지 다운로드를 위한 스타일을 삽입한다.

    # 기본값
<style>img[through=m2fx][loading=lazy][src][onload][onerror] {width: 100vw !important;}</style>
<img src="/sample1.jpg" height="1000" through="m2fx" loading="lazy" onload="this.loading=''" onerror="this.loading=''">

# null
<img src="/sample1.jpg" height="1000" through="m2fx" loading="lazy">

Note

  • lazy loading이 동작하지 않는다면 아래 사항을 의심할 수 있다.

    • 스타일을 통해 대상 <img> 의 크기 조절

      • 크기를 퍼센트 (%) 로 조절했으나, 부모 요소의 크기도 퍼센트인 경우

    • 문서 크기의 조절

      • 문서 로딩 후 더보기 기능을 위해 축소한 경우

      • 문서 로딩 후 <img> 를 담고있는 상위 요소의 크기가 변경된 경우

  • 93.05% 의 브라우저가 lazy loading을 기본으로 지원한다. (23년 8월 기준 호환성)

    ../../../../_images/lazyloading2_202308.png

    caniuse.com - Lazy loading via attribute for images & iframes

size

<img> size 명시 설정

width-attr (기본: width)

width 속성명을 설정한다.

# dest.size.width-attr: m2-pagefx-width 라면 다음과 같이 width 속성명이 변경된다.
<img src="/workplace.jpg/dims/format/webp/optimize" m2-pagefx-width="400" height="379">
height-attr (기본: height)

height 속성명을 설정한다.

# dest.size.height-attr: m2-pagefx-height 라면 다음과 같이 height 속성명이 변경된다.
<img src="/workplace.jpg/dims/format/webp/optimize" width="400" m2-pagefx-height="379">
responsive

반응형 이미지 처리

picture (기본: auto)

<picture> 태그를 이용한 디바이스/시나리오에 대한 이미지 대체제 제공.

  • auto

    # 멀티변환이 아니어도 대체제 지원
<picture>
  <source srcset="/sample.png/dims/format/webp" type="image/webp">
  <img src="/sample.png">
</picture>

  • none

    # 대체제 없이 formats[0]만 선택
# /optimg/dest.formats=webp,dest.responsive.picture=none 호출
# 원본이미지를 첫번째 포맷인 webp로 변환하고 최적화한다.
<img src="/sample.png/dims/format/webp/optimize">

# formats가 null이고 responsive.picture이 none이라면, 원본이미지 최적화만 진행한다.
<img src="/sample.png/dims/optimize">
media - prototype

media 속성을 적용한다.

  • min-width (기본: [ ]) - prototype

    디스플레이 가로폭에 따라 선별적 이미지 제공.

    # min-width: [1200, 800]
# 이미지 width가 1200px, 800px을 넘는다면 제한한다.
# 원본이미지에도 적용된다.
<picture>
  <source srcset="/sample.png/dims/format/webp/resize/1200/optimize" type="image/webp" media="(min-width: 1200px)">
  <source srcset="/sample.png/dims/format/webp/resize/800/optimize" type="image/webp" media="(min-width: 800px)">
  <source srcset="/sample.png/dims/format/jpeg/resize/1200/optimize" type="image/jpeg" media="(min-width: 1200px)">
  <source srcset="/sample.png/dims/format/jpeg/resize/800/optimize" type="image/jpeg" media="(min-width: 800px)">
  <img src="/sample.png/dims/resize/1200/optimize" type="image/png" media="(min-width: 1200px)>
  <img src="/sample.png/dims/resize/800/optimize" type="image/png" media="(min-width: 1200px)>
</picture>
    enable (기본: false)

    활성화

    values (기본: [])

    적용할 가로 길이 목록

    Warning

    responsive.picture 설정이 none 이라면 동작하지 않는다.

  • usemap (기본: auto)

    <map> 이 적용된 <img> 에 대한 optimg 명령어 처리정책을 설정한다.

    # 원본 (예제)
<img src="workplace.jpg" usemap="#workmap" width="400" height="379">

    • auto 인 경우 responsive.picture 조건에 따라 2가지 형태로 동작한다.

      # responsive.picture: auto 인 경우
<picture>
    <source srcset="workplace.jpg/dims/format/webp/optimize" type="image/webp">
    <img src="workplace.jpg/dims/optimize" usemap="#workmap" width="400" height="379">
</picture>

# responsive.picture: none 이라면 formats[0]변환과 최적화를 수행한다.
<img src="workplace.jpg/dims/format/webp/optimize" usemap="#workmap" width="400" height="379">

    • none 이라면 usemap 이 적용된 <img> 는 수정하지 않는다.

      # 원본 그대로 출력된다.
<img src="workplace.jpg" usemap="#workmap" width="400" height="379">

splitimg

세로가 긴 이미지를 분할한다.

Note

이 명령어는 optimg 보다 우선 동작한다. 분할된 이미지는 optimg 의 적용을 받는다.

"splitimg": {
  "enable": true,
  "selector": null,
  "src": {
    "size": 102400,
    "width": 0,
    "height": 2000,
    "formats": null,
    "data-attrs": null
  },
  "dest": {
    "splitHeight": 1200,
    "splitSegments": 7,
    "wrapElement": {
      "tagName": "div",
      "attrs": [{
        "key": "style",
        "value": "display: inline-block; vertical-align: top; margin: 0px; padding: 0px;"
      }]
    },
    "usemap": "none"
  }
}
enable (기본: true)

이미지 분할을 수행한다.

selector (기본: null)

<img> 태그 처리를 적용할 영역 CSS Selector. null 인 경우 pagefx.backend.img.selector 를 사용한다.

src

원본 이미지 조건. 하위조건을 모두 만족하는 이미지만 분할한다.

size (기본: 102400 bytes)

이 값보다 큰 이미지만 분할한다.

width (기본: 0 px)

이 값보다 넓은 이미지만 분할한다.

height (기본: 2000 px)

이 값보다 긴 이미지만 분할한다.

formats (기본: null)

  • 분할할 이미지 포맷 [ jpeg , png , tiff , webp , avif , bmp , bmp2 , bmp3 ]

    • gif 포맷은 지원하지 않는다. (스틸이미지 포함)

    • 애니매이션 형식은 지원하지 않는다.

  • null 이라면 지원가능한 모든 포맷을 분할한다.

data-attrs (기본: null)

lazy loading등에 사용되는 data-* 속성 이미지를 src 속성보다 우선하여 분할한다. null 로 설정하면 비활성화된다.

# 원본
<img src="/default1.jpg" data-src="/sample.jpg">
<img src="/default2.jpg">

# data-attrs: null
# src 속성 이미지만 변환한다.
<img src="/default1.jpg/dims/crop/..." data-src="/sample.jpg">
<img src="/default1.jpg/dims/crop/..." data-src="/sample.jpg">
<img src="/default2.jpg/dims/crop/...">
<img src="/default2.jpg/dims/crop/...">

# data-attrs: ["data-src"]
# data-src 속성 이미지 우선 변환한다.
<img src="/default1.jpg" data-src="/sample.jpg/dims/crop/...">
<img src="/default1.jpg" data-src="/sample.jpg/dims/crop/...">
<img src="/default2.jpg/dims/crop/...">
<img src="/default2.jpg/dims/crop/...">
dest

분할 이미지 출력

splitHeight (기본: 1200px)

이미지 분할 세로기준

# 원본
<img src="/sample.jpg" width="1200" height="3000">

# 분할
<img src="/sample.jpg/dims/crop/0+0+0x1200" width="1200" height="1200">
<img src="/sample.jpg/dims/crop/0+1200+0x1200" width="1200" height="1200">
<img src="/sample.jpg/dims/crop/0+2400+0x0" width="1200" height="600">

Note

분할된 <img> 요소의 높이가 100px 미만이라면, 앞 요소에 편입한다.

# 원본
<img src="/sample.jpg" width="1200" height="2450">

# 분할
<img src="/sample.jpg/dims/crop/0+0+0x1200" width="1200" height="1200">
<img src="/sample.jpg/dims/crop/0+1200+0x0" width="1200" height="1250">
splitSegments (기본: 7)

세로가 긴 단일 이미지라면 splitHeight x splitSegments 길이만큼 원본을 선분할 후 splitHeight 를 적용한다.

Warning

값을 0 으로 설정할 경우 선분할 하지 않는다. 이 경우 지나치게 긴 이미지가 분할되는 만큼 로딩되어 시스템 부하를 발생시킬 우려가 있다.

wrapElement

이미지가 분할될 경우 이를 감싸는 tagName 과 속성의 키, 값 쌍을 attrs 로 설정한다.

# as-is
<img src="https://example.com/sample">

# 설정
"wrapElement": {
  "tagName": "div"
  "attrs": [
    {
      "key": "style",
      "value": "display: inline-block; vertical-align: top; margin: 0px; padding: 0px;",
  ]
}

# to-be: 기본 값인 <div>로 감싸진다.
<div style="display: inline-block; vertical-align: top; margin: 0px; padding: 0px;">
  <picture>...</picture>
  <picture>...</picture>
  <picture>...</picture>
</div>
tagName (기본: DIV)

분할된 <IMG> 를 감싸는 요소명

Note

null 로 설정할 경우 분할된 태그를 감싸지 않는다.

attrs

감싸는 요소의 속성

usemap (기본: none)

  • none 이라면 usemap 이 적용된 <img> 는 분할하지 않는다.

  • remove 라면 usemap 을 제거하고 분할한다.

gif2video

GIF 포맷을 <video> 로 변환한다.

"gif2video": {
  "enable": true,
  "selector": null,
  "transcoder": "xcdr",
  "src": {
    "size": 102400,
    "width": {
      "min": 100,
      "max": 1920
    },
    "height": {
      "min": 100,
      "max": 2160
    },
    "data-attrs": null
  },
  "dest": {
    "formats": [ "webm", "mp4" ],
    "attrs": [ "autoplay", "loop", "muted", "playsinline" ],
    "loading": "lazy",
    "faststart": true,
    "responsive": {
      "video": "auto"
    }
  }
}
enable (기본: true)

GIF 포맷 이미지를 <video> 로 변환한다.

selector (기본: null)

<img> 태그 처리를 적용할 영역 CSS Selector. null 인 경우 pagefx.backend.img.selector 를 사용한다.

transcoder (기본: xcdr)

트랜스코더 엔진 키워드

src

원본 GIF 포맷 이미지 조건. 하위조건을 모두 만족하는 이미지만 변환한다.

size (기본: 102400 bytes)

이 값보다 큰 이미지만 변환한다.

width
min (기본: 100 px)

이 값보다 넓이가 큰 이미지만 변환한다.

max (기본: 1920 px, 최대: 7680px)

이 값보다 넓이가 작은 이미지만 변환한다.

height
min (기본: 100px)

이 값보다 높이가 큰 이미지만 변환한다.

max (기본: 2160px, 최대: 4320px)

이 값보다 높이가 작은 이미지만 변환한다.

data-attrs (기본: null)

lazy loading등에 사용되는 data-* 속성 이미지를 src 속성보다 우선하여 변환한다. null 로 설정하면 비활성화된다.

# 원본
<img src="/default1.gif" data-src="/sample.gif">
<img src="/default2.gif">

# gif2video.src.data-attrs: null
# src 속성 이미지를 변환한다.
<video>
  <source src="/default1.gif/xcdr/preset/_gif2mp4" type="video/mp4">
  <source src="/default1.gif" data-src="/sample.gif">
</video>
<video>
  <source src="/default2.gif/xcdr/preset/_gif2mp4" type="video/mp4">
  <source src="/default2.gif">
</video>

# gif2video.src.data-attrs: ["data-src"]
# data-src 속성 이미지를 변환한다.
<video>
  <source src="/sample.gif/xcdr/preset/_gif2mp4" type="video/mp4">
  <source src="/sample.gif">
</video>
<video>
  <source src="/default2.gif/xcdr/preset/_gif2mp4" type="video/mp4">
  <source src="/default2.gif">
</video>
dest

변환될 비디오 출력

formats (기본: [webm, mp4])

포맷 명령 예

동작

mp4

_gif2mp4 프리셋으로 트랜스코딩한다.

<source src=".../xcdr/preset/_gif2mp4" type="video/mp4">

webm

_gif2webm 프리셋으로 트랜스코딩한다. (코덱 기본값: av1)

<source src=".../xcdr/preset/_gif2webm" type="video/webm; codecs=av01.0.05M.08">

webm:vp9

_gif2webm 프리셋 기반에 vp9 코덱으로 트랜스코딩한다.

<source
  src=".../xcdr/preset/_gif2webm/options/video.codec=vp9"
  type="video/webm; codecs=vp9">

null

변환 미동작. gif2video 함수가 동작하지 않는다.
attrs (기본: [autoplay loop muted playsinline])

삽입될 <video> 태그의 속성

loading (기본: null)

비 가시영역의 <video> 를 지연로딩한다. null 이라면 비활성화된다.

  • lazy

    비디오를 지연로딩하며, 가시 영역에 인접시 재생을 시작한다.

    <video src="/sample.gif/xcdr/preset/_gif2mp4"
       preload="none" loading="lazy" loop
       width="800px" height="600px" type="video/mp4">
</video>
  • null

    문서 로딩 직후 비디오를 재생한다.

    <video src="/sample.gif/xcdr/preset/_gif2mp4"
       autoplay loop muted
       width="800px" height="600px" type="video/mp4">
</video>

Note

95.92% 의 브라우저가 지원한다. (23년 5월 기준 호환성)

faststart (기본: true)

비디오 헤더 정보를 시작 부분으로 재배치하여 더 빨리 재생되도록 한다.

responsive

반응형 비디오 처리

video (기본: auto)

<video> 태그를 이용한 디바이스/시나리오에 대한 비디오 대체제 제공.

  • auto

    # /gif2video/dest.formats=mp4,webp;responsive.video=auto
<video autoplay loop muted controls width="800" height="600">
    <source src="/sample.gif/xcdr/preset/_gif2mp4" type="video/mp4"
            onerror="this.parentElement.poster=this.parentNode.lastElementChild.src;">
    <source src="/sample.gif/xcdr/preset/_gif2webm" type="video/webm"
            onerror="this.parentElement.poster=this.parentNode.lastElementChild.src;">
    <source src="/sample.gif" type="image/gif">
</video>

  • none

    # 대체제 없이 formats[0]만 선택
# /gif2video/dest.formats=mp4,webp;responsive.video=none
<video autoplay loop muted controls width="800" height="600"
  src="/sample.gif/xcdr/preset/_gif2mp4"
  onerror="this.poster=this.lastElementChild.src;">
    <source src="/sample.gif" type="image/gif">
</video>

video

비디오를 처리한다.

"video": {
  "selector": null,
  "domain": null,
  "protocol": "http",
  "transcoder": "xcdr"
}
selector

비디오 처리 영역 (CSS Selector) 지정 null 인 경우 pagefx.backend.selector 를 사용한다.

domain (기본: null)

비디오 트래픽을 위임할 도메인.

  • 특정 도메인이 지정되어 있고 해당 도메인이 같은 노드에서 서비스되고 있다면 해당 가상호스트로부터 다운로드를 받는다.

  • null 이거나 알 수 없는 도메인이라면 proxy 함수를 통해 proxying한다. 따라서 구성시점에 proxy 함수를 활성화해주어야 한다.

protocol (기본: http)

도메인 호출 프로토콜. http 또는 https

transcoder (기본: xcdr)

트랜스코더 엔진 키워드

optvideo

비디오를 최적화한다.

"optvideo": {
  "enable": true,
  "selector": null,
  "src": {
    "size": 1048576,
    "width": 720,
    "height": 100,
    "bitrate": 1048576,
    "matchingList": [
      {
        "src": "(.*).example.com",
        "dest": "cdn.example.com"
      }
    ]
  },
  "dest": {
    "presets": [
      {
        "name": "_mp42webm",
        "type": "video/webm"
      },
      {
        "name": "_720p",
        "type": "video/mp4"
      }
    ],
    "attrs": [ "autoplay", "loop", "muted", "playsinline" ],
    "loading": "lazy",
    "faststart": true,
    "responsive": {
      "video": "auto"
    }
  }
}
enable (기본: true)

<video> 최적화 활성화

selector (기본: null)

<video> 태그 처리를 적용할 영역 CSS Selector. null 인 경우 pagefx.backend.video.selector 를 사용한다.

src

원본 비디오 처리 조건. 하위조건을 모두 만족하는 비디오만 트랜스코딩한다.

size (기본: 102400 bytes)

이 값보다 큰 비디오만 최적화한다.

width (기본: 100 px)

이 값보다 넓은 비디오만 최적화한다.

height (기본: 100 px)

이 값보다 긴 비디오만 최적화한다.

bitrate (기본: 102400 bytes)

이 값보다 큰 bitrate의 비디오만 최적화한다.

matchingList (기본: [])

비디오 최적화 대상 도메인 리스트. null 또는 [] 이라면 모든 <video> 를 최적화한다.

src

최적화 매칭 도메인 패턴. 정규식을 사용할 수 있다.

dest

트랜스코딩 위임 도메인

dest

변환될 비디오 출력

presets

반응형 비디오 프리셋 리스트

name

presets 에 선언된 프리셋 이름

type (기본: video/webm)

<source> 태그의 type 속성 값

프리셋

동작

_mp42webm

브라우저 호환을 위해 AV1, VP9 코덱 2종 구성한다. responsive.video=auto 설정시 동작한다.

<source src=".../video.mp4/xcdr/preset/_mp42webm" type="video/webm; codecs=av01.0.05M.08">
<source src=".../video.mp4/xcdr/preset/_mp42webm/options/video.codec=vp9" type="video/webm">

mp4 계열

 
<source src=".../xcdr/preset/_720p" type="video/mp4">
attrs (기본: [autoplay loop muted playsinline])

삽입될 <video> 태그의 속성

loading (기본: null)

비 가시영역의 <video> 를 지연로딩한다. null 이라면 비활성화된다.

  • lazy

    비디오를 지연로딩하며, 가시 영역에 인접시 재생을 시작한다.

    <video src="/sample.mp4/xcdr/preset/_720p"
       preload="none" loading="lazy" loop muted
       width="800px" height="600px" type="video/mp4">
</video>
  • null

    문서 로딩 직후 비디오를 재생한다.

    <video src="/sample.mp4/xcdr/preset/_720p"
       autoplay loop muted
       width="800px" height="600px" type="video/mp4">
</video>
faststart (기본: true)

비디오 헤더 정보를 시작 부분으로 재배치하여 더 빨리 재생되도록 한다.

responsive

반응형 비디오 처리

video (기본: auto)

<video> 태그를 이용한 디바이스/시나리오에 대한 비디오 대체제 제공.

  • auto

    # /optvideo/dest.presets=_mp42webm,_720p;responsive.video=auto
<video autoplay loop muted controls width="800" height="600">
  <source src="/sample.mp4/xcdr/preset/_mp42webm" type="video/webm; codecs=av01.0.05M.08">
  <source src="/sample.mp4/xcdr/preset/_mp42webm/options/video.codec=vp9" type="video/webm">
  <source src="/sample.mp4/xcdr/preset/_720p" type="video/mp4">
  <source src="/sample.mp4">
</video>

  • none mp4 프리셋만 지원한다.

    # 대체제 없이 dest.formats 중 첫번째 mp4 프리셋 선택
# /optvideo/dest.formats=_mp42webm,_720p;responsive.video=none
<video src="/sample.mp4/xcdr/preset/_720p" autoplay loop muted controls width="800" height="600">
  <source src="/sample.mp4"> # fallback을 위해 추가
</video>