blogspot 게시물 이미지 Webp 변환 프로그램 이용하여 게시하자!

blogspot 게시물 이미지의 최적화를 위해 png file과 jpeg file을 webp로 변환 하여 주는 honeyview tool을 사용 하여 변환 하는 과정을 설명 하였습니다.

blogspot 게시물을 발행하며 종종 Google Search Console에 들어가 blogspot의 상태를 보는 경우가 있다. 아직 발행한 글도 몇 개 되지 않아 글 발행에만 신경 쓰고 blogspot 즉 블로그의 상태를 확인하는 경우는 거의 없었다.  

Google Search Console의 사이드바 메뉴 중 코어 웹 바이탈 메뉴에 들어가 PageSpeed Insights 사용해 보기를 실행하여 어떤 메뉴인지 확인하던 중 휴대전화에 대한 검사를 실행해 보았다. 지금 사용하는 blogspot의 게시물 이미지 대부분이 차세대 형식을 사용해 이미지 제공하기 항목에서

Webp 및 AVIF 와 같은 이미지 형식으로 게시하는 것이 PNG나 JEPG보다 압축률이 높기 때문에 다운로드가 빠르고 데이터 소비량도 적습니다.

라는 Message가 나온다.



blogspot 게시물 이미지 Webp로 변환 하여 발행하자

 

구글은 게시물 이미지를 확인해서 최적화하라고 한다. 그것까지도 해야 하나. 알았으니 무시  할 수도 없고 Webp 변환 프로그램을 찾아 사용해 보기로 하였다.
간단하고 간편한 여러 Webp변환 프로그램이 존재 하지만 그 중에서 Honeyview를 선택 프로그램을 설치 후 실행하여 게시물 이미지를 변환 하여 보았다.


blogspot 게시물 이미지 Webp로 변환 순서



꿀뷰 Webp변환화면



1. Honeyview 다운로드 설치 후
2. Honeyview 실행
3. Honeyview화면 안에서 오른쪽 마우스 Click.
4. 표시되는 메뉴바에서 열기 선택 후 Click
5. 변환 하고자 하는 이미지를 선택 한 후 Click
6. 메뉴바에서 편집메뉴를 선택. 
   다음 과 같은 메뉴 항목이 표시 된다.

   이미지 변환(회전, 크기 조절)  Ctrl + T
   클립보드로 복사하기                Ctrl + C
   편집 프로그램 실행                   Ctrl + E
   바탕화면 배경으로 지정..

위의 4가지 메뉴 중에 이미지 변환 (회전, 크기 조절) 메뉴를 선택 하면 위의 그림과 같이 내가 변환하고자 하는 이미지가 표시된다.


7. 위의 그림 중 4가지 항목만 설정을 조정 변환해 보았다. (위의 이미지 기준)
7-1. ① 항 변경할 크기 : 900 x 600
7-2. ② 항 포맷 선택 : WEBP
7-3. ③ 항 화질 : 60
7-4. ④ 항 저장되는 파일명 앞에 붙일 글 : w
7-5. 하단 메뉴바 에서 시작을 선택 Click 하면 원하는 폴더에 저장 된다.

위의 이미지를 변환 한 과정을 설명하여 보았다. 


Honeyview사용 blogspot게시물 이미지 Webp로 변환 후기


① 항. 변경할 크기 : 옆의 창에 이미지를 확인 하면서 원하는 크기로 조정 가능하다.
② 항. 포맷 선택 : webp이외에 5가지를 선택 할 수 있다. 
③ 항. 화질 선택 : 100, 90, 80, 70, 60 으로 설정값이 나누어져 있는데 60선택.
④ 항. 저장되는 파일명 앞에 붙일 글 : w로 지정 되어 있으나 변경 가능.

화질과 File Size는 어찌할 수 없는 부분이라. 게시물 이미지의 활용도에 따라 조정해야 할 것 같다. 위의 이미지는 60으로 가장 작은 화질 설정치를 적용하여 이미지를 조정하였다. 100은 화질 설정치 중 제일 화질이 좋은 설정치 이다. 화질 설정치의 해상도는 원본과도 관련이 있는 것 같다. 

위의 이미지 File은 74.2kb 에서 24.7kb로 Size가 조정 되었다.

PageSpeed Insights 휴대폰 성능에 표시되는 값을 향상시킬 수 있는 방법이 나에게는 이미지를 가볍게 하는 것 이외에는 거의 없는 것 같다. 이미지 외에 나열되는 항목들에 다 반응하기에는 버겁게 느껴진다.