사이트 방문자가 WebP 형식을 지원하는 브라우저를 사용하는 경우 CDN은 그에게 정확히 WebP 버전의 이미지를 제공합니다(WebP 버전은 CDN 측).
WebP를 사용할 가치가 있는 이유는 무엇입니까?
Webp를 사용하면 Google Pagespeed Insights의 "최신 이미지 형식 사용" 문제가 해결됩니다.
간단히 말해서 WebP는 이전 형식(png 및 jpeg)보다 파일을 더 잘 압축하고 다른 모든 사항은 동일합니다. 즉, 호스팅 공간을 덜 차지하고 페이지를 볼 때 브라우저에서 더 빠르게 로드됩니다.
WebP의 구현은 Google에서 적극적으로 추진하며 다음과 같은 통계를 제공합니다.
방문자의 브라우저가 Webp를 지원하지 않는 경우 방문자에게 원본 형식(png/jpeg)의 이미지가 제공되지만 사전 압축/최적화됩니다.
방문자가 휴대 전화에서 사이트를 열면 이미지가 자동으로 압축되거나 Webp로 변환될 뿐만 아니라 자동으로 너비가 줄어듭니다(모바일 인터넷에서 이미지 다운로드 속도를 더욱 높이기 위해).
이미지는 모든 요청이 있을 때마다 즉시 변환, 최적화 및 압축되지 않습니다. 이러한 모든 절차는 요청된 이미지에 대해 CDN에서 한 번 수행됩니다. 백그라운드에서 귀하의 사이트 방문자에게 이미지 전달 속도를 늦추지 않도록 합니다.
.htaccess
또는 php.ini
에 한 줄만 추가하면 됩니다..htaccess
php_value auto_prepend_file "<SITE_ROOT_DIRECTORY>/optipic-cdn-php/optipic-cdn-php/auto_prepend_file.php"
php.ini
; Automatically add files before PHP document. ; http://php.net/auto-prepend-file auto_prepend_file = <SITE_ROOT_DIRECTORY>/optipic-cdn-php/optipic-cdn-php/auto_prepend_file.php
# OptiPic CDN: insert it into the Server structure location ~* \.(png|jpg|jpeg)$ { resolver 8.8.8.8; # Google DNS set $cdn_host_value "cdn.optipic.io"; set $from_optipic "yes"; # to disable CDN OptiPic - set "no" value if ($arg_no_optipic) { set $from_optipic "no"; set $cdn_host_value $host; } proxy_redirect off; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $cdn_host_value; if ($from_optipic = "yes") { rewrite ^/(.*) /site-XXXXXX/$1 break; proxy_pass http://$cdn_host_value; } # get-param ?no_optipic=1 - get image from your hosting directly (without CDN OptiPic) try_files $uri 404; }
XXXXXX
— CDN OptiPic 계정의 사이트 IDnginx -t
. nginx -s reload
.htaccess
를 통한 연결(Apache 프록시)#--------------------------------------- # OptiPic CDN # Requires enabled Apache modules: `rewrite`, `proxy_module` and `proxy_http_module` # Add new 'IfModule mod_rewrite.c' block or inject into exist one # Get support: https://optipic.io/get-free-help/?cdn=1 <IfModule mod_rewrite.c> RewriteEngine On SSLProxyEngine On RewriteCond %{QUERY_STRING} !no_optipic= RewriteRule "^(.*)\.(jpg|jpeg|png)$" "http://cdn.optipic.io/site-XXXXXX/$1.$2" [P] </IfModule> #----------------------------------------
XXXXXX
— CDN OptiPic 계정의 사이트 ID.htaccess
를 수정하기 전에 파일을 백업하고 파일에 FTP 액세스 권한이 있는지 확인하는 것이 좋습니다.<img src="/upload/foo/bar/image.png">
<img src="//cdn.optipic.io/site-XXXXXX/upload/foo/bar/image.png">
XXXXXX
— CDN OptiPic 계정의 사이트 ID