Bolt의 모든 이미지를 WebP로 변환하는 방법

CDN OptiPic — "차세대 형식으로 이미지 제공" 문제에 대한 간단한 솔루션

권장 사항에 따르면
Google PageSpeed Insights

5분 안에
간편한 연결

무료 기술 지원
+ 설치 도움말

즉석에서 스마트 WebP 변환

OptiPic CDN은 이미지를 요청할 때 무엇을 합니까?:

이미지의 WebP 버전을 반환합니다.
브라우저가 WebP 형식을 지원하는 경우
webp 없이 압축된 버전을 반환합니다.
브라우저가 WebP를 지원하지 않는 경우
모바일 화면에 반응하도록 만듭니다.
모바일에서 이미지를 열었을 경우
캐시 및 로딩 속도 향상
귀하의 호스팅에서 부하 줄이기
이미지를
보호합니다.
EXIF 및 IPTC 태그에 의한 저작권 보존
자신의
도메인 이름 사용
img.domain.com 등에서 이미지를 로드하려면
지연 로드
이미지
페이지를 스크롤할 때 이미지가 로드됩니다.

Webp 및 이미지 압축으로의 변환은 백그라운드에서 발생하며 브라우저에서 이미지를 여는 속도를 늦추지 않습니다.
이미지 요청 시 최적화된 버전이 아직 준비되지 않은 경우 처리 없이 원본 버전을 반환합니다.

Bolt에 연결하는 방법

사이트에서 이미지를 최적화하는 것

사이트 속도 향상
SEO 개선
전환의
증가
Google
Pagespeed Insights의 증가

Bolt에 WebP를 사용할 가치가 있는 이유는 무엇입니까?

Webp를 사용하면 Google Pagespeed Insights의 "차세대 형식으로 이미지 제공" 문제가 해결됩니다.

요컨대 WebP는 이전 형식(png 및 jpeg)보다 파일을 더 잘 압축하고 다른 모든 조건은 동일합니다. 즉, 호스팅 공간을 덜 차지하고 페이지를 볼 때 브라우저에서 더 빠르게 로드됩니다.

WebP의 구현은 Google에서 적극적으로 추진하며 다음과 같은 통계를 제공합니다.

WebP는 PNG보다 26% 더 나은 손실 없이 이미지를 압축합니다.
WebP는 동일한 SSIM(구조적 유사성 지수)으로 손실 이미지를 JPEG보다 25~34% 압축합니다.
WebP는 22%의 크기 증가로 무손실 투명도(알파)를 지원합니다.

방문자의 브라우저가 WebP를 지원하지 않는 경우 CDN은 이전 형식(png/jpeg)을 반환하지만 압축(웹에 최적화됨)

이미지 압축이란

이미지 최적화는 시각적 품질의 손실 없이 크기를 최소화하기 위해 그래픽 파일을 특수 처리하는 것입니다.

이 절차를 수행하기 위해 상당히 복잡한 알고리즘이 많이 있습니다. 그러나 그것들은 모두 동일한 기반을 기반으로합니다. 모든 서비스 데이터 (예 : 파일을 저장하는 프로그램 이름 등)는 그래픽 파일에서 제거해야하며 특수 프로그램을 사용하여 병합 / 부드러운 유사한 색상.

결과적으로 시각적으로 변경되지 않은 동일한 이미지를 얻습니다. 그러나 바이트 단위의 이 파일의 볼륨(무게)은 원본보다 훨씬 적습니다. 이 처리가 올바르게 수행되면 이미지 품질을 잃지 않고 이미지 파일을 98%까지 줄일 수 있습니다.

즉, 최적화 후 사이트 페이지의 사진이 몇 배 더 빠르게 로드됩니다.

사이트에 최적화된 이미지

디스크 공간을 절약하십시오.
페이지 로딩 속도를 높입니다.
최소 서버 로드.
전환율을 높입니다.
검색 결과에 대한 사이트 순위 향상.

웹사이트 가속이 행동 요인을 개선하고 웹사이트 전환을 증가(판매 증가)할 수 있음이 입증되었습니다. 사이트의 페이지가 오래 로드될수록 특정 대상 작업을 수행할 수 있는 고객은 줄어듭니다. 인터넷 사이트가 충분히 빠르게 작동하지 않으면 잠재적인 수입을 놓칠 모든 기회가 있습니다. 온라인 리소스의 가속화는 전환을 개선할 수 있는 기회를 제공하고 이로 인해 수익이 크게 증가하고 더 많은 고객을 유치할 수 있습니다.

OptiPic 혜택

월별 지불이 없습니다.
완전 자동화.
무료 연결 지원.
서비스를 연결하고 사용하기 위해 프로그래밍이나 관리에 대한 특별한 기술이 필요하지 않습니다.
시스템의 이미지 크기에는 제한이 없습니다.
친절한 기술 지원.

Bolt에 대한 이미지를 최적화하면 사이트 속도를 높일 수 있습니까?

모든 사이트의 페이지는 다음으로 가장 자주 구성됩니다.

이미지;
html-code(텍스트 내용, 레이아웃, 마크업);
동영상;
브라우저에서 실행되는 논리가 있는 자바스크립트 스크립트.
페이지 스타일이 있는 CSS 파일.

이미지와 같은 항목은 사이트 페이지 전체 볼륨의 대부분을 차지하며 페이지에서 "가장 무거운" 부분입니다. 이미지 축소(최적화)는 의심할 여지 없이 온라인 리소스를 더 빠르게 다운로드할 수 있게 해줍니다.

따라서 이미지 크기를 변경(아래)하면 사이트의 모든 페이지가 훨씬 빠르게 로드되기 시작합니다.

사이트에서 이미지를 압축하면 시각적 품질을 잃지 않고 볼륨을 75-98%로 줄일 수 있습니다.

OptiPic CDN을 연결하는 방법 Bolt?

옵션 #1: PHP를 통한 범용 연결(GitHub 라이브러리)

사이트에 있는 이미지의 URL은 자동으로 변경됩니다. .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

GitHub의 php-library에 대한 문서 및 예
연결에 대한 무료 도움 받기
이미지가 OptiPic CDN을 통해 로드 중인지 확인
CDN: 문서의 이미지용 URL 변환기

요청에 의한 무료 통합

옵션 #2: Nginx 프록시를 통한 범용 연결

사이트의 이미지 URL은 변경되지 않습니다. 이제 모든 이미지 트래픽이 자동으로 OptiPic CDN으로 진행됩니다.

# 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 계정의 사이트 ID
nginx를 재부팅하기 전에 새 버전의 구성이 올바른지 확인하는 것이 좋습니다. 당신은 명령으로 이것을 할 수 있습니다 nginx -t.
소프트 다시 로드(구성 다시 읽기) Nginx는 명령으로 수행할 수 있습니다. nginx -s reload
Nginx 프록시 문서
연결에 대한 무료 도움 받기
이미지가 OptiPic CDN을 통해 로드 중인지 확인

무료 통합 받기

무료 요금제라도

옵션 #3: `.htaccess`를 통한 연결(Apache 프록시)

사이트의 이미지 URL은 변경되지 않습니다. 이제 모든 이미지 트래픽이 자동으로 OptiPic CDN으로 진행됩니다.

#---------------------------------------
# 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 액세스 권한이 있는지 확인하는 것이 좋습니다.
연결에 대한 무료 도움 받기
이미지가 OptiPic CDN을 통해 로드 중인지 확인

무료 통합 받기

무료 요금제라도