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

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

권장 사항에 따르면
Google PageSpeed Insights

5분 안에
간편한 연결

비디오 지침
2분

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

즉석에서 스마트 WebP 변환

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

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

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

플러그인 다운로드 (v1.29.1) 플러그인으로 이동

모듈 구성을 위한 비디오 지침 PrestaShop

WebP를 PrestaShop에 연결하는 5가지 쉬운 단계

단계 #1: 플러그인 다운로드 PrestaShop WebP

사이트에 PrestaShop용 공식 CDN OptiPic 플러그인을 다운로드하고 설치합니다.

단계 #2: OptiPic CDN 가입

OptiPic CDN 계정에 등록하고 CDN 제어판에 새 사이트를 추가하세요.

단계 #3: 사이트 ID 복사

생성된 웹사이트의 ID를 클립보드에 복사 (Ctrl + C)

단계 #4: 플러그인에 사이트 ID 붙여넣기 PrestaShop WebP

귀하의 사이트에 이전에 설치된 플러그인의 설정 페이지로 이동하십시오.

복사한 사이트 ID를 해당 설정 필드에 붙여넣습니다.

단계 #5: 설정 저장

플러그인 설정을 저장합니다. 제어판 PrestaShop에서 캐시를 지웁니다.

필요한 경우 다른 플러그인 설정 변경

모듈 설정에 대한 설명

Site ID in your personal account CDN OptiPic (개인 계정에 있는 사이트 ID CDN OptiPic): CDN OptiPic 개인 계정에서 웹사이트 ID를 찾을 수 있습니다. 아직 계정에 사이트를 추가하지 않았다면 계정에 추가하십시오.
자동 충실도를 끄려면 사이트 ID를 지우면 됩니다.
Domain list (if images are loaded via absolute URL) (도메인 목록(이미지가 절대 URL을 통해 로드되는 경우)): 프로토콜(http/https)을 지정하지 않고 새 줄에 각각.
예:
mydomain.com
www.mydomain.com
Site pages that do not include auto-replace (자동 교체가 포함되지 않은 사이트 페이지): 각각은 새 줄에 있으며 슬래시(/)로 시작해야 합니다.
Replace only URLs of images starting with a mask (마스크로 시작하는 이미지의 URL만 교체): 각각은 새 줄에 있으며 슬래시(/)로 시작해야 합니다.
예:
/업로드/
/upload/test.jpeg
List of 'srcset' attributes ('srcset' 속성 목록): 이미지의 srcset-markup을 대체해야 하는 태그 속성 목록
srcset이란 무엇입니까?
예:
srcset
데이터-srcset
CDN domain (CDN 도메인): CDN OptiPic이 작동할 도메인입니다. 표준 cdn.optipic.io 대신 하위 도메인(img.yourdomain.com, optipic.yourdomain.com 등)을 사용할 수 있습니다. 하위 도메인을 연결하려면 OptiPic 기술 지원에 문의하십시오.

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

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

PrestaShop에 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%까지 줄일 수 있습니다.

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

사이트에 최적화된 이미지

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

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