구글 페이지 속도 최적화를 위해 이미지를 WebP 형식으로 변환하는 방법과 그 효과를 소개합니다. WebP는 더 빠른 로딩 속도와 더 작은 파일 크기를 제공하며, JPG나 PNG보다 효율적인 압축률을 보여줍니다. 다양한 온라인 및 프로그램을 통한 변환 방법과 결과를 비교하여 웹 페이지의 성능 향상에 도움이 되는 정보를 제공합니다.
jpg, png 를 Webp 이미지 변경하는 방법과 결과
구글 pagespeed insights에서 페이지 속도 측정을 하다보면 이미지를 webp로 바꾸면 도움이된다것을 알고있었지만 모든 프로그램에서 같은 값이나오는지 궁금해서 찾아보게되었습니다.
원래 포토스케이프를 사용했지만 결과적으로 포토스케이프가 가장 간편했고 온라인을 통한 변환과 크게차이가 없었으며 오히려 효율이 좋았습니다.
구글 webp는 구글이 2010년 새롭게 만든 이미지 포맷입니다. 이름에서 보이듯이 web을 위해 만들어진 이미지 포맷인데 기존의 이미지 포맷인 GIF, PNG, JPEG를 모두 대체 가능한 이미지 파일로 PNG처럼 배경을 투명하게 할 수도 있습니다. 같은 크기의 사이즈라면 webp가 보통 이미지의 용량이 작다고도 하는데 이것은 크기와 색상에 따라 차이가 용량이 많기도 하며 적기도 합니다.
WebP란?
WebP는 구글이 2010년에 개발한 파일 형식으로, 더 높은 압축률을 제공하면서도 화질을 유지합니다. 이는 블로그나 웹사이트와 같이 이미지가 많이 사용되는 환경에서 유용합니다. 웹페이지의 로딩 속도를 향상시키고 대역폭을 절약할 수 있습니다.
WebP는 두 가지 유형의 압축을 제공합니다. 무손실 압축은 파일 크기를 줄이면서도 원본 데이터의 모든 비트를 보존합니다. 이는 PNG 파일과 비교했을 때 약 26% 정도 더 압축할 수 있습니다. 손실 압축은 원본 데이터의 일부를 제거하여 파일 크기를 줄입니다. JPEG와 비교했을 때 WebP는 이미지 크기를 약 25%에서 34% 정도 더 줄일 수 있습니다.
이러한 특징으로 인해 WebP는 웹 이미지 형식으로 널리 사용되며, 웹 페이지의 성능을 향상시키고 사용자 경험을 개선하는 데 기여합니다.
이미지(JPG,PNG)파일을 WEBP바꾸는 방법과 결과.
JPG to WEBP 또는 PNG to WEBP로 바꾸는 방법은 크게 온라인으로 바꾸는 방법과 프로그램(앱)으로 바꾸는 방법으로 나뉩니다.
미국의 국기인 성조기와 대한민국의 국기인 태극기를 각각 온라인과 프로그램(앱)을 이용한 방법으로 바꿔보고 각각의 결과를 정리해보겠습니다. 또한 온라인에서 파일을 바꿔주는 여러사이트들도 각각 파일을 변환 후 결과값을 정리했습니다. 여러파일을 한것이아니기 때문에 정확하지는 않겠지만 파일을 변환하는데 도움이 되길 바랍니다.
//테스트는 미국의 국기인 성조기와 대한민국의 국기인 태극기를 기준으로 파일을 변환하여 확인했습니다.
//파일의 크기는 성조기는 800×421 태극기는 800×533 입니다.
PhotoScapeX
photoscape와 같은 프로그램이지만 윈도우10과 맥에선는 photoscapeX를 권장하고있습니다.
- 포토스케이프를 실행합니다
- 상단에 ‘사진뷰어’탭을 누릅니다
- 사진이 있는 위치로 이동을하세요.
- 변환하고자하는 파일을 선택합니다(여러개 선택 가능합니다.)
- 마우스 오른쪽을 클릭합니다
- 중간에 ‘포맷 바꾸기’를 누릅니다.
- 이미지 포맷을 WEBP으로 선택하고 확인을 누릅니다
- 저장위치 및 옵션등을 설정하셔도 됩니다.
변환결과
| PNG to WEBP | |||
| 파일 | 변환 전(kb) | 변환 후(kb) | 차이(%) |
| 태극기.png | 34.22 | 12 | -65% |
| 성조기.png | 11.35 | 4 | -65% |
| JPG to WEBP | |||
| 파일 | 변환 전(kb) | 변환 후(kb) | 차이(%) |
| 태극기.jpg | 74.88 | 31 | -59% |
| 성조기.jpg | 92.68 | 24 | -74% |
온라인
순서는 구글에 ‘jpg to webp’를 검색했을 때 먼저나온 결과순으로 검색했으며 순위가 아닙니다. 온라인 변환 페이지들은 모두 파일을 업로드해서 등록하고 변환 또는 convert를 눌러 변환하면 됩니다.
ezgif.com/
한번에 하나의 파일만 업로드 할수있기 때문에 한번에 하나의 파일만 변경할 수있습니다.
변환결과
| PNG to WEBP | |||
| 파일 | 변환 전(kb) | 변환 후(kb) | 차이(%) |
| 태극기.png | 34.22 | 11.25 | -67% |
| 성조기.png | 11.35 | 9.76 | -14% |
| JPG to WEBP | |||
| 파일 | 변환 전(kb) | 변환 후(kb) | 차이(%) |
| 태극기.jpg | 74.88 | 31.37 | -58% |
| 성조기.jpg | 92.68 | 26.61 | -71% |
convertio.co
jpg에서 webp로 바꾸는 시간이 한참걸리는 느낌이 있었습니다
변환결과
| PNG to WEBP | |||
| 파일 | 변환 전(kb) | 변환 후(kb) | 차이(%) |
| 태극기.png | 34.22 | 12.3 | -64% |
| 성조기.png | 11.35 | 4.69 | -59% |
| JPG to WEBP | |||
| 파일 | 변환 전(kb) | 변환 후(kb) | 차이(%) |
| 태극기.jpg | 74.88 | 31.3 | -58% |
| 성조기.jpg | 92.68 | 26.6 | -71% |
anyconv.com/
PNG파일과 JPG파일 모두 같은크기를 갖습니다. (byte단위로 보면 조금 차이가 납니다).
확장자만 다른 같은 이미지를 변환했으니 같은게 맞는게 아닌가 싶기도 하고..
| PNG to WEBP | |||
| 파일 | 변환 전(kb) | 변환 후(kb) | 차이(%) |
| 태극기.png | 34.22 | 11 | -68% |
| 성조기.png | 11.35 | 9 | -21% |
| JPG to WEBP | |||
| 파일 | 변환 전(kb) | 변환 후(kb) | 차이(%) |
| 태극기.jpg | 74.88 | 11 | -85% |
| 성조기.jpg | 92.68 | 9 | -90% |
cloudconvert.com/
성조기의 png파일을 webp로 변환했더니 오히려 용량이 늘어버리는 이상한일이있었습니다. 자주 있는일은 아닌것같은데, 같은파일을 다시 시도해봐도 같은 결과를 얻었습니다.
| PNG to WEBP | |||
| 파일 | 변환 전(kb) | 변환 후(kb) | 차이(%) |
| 태극기.png | 34.22 | 17 | -50% |
| 성조기.png | 11.35 | 16 | 41% |
| JPG to WEBP | |||
| 파일 | 변환 전(kb) | 변환 후(kb) | 차이(%) |
| 태극기.jpg | 74.88 | 17 | -77% |
| 성조기.jpg | 92.68 | 15 | -84% |
5가지방법으로 변환을 해봤는데 애초에 이미지의 크기가 크지않아서 체감상 큰 변화는 없었던것같기도하지만 대부분의 경우 jpg를 webp로 바꿀경우 최고 90%의 용량(anyconv.com/)을 줄일 수 있었습니다.
webp로 변환해서 대부분의 경우 용량을 줄일 수 있었지만 대신 사진의 퀄리티가 중요한 사진이 아니라면 jpg로 변환 할 때 퀄리티를 조금 낮추면 webp보다 적은 용량의 이미지를 얻을 수있었습니다.