ABOUT ME

-

Total
-
  • HTML webp 이미지 포맷
    컴퓨터/HTML & JS & TS 2020. 8. 17. 11:14
    728x90
    반응형

    webp [weppy]

     

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

    A new image format for the Web.

    developers.google.com

    소개 : 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

     

    storage.googleapis.com

    맨 아래로 스크롤해서 운영체제에 맞게 다운로드하면 된다. 첨부파일 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

    728x90

    댓글