블로그 『로딩속도』의 진단과 향상, 구글 이미지 포맷 『webp』활용

10월 06, 2022 5월 15, 2016

블로그 『로딩속도』의 진단과 향상, 구글 이미지 포맷 『webp』활용

다채롭고 충실하며 감미로운 콘텐츠가 블로그의 생명이지만 그 내용을 쉽고 편안하게 보여 주는 것 또한 관건 중의 하나 이다. 특히 빠른 것을 좋아하는 한국인의 특성을 고려하면 블로그의 로딩 속도는 구독률을 높이는 중요한 요소로 치부된다.블로그의 속도 저하는 여러 가지 요인이 있겠지만 뭐니 뭐니 해도 탑재하는 이미지의 용량이 좌우한다고 해도 과언이 아닐 것이다. 필자의 경우도 마찬가지겠지만 HTML 언어에 빈약한 블로거 들이 속도향상을 위해 1차적으로 할 수 있는 것이 바로 이미지의 용량을 줄이는 것으로 판단된다.

이미지 포맷은 jpg, gif, png, svg등이 업로드나 편집이 용이한 관계로 웹상에서 보편적으로 상용되는 것은 주지의 사실이지만 그 용량이 만만치 않은 것 또한 사실이다. 특히 갤러리형 블로그들은 탑재된 많은 사진 용량으로 말미암아 네티즌들이 아예 검색을 포기할 정도로 속도저하를 유발하고 있는 실정이다. 세상의 변화를 주도하고 있는 구글은 이러한 취약성을 보완하기 위해 독자적인 이미지 포맷방식인 webp(웹피)를 개발하고 있다. 아직까지 범용성이나 호환성에는 다소 문제가 있지만 잘 활용하면 png 이나 jpg 포맷 대비 30%로 정도의 용량 축소로 가시적으로 엄청난 속도향상을 체감할 수 있어 변환방법 등을 소개한다.

블로그 로딩 속도 진단하기

1. 진단사이트 접속

아래의 사이트에 접속 후 블로그 주소 입력창(웹페이지 URL 입력)에 자신의 블로그 주소나 또는 속도 진단을 요하는 사이트의 주소를 넣고 '분석' 버튼을 누른다.

https://developers.google.com/speed/pagespeed/insights/

◀그림1▶

2. 내 블로그 진단

◀그림2▶

모바일에서 접속한 내 블로그의 속도와 '수정사항' '속도 저하 요인' 등이 표시되는데 해당 부분을 클릭해서 참고 하고 적의 수정 개선하면 된다. '74/100' 이므로 26% 속도 향상의 여지가 있음을 알 수 있다.

◀그림3▶

데스크탑 PC에서 접속한 내 블로그의 속도와 '수정사항' '속도 저하 요인' 등이 표시되는데 해당 부분을 클릭해서 참고 하고 적의 수정 개선하면 된다. '60/100' 이므로 40% 속도 향상의 여지가 있음을 알 수 있다.

webp 포맷 이미지 만들기

1. 변환 프로그램 _webpconv

'webpconv'라는 프로그램은 여타의 온라인상에서 제공하는 'webp' 포맷 변환 프로그램보다 월등한 성능과 편의성을 제공하고 있어 우선하여 소개한다. 아래 사이트에 접속한 후, ◀그림4▶부분에서 1회성인 온라인 상에서 변환하거나, 프로그램을 다운 받아 설치하면 한꺼번에 여러 개의 파일을 동시에 변환이 가능하다. 변환된 ‘webp' 파일은 바탕화면에 자동으로 생성되는 폴더 안에 저장된다.

http://www.romeolight.com/products/webpconv/

◀그림4▶변환기 다운로드

◀그림5▶ webpconv 입력

◀그림6▶webpconv 설정

2. 변환 프로그램 _online-convert-온라인

http://image.online-convert.com/convert-to-webp

◀그림7▶

①을 클릭하면 변환 화면이 팝업 된다. 앞서 소개한 'webpconv' 에 비해 편이성이 떨어지지만 웹 상에 있는 그림의 주소를 복사(마우스 우측 버튼 클릭) 해서 붙이면 '다운로드 폴더' 에 변환된 webp 파일이 다운로드 되는 장점이 있다.

◀그림8▶

② 변환할 이미지 파일을 PC 폴더에서 선택하면 된다.
③ 웹상에 있는 이미지파일의 주소를 복사해서 넣으도 된다.
③ 변환버튼 → 다운로드 폴더에 변환된 webp포맷 이미지가 저장된다.

3. 변환프로그램 _webp

아래 사이트에 접속하여 프로그램(도스 체계)을 다운받아 PC에 설치한 후에 아래 그림처럼 변환작업을 하면 된다. 앞서 소개한 프로그램들과 달리 상세하고 구체적인 옵션 설정이 가능한 webp 파일 생성에 유리하다.

https://developers.google.com/speed/webp/download

◀그림9▶

① 편의상 변환 프로그램 디렉토리 내에 넣는다.
② 명령구문
▷ cwebp - 변환 명령문
▷ '-alpha_q 100' - 투명 처리옵션( 많은 옵션은 아래 사이트 참조)

https://developers.google.com/speed/webp/docs/cwebp#name

▷ 'webplogo.png' - 변환할 파일
▷ '-o ' - 변환 함수( 반드시 넣어야 함)
▷ 'test.webp' - webp 포맷으로 변환할 파일 이름

webp 파일 브라우즈 호환성의 보완

크롬과 오페라를 제외한 다른 브라우즈들은 ‘webp’가 지원되지 않지만 아래 방법들을 이용하여 사용할 수 있다.

①‘모더나이즈(Modernizr) 활용

② 'webpjs ' 활용

③웹피 코덱(webpcodec) 설치

webp 파일은 미리보기가 안되기 때문에 코덱을 설치해야한다. 아래 사이트를 방문해서 코덱을 다운받아 설치하면 jpg,gif,png 파일처럼 미리보기가 가능해 진다.

https://developers.google.com/speed/webp/docs/webp_codec?hl=en

에필로그
감상위주의 고화질 사진 이미지를 제외한 일러스트레이션 용도의 이미지는 정보 전달의 신속성이 그 어느 때보다 절실히 요구되는 현 시점을 고려할 때 'webp'의 필요성과 그 활용이 바람직 할 것으로 판단된다.