목적
본 글은 Webp 시험을 위한 글입니다. 이 글에서 사용한 그림 파일은 PNG 또는 JPG 그림 파일인데 EWWW IO Plugin 을 이용하여 접속하는 Browser 종류에 따라 Webp 이미지로 대체하여 보여주는 것이 가능한 지를 확인하고자 합니다.
시험 환경
- WordPress v5.3.2
- EWWW IO plugin v5.2.2
- NGINX 1.17.7
첫 번째 시험
시험을 위해 그림 파일을 추가해 보겠습니다. 오른쪽 그림 파일은 342 x 490 , 48 kB JPG 그림 파일입니다. 이 그림은 JPG 파일만 존재하고 있고, webp 파일은 없습니다. Chrome Browser 개발자 도구에서 확인해 보니 원본 파일인 JPG 를 그대로 가져 와서 보여 주고 있습니다.
AD
HTTP/1.1 200 OK
Server: nginx/1.14.2
Date: Wed, 11 Mar 2020 07:16:33 GMT
Content-Type: image/webp
Content-Length: 43174
Last-Modified: Tue, 10 Mar 2020 09:42:19 GMT
Connection: keep-alive
ETag: "5e6760fb-a8a6"
Access-Control-Allow-Origin: *
Vary: Accept
Accept-Ranges: bytes
두 번째 시험
오른쪽 그림 파일은 원본인 JPG 파일과 동일한 파일명에 webp 확장자를 가진 그림 파일 2개가 서버에 저장되어 있습니다. 이 경우, WebP 형식을 지원하는 Browser, 예를 들어, Chrome, Opera, FireFox 등에서는 WebP 파일을 가져와서 보여주고, WebP 형식을 지원하지 않는 IE, Edge, 그리고, Safari 에서는 JPG 파일을 가져와서 보여 주는 것을 확인했습니다.
Browser 별로 살펴 본 실제 응답 헤더 (response header) 를 살펴 보면 다음과 같습니다.
| 지원 Browser | Opera (67.0.3575.53) ———————————————— Content-Type: image/webp Content-Length: 14620 Chrome ( 80.0.3987.132 (Official Build) (64-bit) ) ———————————————– Content-Type: image/webp Content-Length: 14620 Firefox ———————————————- Content-Type: image/webp Content-Length: 14620 |
| 미지원 Browser | IE 11 (11.657.18362.0) ———————————————- Content-Length: 72158 Content-Type: image/jpeg Edge ( build 18362 ) ———————————————- Content-Length: 16337 Content-Type: image/jpeg |
(참고) 다른 Browser 와 달리 IE 11 의 경우 파일 크기가 큰 이유는 속도 향상을 위해 WordPress Plugin 이 미리 생성해 둔 그림 파일을 사용하지 않고, 최초 원본 파일을 가져오기 때문입니다.
결론
장점
- PNG, JPG 대비 좀 더 그림 파일 크기를 줄일 수 있어서 전체 다운로드 속도 개선을 기대 할 수 있음.
단점
- WordPress 에서 직접 Webp 파일 업로드가 불가능하기에 Theme 의 functions.php 파일 수정이 필요함.
- nginx/apache 설정 파일 수정이 필요함
- WebP 형식을 지원하지 않는 Browser 지원을 염두에 둔다면 기존 원본 JPG, PNG 파일과 함께 WebP 파일이 있어야 하기 때문에 추가적인 저장 공간(=하드 디스크)을 필요로 함.
※ 주: 표지 그림 출처
Image by simplu27 from PixabayIcons made by Freepik from www.flaticon.com
AD
