사진 이미지 용량 줄이기 | WebP 변환 마우스 원클릭 이면 충분 온라인 WebP 사이트 사용 시간낭비 !!!

블로그나 웹 페이지에 고화질 최소용량으로 사진 이미지 용량 줄이기 방법입니다. 구글 SEO에 맞게 구글 차세대 이미지 WebP 포맷으로 마우스 원클릭으로 고퀄을 유지하며 사진과 이미지를 최소 용량으로 줄일수 있습니다. 블로그 웹사이트 최소용량의 최적 이미지가 필요하신 분은 이 방법으로 사진 이미지 용량을 줄여 사용하시길 바랍니다. 

 

 

WebP

 

 

 

 

 

1. Webp 란? 

 

WebP는 Google에 의해 개발된 차세대 이미지 포맷입니다. 이 포맷의 주요 목적은 WebP 파일 변환으로 사진 이미지 용량 줄이기를 이미지 압축을 통해서 웹 페이지 로딩 속도를 최고로 높이기 위함입니다. 구글 서치 콘솔에 보시면 코어 웹 바이탈 메뉴에서 웹 환경에서의 블로그 포스팅 페이지 및 웹 페이지의 성능 점검시 이미지 용량 문제 부분을 이걸로 한방에 해결했습니다.  

 

 

 

 

2.  왜  WebP를 사용할까?  "png, jpg " vs "WebP" 용량 및 퀄리티 비교

WebP를 사용한 사진 이미지 용량 줄이기를 하게 되면 어떤 결과와 장점을 획득 할수 있을지에 대해서 아래 비교 결과로 알려드립니다. 

 

PNG_WEBP_변환후_용량비교

 

 

 

PNG_WEBP_변환후_퀄리티비교

 

 

 

 

PNG_WEBP_변환후_퀄리티비교

 

 

 

 

PNG_WEBP_변환후_퀄리티비교

 

 

 

 

3. WebP 특징 

사진 이미지 용량 줄이기를 위해 WebP 파일 변환을 사용할 경우 얻을 수 있는 장점들입니다. 구글 서치 콘솔의 코어 웹 바이탈 성능 점검시 용량 문제점 해결에는 최고의 방법입니다. 

  1) 효율적인 압축

       WebP는 JPEG보다 작은 파일 크기로 동일 하거나 더 높은 품질의 이미지를 제공하며 특히 웹에서 이미지 로딩 속도를 높입니다.

 

  2) 손실 및 손실 없는 압축

       WebP는 손실(lossy) 압축과 손실 없는(lossless) 압축 모두 지원. 다양한 유형의 이미지에 유연하게 사용할 가능합니다.

  3) 알파 채널 지원

       투명도를 가진 이미지에 대한 지원이되며 PNG를 대체할 수도 있습니다.

 

  4) 애니메이션 지원

       WebP는 애니메이션을 지원하여 GIF를 대체도 가능할것으로 판단됩니다.

 

 

4.  WebP 다운로드 및 사용 방법

사진 이미지 용량 줄이기를 위해 WebP 파일 변환 프로그램을 다운 및 사용하는 방법과 WebP 공식 사이트 정보입니다. 

    1) WebP 공식 홈페이지 

 

      https://developers.google.com/speed/webp?hl=ko

웹용 이미지 형식  |  WebP  |  Google for Developers

 

    2) WebP 파일 변환 도구 다운로드 페이지 
          

         https://developers.google.com/speed/webp/docs/precompiled?hl=ko

사전 컴파일된 유틸리티  |  WebP  |  Google for Developers

 

 

    3) 다운로드 및 사용법  

아래 순서대로 WebP 파일 변환 프로그램을 사용해서 사진 이미지 용량 줄이기를 통해서 블로그의 이미지들을 모두 변경해주시면 코어 웹 바이탈 성능문제가 해결 되었고 또한 블로그 포스팅 글과 웹페이지 로딩 속도가 급격하게 상승하였습니다. 3초 이하에서 1초 이하로 바뀌더군요.

 

•      운영 체제에 맞는 버전을 선택하여 다운로드합니다. 
•      다운로드한 파일을 압축 해제합니다.
•      명령 프롬프트나 터미널을 엽니다.
•      cwebp 도구가 있는 디렉토리로 이동합니다.
•      다음 명령어를 사용하여 이미지를 WebP 파일 변환을 실시 합니다. 

 

 

    WebP 파일 변환으로 변환된 WebP 이미지를 웹사이트 적용 HTML Code 예시 ( WebP 우선 사용 및 대체 jpg 사용 하는 코드 ) 
        

 

티스토리에서는 폴더에서 원하시는 WebP파일을 선택해서 티스토리 글쓰는 에디터 화면으로 드래그 & 드랍 하시면 자동으로 WebP 그림이 들어가집니다. 별도의 html coding을 해서 넣으실 필요 없습니다. 안써봤지만 다른 웹에디터들 중에서도 동일하게 지원 될수도 있으니 시도해보세요.  

 

※주의 사항 
 모든 브라우저가 WebP를 지원하는 것은 아닙니다. 특히 오래된 브라우저는 WebP를 지원하지 않을 수 있으므로, 대체 이미지 포맷(JPEG, PNG 등)을 함께 제공하는 것이 좋습니다. WebP 파일 변환 도구는 Linux, Windows, macOS 등 다양한 운영 체제 사용가능 웹사이트의 성능을 최적화하기 위해 변환된 이미지의 크기와 품질을 적절히 조절해야 합니다.

 

 

 

5.  WebP 포맷 & 품질 

 

JPEG, PNG와 같은 사진 이미지 용량을 줄이기 위해서 WebP 포맷으로 변환할 때 고화질을 유지하면서 파일 크기를 줄이기 위한 -q (품질) 옵션의 최적값은 상황에 따라 다를 수 있습니다. WebP 변환 시 -q 옵션은 0에서 100 사이의 값을 가지며, 값이 높을수록 이미지 품질이 좋아지고 파일 크기가 커집니다. 고품질의 사진이나 아트워크는 높은 -q 값을 사용하는 것이 좋지만, 썸네일이나 아이콘 같은 작은 이미지는 중간 범위의 -q 값으로도 충분합니다.

• 높은 품질 (80-100)
  • 이미지 품질을 최대한 유지하면서 파일 크기를 약간 줄이고 싶은 경우, -q 값을 80에서 100 사이로 설정합니다. 예를 들어, -q 90은 대부분의 경우에 있어 좋은 품질과 파일 크기 사이의 균형을 제공합니다.

 

• 중간 품질 (60-80)
  • 웹에서 사용되는 일반적인 이미지의 경우, -q 값을 60에서 80 사이로 설정하는 것이 좋습니다. 이 범위는 대부분의 웹 이미지에 적합한 품질과 파일 크기의 균형을 제공합니다.

 

• 낮은 품질 (0-60)
  • 파일 크기를 크게 줄이고 싶지만 이미지 품질이 다소 떨어져도 괜찮은 경우, -q 값을 0에서 60 사이로 설정할 수 있습니다. 하지만 낮은 값은 이미지 품질 저하를 유발할 수 있습니다.

 

실제로 최적의 값을 찾으려면 몇 가지 다른 -q 값으로 실험을 해보고, 결과물의 품질과 파일 크기를 비교해보는 것이 중요합니다. WebP는 이미지 품질 대비 파일 크기 측면에서 효율적인 포맷이므로, JPEG나 PNG 대비 일반적으로 더 작은 파일 크기를 제공합니다.

 

 

 

6. WebP 파일 변환 도구 명령어 사용법 

 

다음은 사진 이미지 용량을 줄이기 위해 WebP 변환을 프로그램의 명령어 사용법을 케이스별로 정리하였습니다. Google WebP의 cwebp 명령어를 사용해서 옵션을 추가해서 사용하시면 됩니다. 

1) 기본 변환 명령어

    input.jpg라는 파일을 기본 설정으로 output.webp로 변환합니다.

 

 

2) 품질 조정

-q 플래그를 사용하여 품질을 설정할 수 있습니다. 예를 들어, 품질을 80으로 설정

웹과 블로그용으로는 일반적으로 -q 75에서 -q 90 사이의 값이 적당합니다. 

저는 현재 80 사용중인데 디폴트 75나 그 이하로 해서 용량을 더 줄이기 위한 테스트 중에 있습니다. 

 

 

3) 리사이징

이미지 크기를 조정하려면 -resize 옵션을 사용합니다. 예를 들어, 너비를 800픽셀, 높이를 600픽셀로 조정

 

 

4) 무손실 압축

원본 품질을 최대한 유지하고 싶다면, 손실 없는 압축 옵션 -lossless를 사용합니다.

PNG와 같은 투명 배경이 필요한 이미지에 유용합니다.

 

 

 

5) 메타데이터 제거

파일 크기를 줄이기 위해 메타데이터를 제거하려면 -metadata none 옵션을 사용합니다.

 

 

 

이러한 명령어들은 기본적인 가이드라인의 명령어로 실제 사용시 블로그나 웹사이트의 상황과 필요에 맞게 조정해야합니다. 변환 후에는 항상 이미지 품질을 확인하고, 웹 페이지 로딩 속도와의 영향을 테스트해서 필요하신 최적의 옵션들을 찾으셔서 사용하시면 됩니다.

 

 

7. WebP 변환 마우스 원 클릭으로 실시 자동화 만드는 방법 

사진 이미지 용량 줄이기를 매번 위와 같이 커맨드 명령어로 칠려면 너무 힘들고 시간도 많이 들어서 변환 해주는 온라인 웹사이트도 찾아 써보고 앱이나 프로그램도 써보았습니다. 온라인은 개수 제한 및 마우스 클릭을 몇번을 해야 하고 앱이나 프로그램은 다들 설치 및 돈을 요구하네요.  오픈소스 라이브러리인데 돈내고 비효율적으로 사용하지 않고 사진 이미지 용량 줄이기를 WebP로 간단하게 할 방법을 찾다보니 마우스 한번 클릭으로 하는 방법을 찾아서 정리하였습니다.

 

• 마우스 우측키 서브 메뉴로 등록하여 Finder.app에서 원클릭 사용하는 모습  

아래와 같이 하나 혹은 여러개의 사진 이미지를 선택 하고 마우스 우측키를 클릭하면 서브 메뉴로 사진 이미지 용량 줄이기를 WebP 압축률에 따라 3가지의 명령어 메뉴를 60 % 압축 , 70% 압축, 81% 압축 그리고 이미지의 사이즈로 등록을 하고 사용하고 있습니다. 

이해하고 등록하는데 좀 시간이 걸리지만 한번 등록 하고 나면 마우스 한번 클릭으로 끝나는 큰 이득을 얻으실수 있습니다. 

마우스_원클릭_자동화메뉴등록현황

 

 

맥의 Automator.app을 사용해서 마우스 우측키 서브 메뉴에 등록하여 사용을 하면 됩니다. 마우스 우측키 서브 메뉴에 등록하는 절차를 말씀 드리면 아래와 같습니다.   윈도우즈 버젼은 테스트 및 정리하고 있습니다. 완료되는대로 윈도우즈도 포스팅 할께요.  

 

1) Command + Space 눌러서 검색창 Spotlight 창 오픈 

2) automator.app 검색 / 실행 

3) Automator.app 창에서 Quick Action ( 빠른동작 ) 클릭 > Choose ( 선택 ) 클릭

MacOS Automator.app

 

 

 

4) Utilies > Run Shell Script  > 배쉬 자동화 스크립트 입력 

    아래 링크의 블로그 페이지에 있는 쉡 스크립트를 그대로 카피해서 넣어서 사용하셔도 되고 아니면 5. WebP 파일 변환 도구 명령어 사용법 에서 만드신 자신만의 명령어를 쉡 스크립트에 넣어서 사용하시면 됩니다. 

 

• 현재 수신하는 작업 흐름 : 이미지 파일  선택 
• 선택 항목 위치 : Finder.app   선택 
• 이미지 : 동작 ( Action )
• 통과 입력 ( Pass input ) : 인수 ( Argument ) <-  이 부분 선택 놓치지 마세요. 
• 실행할 쉘스크립트 실행 명령어 : 알려드린 웹사이트 링크 클릭해서 들어가시면 있어요. 본인 명령어에 맞게 수정해도되요. 
  • 아래 화면의 우측 부분에 쉘스크립트 실행에 쉡스크립트를 넣어주시면됩니다. 

 

MacOS_Automator_ShellScript_마우스_버튼_등록화면

 

 

 

 

 

아래 사이트에 쉡스크립트 내역이 있습니다. 저도 마우스 원클릭으로 변환 자동 설정하는 방법을 배운곳입니다.  맥북, MacOS에서 마우스 원클릭 자동화 하는 방법의 상세 사항은 아래 사이트로 안내 드립니다.  윈도우즈에서도 자동화 방법 완성되는대로 추가 공유 드리겠습니다. 굳이 유료 앱 구매나 온라인 웹사이트 매번 방문해서 변환 하실 필요 없이 마우스 원클릭으로 개별 혹은 다수를 한번에 변환 처리 하세요. 

 

https://ko.appflix.cc/how-to-convert-images-to-webp/

맥에서 1초 안에 이미지를 Webp로 변환하는 방법 — Appflix

 

5) Finder에서 jpg, png 그림을 선택 하고 마우스 우측키를 누르고 서브 메뉴 빠른 동작에서 자동화 스크립트명을 클릭하면  WebP 파일로 변환 됩니다.  개별 변환도 되고 다수 파일을 선택해서 한번 클릭으로 선택된 모든 파일이 변환됩니다. 

 

제가 코어 웹 바이탈 성능 저하를 모든 이미지를 WebP 파일 변환 하여 일부 문제들을 해결했고 이후 모든 이미지를 이걸 사용해서 글을 쓰니까 블로그 포스팅 로딩 속도가 모두 개선 되었습니다.

 

일부 웹페이지 및 앱들이 있긴한데 사용하기 불편하고 돈을 내야하거나 대량으로 변환을 할수 없어서 저는 맥북 MacOS를 쓰고 있어 위 자동화 스크립트를 WebP 파일 변환도구 명령어를 등록하여 마우스 한번 클릭으로 개별 png 그림 파일과 jpg 그림 파일을 WebP 변환하여 고퀄리티의 최소 용량으로 잘 사용하고 있어 공유 드립니다. 윈도우즈에서도 가능할꺼 같아서 이것도 해보고 있습니다. 

 

사진 이미지를 최소 용량의 고퀄리티 화질로 사용하시는 방법과 이미지 포맷을 구글 차세대 포맷인 WebP 파일 포맷을 사용해서 블로그 및 웹페이지 성능향상을 하실수 있는 방법에 대해서 알아 보았습니다.