HTML webp 이미지 포맷

webp [weppy]

A new image format for the Web  |  WebP  |  Google Developers

소개 : webp 포맷은 구글에서 만든 무손실/손실 지원 이미지 압축 포맷 방식이다. (jpeg, png, gif)

Google Lighthouse(사이트 성능 점수 확인)를 써보니, next-gen 이미지 포맷을 사용하라고 하길래

써봤는데, 퀄리티도 나쁘지 않고, 로딩이 빨라져서 webp 포맷을 계속 사용할 것 같다.

(특히 썸네일 파일을 webp로 압축하여, 로딩 속도를 조금 높였다. (약 0.8s)

 

1. 설치법

옵션 1) binary 파일을 받아서 직접 실행

https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html

Index of downloads.webmproject.org/releases/webp

맨 아래로 스크롤해서 운영체제에 맞게 다운로드하면 된다. 첨부파일 v1.1.0 버전에

input폴더에 jpg, png, gif를 넣으면 output폴더에 자동으로 변환해주는 batch 파일도 만들었다. (퀄리티=85)

webp-1.1.0.zip

3.74MB

@echo off
mode con cols=81 lines=35
title JPG/PNG to WEBP
setlocal enabledelayedexpansion

set current_dir=%~dp0

IF NOT EXIST output (md output)


:png
cd %current_dir%
IF NOT EXIST input/*.png (goto :jpg) > nul
FOR %%F IN (input/*.png) DO (call :webp "%%F")
echo PNG -> WEBP 변환 완료
echo ENTER를 눌러 jpg 변환하기
pause

:jpg
cd %current_dir%
IF NOT EXIST input/*.jpg (goto :gif) > nul
FOR %%F IN (input/*.jpg) DO (call :webp "%%F")
echo PNG -> WEBP 변환 완료
echo ENTER를 눌러 jpg 변환하기
pause

:gif
cd %current_dir%
IF NOT EXIST input/*.gif goto exit > nul
FOR %%F IN (input/*.gif) DO (call :webpgif "%%F")

:webp
cd bin
IF (%1)== () goto end
IF EXIST ../output/%~n1.webp (ren "../output/%~n1.webp" "../output/old_%~n1.webp")
cwebp ../input/%1 -q 85 -o ../output/%~n1.webp

:webpgif
cd bin
IF (%1)== () goto end
IF EXIST ../output/%~n1.webp (ren "../output/%~n1.webp" "../output/old_%~n1.webp")
gif2webp ../input/%1 -q 85 -o ../output/%~n1.webp

 

옵션 2) node를 이용해서 간편하게 실행

우선, imagemin, imagemin-webp, imagemin-gif2webp, minimist를 설치한다.

npm i imagemin imagemin-webp imagemin-gif2webp minimist

다음 파일을 다운받아서, input폴더에 변환할 파일을 넣고 아래 실행.

node run.js

run.js

0.00MB

퀄리티 조절은 -q 인자로 할 수 있다. (50~85 추천, 기본은 85)

node run.js -q 70

 

아래는 소스 코드이고, 옵션을 확인할 수 있다.

const imagemin = require("imagemin");
const webp = require("imagemin-webp");
const webpGIF = require("imagemin-gif2webp");
let argv = require("minimist")(process.argv.slice(2));

const output = __dirname + "/output";

let quality = 85;

if (argv["q"] == "") {
  quality = 85;
} else {
  quality = argv["q"];
}

imagemin(["input/*.{jpg,png}"], {
  destination: output,
  plugins: [
    webp({
      autoFilter: false, // default
      preset: "default", // default, photo, picture, drawing, icon
      method: 6, // 4 is default
      quality: quality, // 75 is default
      nearLossless: 100 // 100 is loseless
      /* resize: {
        width: 1000,
        height: 0
      } */
    }),
  ],
}).then(function () {
  console.log("JPG/PNG converted!");
});

imagemin(["input/*.gif"], {
  destination: output,
  plugins: [
    webpGIF({
      mixed: false,
      method: 6,
      multiThreading: false,
      quality: quality,
    }),
  ],
}).then(function () {
  console.log("GIF converted!");
});

 

옵션 참고 : https://github.com/imagemin/imagemin-webp