워드프레스 젯팩의 포톤(photon)기능에서 특정 이미지 제외하기

1. 포톤(photon)은?

포톤은 워드프레스의 제작사인 Automattic에서 만든 젯팩(Jetpack)이라는 플러그인에서 제공하는 기능중 하나다. 포톤 기능을 활성화하면 자신의 사이트에서 전송되는 이미지를 워드프레스의 캐시서버가 자동으로 긁어가서 저장하고, 그 이후부터는 자신의 서버가 아니라 워드프레스의 서버에서 이미지들이 전송된다.

원래 포톤은 WordPress.com 블로그들의 로딩속도 향상을 위해 만들어진 기능이다. 그것이 젯팩(Jetpack)을 통해서 설치형 워드프레스 사용자들에게도 제공되면서, 트래픽 감소라는 부가적 효과도 가져오게 된 것이다.

포톤은 로딩속도를 향상시키기 위해서 여러가지 방법을 동원한다. 먼저 이미지를 캐시서버에 저장할 때 최적화를 거쳐서 이미지의 용량을 줄이고, 이미지의 크기와 사이트의 폭을 감안하여 이미지를 실시간으로 리사이즈해서 전송한다. 또한 많은 브라우저들이 도메인당 동시에 2개의 파일만 전송하도록 제한하고 있어서 동시에 많은 파일을 전송할 때 로딩속도가 느려지는데, 그것을 방지하기 위해서 여러개의 도메인을 통해 이미지를 전송한다.

하지만 한국에서 설치형 워드프레스를 운영하는 사람들에게는 포톤을 통한 로딩속도 향상은 그림의 떡일 뿐이다. 서버가 미국에 있기 때문에 오히려 로딩이 늦어지게 되는 것이다.

그래서 한국 설치형 워드프레스 사용자들이 포톤에 기대할 수있는 것은 트래픽 감소 효과정도다. 사실 설치형 블로그를 운영할 때, 가장 많은 트래픽을 소모하는 것이 바로 이미지다. 그래서 많은 설치형 워드프레스 사용자들이 피카사나 플리커등의 이미지 공유 서비스를 이용해서 트래픽을 절약하곤 한다. 그런데 워드프레스에서는 특성 이미지(Featured Image)는 외부 이미지를 이용하지 못하도록 제한하고 있기 때문에, 워드프레스 기본 테마인 “Twenty Fourteen“처럼 특성 이미지를 상당히 많이 사용하는 매거진 스타일의 테마를 사용하는 경우 트래픽 소모가 꽤 클 수 밖에 없다.

하지만 포톤을 사용하면 처음에 한 번 이미지가 캐시되고 나면, 특성 이미지를 포함한 거의 모든 이미지들이 자신의 서버가 아닌 워드프레스 서버에서 전송되므로, 상당한 양의 트래픽을 절약할 수 있게 된다.

한국 사이트 중에서는, 대안 뉴스 사이트로 유명한 슬로우뉴스가 포톤 기능을 사용하고 있다. 슬로우뉴스에 접속해서 이미지가 어떻게 나오는 지 보면 포톤이 적용되었을 때 이미지가 어떻게 표현되는 지 알 수 있을 것이다.

2. 포톤(photon)의 단점

포톤은 트래픽이 부족한 사이트 운영자에게 단비와 같은 좋은 기능이지만 단점이 없는 것은 아니다.

우선 이미지 전송 속도가 느려진다. 원래 포톤의 목적은 사이트의 트래픽 감소뿐만이 아니라, 사이트의 로딩속도도 빠르게 하는 것이다. 그래서 만약 미국에 있는 사이트에 포톤을 적용했다면, 미국에서는 사이트의 속도가 더 빨라지는 것을 볼 수 있을 것이다. 하지만 워드프레스 서버가 미국에 있기 때문에 한국에서는 속도가 느려질 수 밖에 없다. 이 부분은 별다른 해결 방법이 없으므로 사이트의 속도와 트래픽 감소 중에서 한 가지를 선택해야만 한다. 물론 속도가 중요하다면 포톤을 쓰지 말아야 한다.

둘째로 이미지의 화질이 저하된다. 포톤은 이미지의 전송 속도를 높이기 위해서 jpg의 화질을 80%로 조정하여 전송한다. 믈론 다른 포맷의 이미지들도 최적화 작업을 거치는데, 이 과정에서 이미지의 화질이 저하된다. 포톤은 내부 이미지나 외부 이미지에 상관없이 사이트의 모든 이미지를 캐시하여 전송하기 때문에, 피카사나 플리커등의 이미지 전문 공유 서비스를 사용해도 이 제한을 피할 수는 없다.

마지막으로 움직이는 gif가 정상 동작하지 않는다. 움직이는 gif가 포톤에 의해서 리사이즈가 되거나 변형되면, 움직이지 않고 정지 화면만 보이게 된다. 역시 포톤에 옵션을 통해 gif를 제외하는 설정 같은 것이 없기 때문에, 사이트에 움직이는 gif를 올리기 힘들어진다.

이외에도 포톤에는 몇가지 제한이 있는데 자세한 내용은 다음 링크의 문서를 보면 알 수 있다.
Jetpack Photon Support Page

3. 포톤에서 특정 이미지를 제외하는 방법

위에서 언급한 포톤의 단점중에서 이미지의 로딩 속도가 느려지는 것은 어쩔 수 없지만, 두번째와 세번째 단점은 해결이 가능하다.

해결방법의 원리는 간단하다. 아래에서 소개할 코드를 이용하면 특정 이미지를 포톤이 캐시하지 못하도록 할 수 있는데, 그 코드에서 피카사나 플리커등의 이미지 공유 서비스를 통해 전송되는 이미지를 포톤이 캐시하지 않도록 설정한다면, 피카사나 플리커 이미지는 고화질 그대로 전송하고, 자신의 웹호스팅에서 전송되는 이미지만 포톤에서 캐시해서 워드프레스 서버를 통해 전송되도록 할 수 있으므로, 필요한 이미지를 고화질로 전송하는 것이 가능해진다.

그리고 gif가 정상 동작하지 않는 것도 gif 이미지를 포톤이 캐시하지 못하게 함으로써 해결이 가능하다.

포톤에서 특정 이미지를 제외시키려면 우선 자신이 쓰고 있는 테마 폴더 안에 있는 function.php 파일 마지막에 다음 코드를 추가해야 한다. 워드프레스의 관리자 패널에서 “외모 → 편집기” 로 이동한 후, 우측에서 function.php를 선택하면 쉽게 편집할 수 있다.

Filezilla와 같은 FTP 프로그램을 이용하면 쉽게 FTP상의 파일을 편집할 수 있으니, FTP 프로그램을 이용해서 function.php를 편집해도 되고, Notepad++등의 텍스트 에디터에도 FTP기능이 들어있는 경우가 있으니 그런 기능을 사용해도 된다.

3.1 기본 코드

function my_photon_exception( $val, $src, $tag ) {
        if ( $src == 'YOUR_IMAGE_URL' ) {
                return true;
        }
        return $val;
}
add_filter( 'jetpack_photon_skip_image', 'my_photon_exception', 10, 3 );
  • 위의 코드에서 “YOUR_IMAGE_URL“에 이미지 주소를 넣으면 그 이미지는 포톤에서 캐시하지 않는다. 즉, 워드프레스 서버에서 전송하지 않고 원래 서버에서 전송하게 된다.
  • 여러개의 이미지 주소를 넣으려면 “( $src == 'IMAGE_URL_1' || $src == 'IMAGE_URL_2' )“와 같은 식으로 써주면 된다.

3.2 피카사와 플리커를 제외하는 코드

function my_photon_exception( $val, $src, $tag ) {
        $src1 = ereg("(googleusercontent|ggpht|staticflickr)\\.com", $src);
        if ( $src1 == true ) {
                return true;
        }
        return $val;
}
add_filter( 'jetpack_photon_skip_image', 'my_photon_exception', 10, 3 );
  • 정규표현식을 이용해서 “googleusercontent.com”, “ggpht.com”, 그리고 “staticflickr.com” 이라는 주소가 들어있는 이미지는 포톤의 캐시에서 제외시킨 코드다. 다른 도메인에서 제공하는 이미지도 추가로 포톤에서 제외시키려면 “(googleusercontent|ggpht|staticflickr|원하는_도메인)“과 같은 형식으로 추가해주면 된다.

3.3 gif를 제외하는 코드

function my_photon_exception( $val, $src, $tag ) {
        $src1 = ereg("\\.gif$", $src);
        if ( $src1 == true ) {
                return true;
        }
        return $val;
}
add_filter( 'jetpack_photon_skip_image', 'my_photon_exception', 10, 3 );
  • 정규표현식을 이용해서 “gif“로 끝나는 파일은 포톤의 캐시에서 제외시키는 코드다. 다른 확장자도 추가하고 싶다면 “(\\.gif|\\.추가할_확장자)$“와 같이 새로운 확장자를 추가해주면 된다.

3.4 3.2와 3.3의 코드를 합친 코드

function my_photon_exception( $val, $src, $tag ) {
        $src1 = ereg("(googleusercontent|ggpht|staticflickr)\\.com", $src);
        $src2 = ereg("\\.gif$", $src);
        if ( $src1 == true || $src2 == true ) {
                return true;
        }
        return $val;
}
add_filter( 'jetpack_photon_skip_image', 'my_photon_exception', 10, 3 );
  • 피카사와 플리커의 이미지를 캐시하지 않도록 하는 코드와 gif 파일을 캐시하지 않도록 하는 코드를 합친 코드다. 앞에서 언급한 포톤의 두가지 단점을 해결하려면 이 코드를 사용하면 된다.

※ 이글은 Skip an Image with Photon – Jetpack for WordPress을 참조했다.

이 글 공유하기:

댓글 남기기

14 댓글 / "워드프레스 젯팩의 포톤(photon)기능에서 특정 이미지 제외하기"

댓글 이메일 구독
avatar
정렬:   최신순 | 오래된 순
wpDiscuz