블로그에 글을 쓸 때 이미지를 많이 사용하고 있을 텐데요. 대부분 아마 jpg 또는 png 파일을 많이 사용하실 겁니다. 하지만 구글 SEO 측면과 용량면에서 WebP 이미지 파일을 사용하는 것이 훨씬 유리합니다.
그래서 이번에 WebP 파일로 이미지 파일을 변환하는 방법과 변경 전후의 결과가 어떻게 다른지 보여드리겠습니다.
pageSpeed Insight
구글에서는 블로그나 웹페이지의 페이지 성능을 확인 할 수 있는 서비스를 제공하고 있습니다.
pageSpeed Insight에서 본인의 블로그나 웹페이지의 주소를 넣고 분석을 하면 핸드폰, 데스크톱 상에서의 페이지 점수를 확인할 수 있습니다.
성능 점수가 나오고 그 아래로 스크롤을 내리면 현재 페이지 분석 후 나온 문제점에 대해서 알려줍니다.
그 내용 중 일반인이 해결하기 어려운 내용들이 많이 있습니다. 자라스크립트 등의 코딩과 관련 된 내용으로 공부하지 않으면 무슨 말인지도 모르겠고....
그나마 쉽게 해결 할 수 있는 내용은 다음과 같습니다.
- 이미지 크기 적절하게 설정하기
- 차세대 형식을 사용해 이미지 제공하기
위의 분석 내용은 블로그에 jpg 파일 형태의 이미지를 삽입한 글의 분석 내용입니다. 그나마 일반적으로 해결할 수 있는 부분이라 생각되어 jpg를 WebP 파일로 변경 해보겠습니다.
WebP 이미지 파일로 변경
Webp 이미지 파일로 변경 하는 방법은 여러 가지가 있을 텐데 현재 저는 'EZGIF'라는 사이트를 통해서 png, jpg 형태의 파일을 변경하고 있습니다.
◈ EZGIF 접속
Convertio 라는 사이트에서는 여러 개의 파일을 한 번에 WebP로 변경할 수는 있지만 개수에 제한이 있어서 파일이 많을 때는 문제가 생기게 됩니다. 그래서 한 번에 한 개씩만 변환하지만 제한이 없는 EZGIF를 사용 하고 있습니다. 추가적으로 로그인을 할 필요가 없습니다.
◈ 메뉴 설정
- 메뉴에서 WebP를 선택 합니다.
- JPG to Webp 또는 PNG to WebP를 선택합니다.
==> 자신이 변경하려는 파일의 형태에 맞게 메뉴 선택을 합니다. - Convert 화면이 나타납니다.
◈ 파일 선택
위의 3번 상태가 아래 그림입니다.
여기서 파일 선택 버튼을 클릭하여 원하는 파일을 Open 할 수 있고 파일을 드래그하여도 됩니다.
파일 선택을 한 후에 위의 파란색 Upload 버튼을 클릭합니다.
◈ WebP로 변환 후 저장
Upload 버튼을 클릭하면 변경하려는 이미지와 함께 용량이 표시됩니다.
위의 파일의 용량은 43.34KB이고 width, height와 Type이 jpg라고 나옵니다.
위의 상태에서 Conver to WebP! 버튼을 클릭하면 변환된 그림이 아래에 나타납니다.
WebP 파일로 변환된 이미지가 나타나고 변경된 파일의 size와 원본과의 size를 퍼센트로 보여줍니다.
위의 그림은 43.34KB에서 18.56KB로 Size가 줄어들었고 약 57.12% 절반 정도의 size가 줄었습니다.
파일 변환이 된 후 우측 하단에 save 버튼을 클릭하면 파일이 저장됩니다.
WebP 이미지 파일로 변경 후 pageSpedd Insights
WebP 이미지 파일로 변경하여 블로그에 다시 적용 후 pageSpeed Insigts로 분석을 한 결괏값은 아래와 같습니다.
- 이미지 크기 적절하게 설정하기 5.72초 --> 2.55초 ( 약 -50%)
- 차세대 형식을 사용해 이미지 제공하기 1.50초 --> 0.30초 (약 -75%)
JPG 이미지 파일과 WebP 이미지 파일의 차이는 위와 같습니다. 생각보다는 많은 변화가 보입니다.
약 20개 정도의 이미지 파일을 변환 후에 나타난 결과입니다.
마무리
WebP로 변경 후 성능검사는 28에서 30 정도로 생각보다는 많이 오르지 않았습니다. 성능에서 이미지 로딩 속도 점수보다 다른 부분이 더 큰 영향을 주는 것 같습니다.
다른 어려운 문제 내용을 찾아 수정하는 것이 가장 좋은 방법이겠지만 현실적으로 혼자 힘으로는 해결하기 어려울 거라 생각되어 저는 할 수 있는 것 만이라도 하자라는 생각으로 이미지 변환만 해보았습니다.
이미지 없는 것이 페이지 속도에 가장 좋겠지만 그래도 블로그에 이미지가 들어가야 글도 잘 읽히고 이해하는데 도움도 되기 때문에 안 넣을 수는 없을 테니 가능하면 WebP로 변환한 이미지를 블로그에 삽입하는 것을 추천드립니다.
'블로그' 카테고리의 다른 글
| CSS 버튼 생성 시 원하는 색상 넣는 방법 (1) | 2023.11.27 |
|---|
댓글