이미지를 터미널에서 WebP로 변환하여 웹사이트 속도 향상

.webp 형식은 광범위하게 지원되는 압축 이미지 형식으로 웹에서 점점 더 보편화되고 있습니다. 이미지를 .webp로 저장하면 필요한 이미지 품질을 유지하면서 웹 페이지의 크기를 줄일 수 있습니다. 이미지 크기 절감이 상당히 클 수 있으므로 페이지가 훨씬 더 빠르게 로드됩니다.

이미지를 .webp 로 변환하려는 경우 Photoshop과 같은 많은 앱에서 변환할 수 있지만 더 빠른 방법은 터미널에서 바로 변환하는 것입니다. 어떻게 작동하는지 살펴보겠습니다.

.webp 파일 지원

.webp는 Internet Explorer를 제외한 모든 브라우저에서 광범위하게 지원됩니다. 아래에서 전체 지원을 확인할 수 있습니다.

WebP 및 cwebp 설치

파일을 .webp 로 변환하려면 먼저 Google에서 제공하는 cwebp 패키지의 일부인 webp 라는 도구를 설치해야 합니다. 다음과 같이 터미널에서 설치할 수 있는 홈브류가 설치되어 있으면 쉽습니다.

brew install webp

그렇지 않은 경우 installing this package via Google에서 자세한 지침을 찾을 수 있습니다. 설치 후 터미널에서 명령cwebp을 실행하여 다음 출력을 얻을 수 있습니다.

~ % cwebp
Usage:
    cwebp [options] -q quality input.png -o output.webp

이제 .png 파일을 .webp 품질로 60으로 변경하려면 다음 명령을 실행할 수 있습니다.

cwebp -q 60 image.png -o image.webp

그러면 image.png가 60% 품질의 image.webp라는 파일로 변환됩니다. 이 품질 번호를 변경하면 출력되는 크기가 변경됩니다. 품질이 낮으면 파일이 작아지지만 이미지가 여전히 괜찮아 보이도록 균형을 맞추는 것도 중요합니다. 원본 이미지는 계속 유지되므로 파일의 두 가지 버전이 있습니다.

Internet Explorer와 같은 일부 이전 브라우저는 지원하지 않으므로.webp 두 버전을 모두 사용하는 것이 실제로 유용합니다. HTML에서 .webp 태그를 사용하여 원본.png 파일에 대한 폴백과 함께 <picture> 파일을 사용할 수 있습니다.

<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.png" alt="Image for Article" />
</picture>

즉, 최신 브라우저를 사용하는 사용자는 더 빠른 로드 시간이라는 추가 이점을 얻을 수 있는 반면 이전 브라우저를 사용하는 사용자는 브라우저가 지원하지 않는 경우 이미지를 계속 볼 수 있습니다.webp.

모든 이미지를 .webp로 변환

.webp는 매우 빠르기 때문에 모든 이미지의 사본을 만들어 .webp 사용하려는 경우 사용할 수 있도록 하는 것이 좋습니다. cwebp는 원본 파일도 유지 관리하므로 원본 이미지를 잃을 위험이 없습니다. 그러나 대부분의 서버에는 많은 이미지가 있으므로 시간이 많이 소요될 수 있습니다.

다행스럽게도 cwebp 루프를 사용하여 .png , .jpg 및 .jpeg 파일을 .webp로 변환하는 데 for를 사용할 수 있습니다. 아래 코드는 실행 중인 디렉터리 내에서 모든 이미지를 찾고 각각에 대해 .webp 버전을 생성합니다. 재귀적으로 작동하기 때문에 서버에 있는 모든 이미지를 변환합니다. 즉, 가지고 있는 이미지의 수에 따라 실행하는 데 시간이 오래 걸릴 수 있습니다. You can learn more about the find command here .

echo 'Converting all .png, .jpg, and .jpeg files to .webp...'
for f in $(find . -name '*.png' -or -name '*.jpg' -or -name '*.jpeg'); do 
    if [ ! -f "${f%.*}.webp" ]; then
        cwebp -q 60 $f -o ${f%.*}.webp
    fi
done