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

# 이미지 최적화, 이미지 분할, 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` 자바스크립트를 페이지에 자동으로 삽입한다. `false` 라면 삽입하지 않는다.(=동작하지 않는다.)
`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" />

에러 메시지¶

응답코드	`x-sc-chain-error` 필드	설명
`400`	invalidsplitheight	이미지 분할 높이가 유효 값이 아님
`404`	invalidresource	fxjs 리소스 요청 주소를 찾을 수 없음
`510`	emptypreset	`optvideo` 프리셋 미설정
`510`	invalidpreset	`optvideo` 프리셋 설정 오류

`<iframe>` 크기 최적화 가이드¶

iframe-resizer 를 이용하면 부모 페이지에서 <iframe> 으로 포함되는 상품기술서의 높이와 너비를 자동으로 조정할 수 있다.

상품기술서를 <iframe> 으로 포함시키는 부모 페이지에서 삽입한다.

# 클라우드 플레어 링크
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.9/iframeResizer.min.js"></script>

# 다운받아 자사 도메인으로 배포
<script type="text/javascript" src="//m.example.com/js/iframe-resizer/4.3.9/iframeResizer.min.js"></script>

기존 <iframe style="..." /> 에 적용된 height 를 제거하거나, auto 로 변경한다.

DOM 로딩 완료 후 아래 스크립트를 삽입한다.

<script>iFrameResize({log: false}, document.querySelector('iframe'))</script>

포함되는 페이지 하단에 아래 스크립트를 삽입한다.

# 클라우드 플레어 링크
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.9/iframeResizer.contentWindow.min.js"></script>

# 또는 자사 도메인으로 배포
<script src="//m.example.com/js/iframe-resizer/4.3.9/iframeResizer.contentWindow.min.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": false,
  "selector": "iframe",
  "library": {
    "parent": {
      "enable": false,
      "option": null
    },
    "child": {
      "enable": false
    }
  }
}

enable (기본: false): 동작 활성화
selector (기본: iframe): 부모페이지의 <iframe> 요소 선택자

library.parent¶

"library": {
  "parent": {
    "enable": false,
    "option": null
  }
}

enable (기본: false)

부모페이지의 라이브러리 로딩 여부. 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": false
  }
}

enable (기본: false): 자식페이지의 라이브러리 로딩 여부

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">

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 이라면 최대 가로폭을 적용하지 않는다. 값을 설정하면 해당 값보다 큰 폭의 이미지는 줄인다.

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월 기준 호환성)

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])

변환 포맷 [ 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월 기준 호환성)

caniuse.com - IntersectionObserver¶

faststart (기본: true)

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

responsive

반응형 비디오 처리

video (기본: auto)

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

auto

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

none

# 대체제 없이 formats[0]만 선택
# /gif2video/dest.formats=mp4,webp;responsive.video=none
<video src="/sample.gif/xcdr/preset/_gif2mp4" autoplay loop muted controls
  width="800px" height="600px" type="video/mp4"
  onerror="this.parentElement.poster=this.parentNode.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
  },
  "dest": {
    "presets": [
      {
        "name": "_720p",
        "type": "video/mp4"
      },
      {
        "name": webm",
        "type": "video/webm"
      }
    ],
    "attrs": [ "autoplay", "loop", "muted", "playsinline" ],
    "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의 비디오만 최적화한다.

dest

변환될 비디오 출력

presets

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

name: presets 에 선언된 프리셋 이름
type (기본: video/mp4): <source> 태그의 type 속성 값

attrs (기본: [autoplay loop muted playsinline])

삽입될 <video> 태그의 속성

faststart (기본: true)

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

responsive

반응형 비디오 처리

video (기본: auto)

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

auto

# /optvideo/dest.presets=_720p_mp4,_webm;responsive.video=auto
<video autoplay loop muted controls width="800px" height="600px">
  <source src="/sample.mp4/xcdr/preset/_720p_mp4" type="video/mp4">
  <source src="/sample.mp4/xcdr/preset/_webm" type="video/webm">
  <source src="/sample.mp4">
</video>

none

# 대체제 없이 formats[0]만 선택
# /optvideo/dest.formats=_720p_mp4,_webm;responsive.video=none
<video src="/sample.mp4/xcdr/preset/_720p_mp4" autoplay loop muted controls width="800px" height="600px" type="video/mp4">
</video>

pagefx¶

How to use¶

명령어 리스트¶

에러 메시지¶

<iframe> 크기 최적화 가이드¶

meta¶

frontend¶

responsive¶

viewmore¶

height¶

button¶

pinchzoom¶

iframeAutoHeight¶

library.parent¶

library.child¶

backend¶

session¶

timeout¶

longlead deprecated¶

debug¶

elements¶

style¶

isolstyle¶

img¶

optimg¶

splitimg¶

gif2video¶

video¶

optvideo¶

`<iframe>` 크기 최적화 가이드¶

longlead `deprecated`¶