그러나 WebP를 통해 이미지를 전달하는 것은 쉽지 않습니다. 서버의 웹 서버, 선택한 cdn, 테마, 캐싱 플러그인 등에 따라 다릅니다.
이 가이드는 세 가지 방법으로 WebP 이미지를 WordPress에 제공하는 데 도움이 됩니다.
WebP는 무엇입니까?
웹을 위한 새로운 이미지 형식
Google 제공
WebP는 Google에서 개발한 이미지 형식(예: png 및 jpg)입니다. WebP(.webp) 이미지는 훨씬 더 작은 경향이 있어 웹사이트 속도를 높이고 대역폭을 덜 사용합니다.
이미지에 따라 크기를 25%에서 70%로 줄일 수 있습니다.
JPEG, PNG, GIF 등은 장단점이 있습니다. 아래 표에서 아이디어를 얻을 수 있습니다.
| JPG | GIF | PNG | SVG | |
| 벡터 | ❌ | ❌ | ❌ | ✅ |
| 래스터 | ✅ | ✅ | ✅ | ❌ |
| 투명도 | ❌ | ✅ | ✅ | ✅ |
| 생기 | ❌ | ✅ | ✅ | ✅ |
| 잃어버린 | ✅ | ❌ | ❌ | ❌ |
WebP에는 위에서 언급한 거의 모든 기능이 있습니다! 그렇다면 왜 모든 곳에서 WebP를 사용할 수 없습니까?
왜 모든 곳에서 WebP를 사용하지 않습니까?
보시다시피 기기의 80%만이 WebP만 지원합니다. 레거시 브라우저뿐만 아니라 Safari/iOS Safari는 여전히 WebP를 지원하지 않습니다.
WebP를 제공하는 것이 왜 그렇게 어려운가요?
아시다시피 브라우저에 따라 이미지를 제공합니다. 브라우저가 WebP를 지원하지 않는 경우 원본 이미지(jpg/png/gif)를 제공해야 합니다.
WebP를 제공하는 두 가지 주요 방법이 있습니다.
이미지 태그 사용
우리는 사용할 수 있습니다그림태그를 사용하여 브라우저에 WebP 형식이 있음을 알립니다. 브라우저에서 지원하는 경우 일반/대체 이미지가 로드됩니다.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>다른 답변으로
평소와 같이 다른 답변에는 하나의 파일이 있습니다. 정확히:
<img src="img.jpg" />하나의 이미지 URL은 jpg 및 webp 파일의 전달을 지원합니다. 이것이 서버가 하는 일입니다.
.jpg 파일 확장자라도 브라우저가 WebP를 지원하면 WebP가 응답합니다. "다양한 대응"이라고도 합니다.
이미지 태그 vs 다양한 반응
각각 장단점이 있습니다. 다음은 비교표입니다.
| 이미지 태그 | 다양한 대응 | |
|---|---|---|
| 배경 이미지와 함께 작동 | ❌ | ✅ |
| CDN 친화적 | ✅ | ✅ (일부만) |
| 서버를 구성해야 합니다. | ❌ | ✅ (nginx) |
| 지연 로딩과 함께 작동 | ✅ | ✅ |
WordPress의 WebP에서 이미지를 제공하는 방법은 무엇입니까?
방법 #1 - 플라이 WebP 변환에서만 CDN 사용
이것은 아마도 가장 간단한 해결책일 것입니다. 일부 CDN 제공업체는 현재 이미지 최적화와 함께 즉석 이미지에서 WebP로의 변환을 지원합니다.
다음은 몇 가지입니다.
- 버니씨디엔
- 폴란드어 포함 Cloudflare(프로 플랜)
- 구름
- ShortPixel 적응형 이미지(StackPath CDN 사용)
- WP 압축
일반 WebP 이미지와 변환된 WebP 이미지를 모두 저장할 필요가 없기 때문에 이 방법을 사용하여 디스크 공간을 절약할 수도 있습니다.
버니씨디엔
BunnyCDN은 이미지를 압축하고 즉시 WebP로 변환할 수 있는 Bunny Optimizer와 함께 제공됩니다.
방법 #2 - 다양한 응답 + CDN 사용
위에서 설명한 것처럼 "다양한 응답"에는 요청된 브라우저에 따라 WebP 및 비 webp 이미지를 모두 제공할 수 있는 단일 이미지 URL이 있습니다.
또한 WebP 요청 헤더를 캐시 키로 지원하는 올바른 CDN을 선택해야 합니다. 그렇지 않으면 WebP 이미지가 서버에 캐시되면 WebP를 지원하지 않는 브라우저에 전달됩니다.
WordPress에서 다양한 응답 사용자 지정
WordPress에서 WebP에 대한 풍부한 응답을 설정하는 가장 쉬운 방법은 WebP Express 플러그인을 사용하는 것입니다. 플러그인을 설치하고 "설정 저장 및 새 .htaccess 규칙 적용"을 클릭하기만 하면 됩니다.
WebP Express는 WebP 변환기를 구성하고 규칙을 덮어쓰므로 요청을 받으면 즉시 이미지를 WebP로 변환하고 브라우저가 WebP를 지원하지 않는 경우 기본 이미지가 전달됩니다.
Nginx에 있는 경우
WebP Express는 필요한 '.htaccess' 재작성 규칙을 추가하지만 Apache, LiteSpeed 또는 OpenLiteSpeed 서버에서만 작동합니다. Nginx를 사용하는 경우 편집해야 합니다.nginx.config다음 코드를 추가하십시오.
# WebP Express 규칙# --------------------위치 ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Vary 수락;만료 365d;if ($http_accept !~* "webp"){break;}try_files/wp-content/webp-express/webp-images/doc-root/$uri.webp$uri.webp/wp-content /plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content;}# 존재하지 않는 webps에 대한 요청을 변환기 위치로 라우팅 ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ------------------ (WebP Express 규칙은 여기에서 끝납니다)위의 코드는 필요한 응답 헤더를 추가하고(캐시 관리도 다양함) WebP가 있으면 전달하려고 시도하고, 그렇지 않으면 변환기로 리디렉션합니다(브라우저 지원 기반).
다양한 대응을 지원하는 CDN 제공업체
CDN 공급자가 WebP를 캐싱 키로 지원하지 않는 경우 WebP 파일은 WebP를 지원하지 않는 브라우저로 전달됩니다. 마찬가지로 webp가 아닌 이미지가 지원되는 브라우저에 전달될 가능성이 있습니다.
버니씨디엔 , 키 CDN , 구글 CDN 다른 많은 CDN 공급자는 WebP를 캐시 키로 지원합니다. 설정에서 활성화했는지 확인하십시오.
V버니씨디엔 :
V키 CDN :
Cloudflare의 무료 요금제를 사용 중이신가요?
불행히도 Cloudflare의 무료 플랜은 WebP를 캐시 키로 지원하지 않습니다. BunnCDN과 같은 CDN을 사용하거나 전문 계획으로 업그레이드하십시오.
인기있는 호스팅 제공 업체와 다양한 응답 + CDN 설정
WebP Express가 설치되어 있는지 확인하십시오.
- Kinsta 또는 WP 엔진 - 위의 Nginx 구성을 추가하고 CDN(KeyCDN)에 WebP 캐싱 키를 포함하려면 지원팀에 문의하세요.
- Cloudways - WebP Express를 설치하고 .htacess를 사용하여 설정을 저장하십시오. Cloudways는 하이브리드 Apache + Nginx 접근 방식을 사용하기 때문에 즉시 사용할 수 있습니다.
- SiteGound - Nginx 구성을 추가하려면 지원팀에 문의하십시오. 위와 같이 지원되는 CDN을 사용하세요.
- LiteSpeed / OpenLiteSpeed / Apache 서버 - WebP Express를 설치하고 '.htacess'로 설정을 저장하기만 하면 됩니다. 또한 위와 같이 지원되는 CDN을 사용하십시오.
- Nginx(LEMP 스택)를 사용한 사용자 지정 VPS - 설정
nginx.conf위와 같이 지원되는 CDN을 사용합니다.
방법 #3 - 이미지 태그 사용
위의 두 가지 방법이 모두 효과가 없으면 이미지 태그를 사용할 수 있습니다. 서버 구성(nginx.conf 편집)이 필요하지 않으며 모든 CDN 공급자를 지원합니다.
이 방법을 사용하면 WebP 전달을 위한 HTML이 변경됩니다. 배경 이미지에서는 작동하지 않으며 일부 테마, 캐싱 플러그인, 지연 로딩 플러그인 등과 호환되지 않습니다.
이 방법을 사용하면 모든 img 태그가 다음과 같이 변환됩니다.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>브라우저가 WebP를 지원하는 경우 해당 파일을 전달하고, 그렇지 않은 경우 일반 이미지를 전달합니다.
WordPress에서 WebP용 이미지 태그 사용자 지정
이미지 태그를 설정하는 가장 쉬운 방법은 WebP Express를 사용하는 것입니다.
작동 모드를 "CDN 친화적"으로 설정하고 "HTML 변경"을 활성화합니다.
결론
모든 브라우저가 WebP를 지원하는 날이 왔으면 좋겠습니다!
한 달에 몇 달러를 쓸 수 있다면 가장 쉽고 효율적인 방법은 이미지를 즉시 WebP로 변환하는 BunnyCDN과 같은 CDN을 사용하는 것입니다. 그렇지 않으면 위에서 언급한 방법 #2를 고수하십시오.
