목적
본 글은 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 를 그대로 가져 와서 보여 주고 있습니다.
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
![Poster for the movie "베이비 드라이버"](https://www.boolsee.pe.kr/wp-content/uploads/2017/10/fUfZ2zECULlN0pGPgXkez5rF7Hj-1.jpg)
두 번째 시험
오른쪽 그림 파일은 원본인 JPG 파일과 동일한 파일명에 webp 확장자를 가진 그림 파일 2개가 서버에 저장되어 있습니다. 이 경우, WebP 형식을 지원하는 Browser, 예를 들어, Chrome, Opera, FireFox 등에서는 WebP 파일을 가져와서 보여주고, WebP 형식을 지원하지 않는 IE, Edge, 그리고, Safari 에서는 JPG 파일을 가져와서 보여 주는 것을 확인했습니다.
![](https://www.boolsee.pe.kr/wp-content/uploads/2020/02/5E4C6D-34F0-4E3B-8CE4-9D2BE4674A0B.large_.740x490.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 Pixabay