티스토리 뷰
이번 포스팅은 이미지 파일 JPG, PNG 형식을 WebP(웹피)로 변환하는 방법, 변환 전후의 이미지 파일 용량 크기를 비교해 보겠습니다. 기존 이미지 파일을 WebP 형식으로 변환함으로써 이미지 용량을 줄여, 결과적으로 웹페이지 용량을 줄이는 효과를 통해서 웹페이지 로딩 속도를 개선하는 데 목적이 있습니다.
URL 페이지 로딩 속도를 올리는 데는 여러가지 요소들이 있습니다. 그중에서 이미지 파일의 용량을 대폭적으로 줄임으로써 URL 페이지의 전체 용량을 가볍게 하고, 결과적으로 URL 페이지 로딩 속도를 올리는 효과가 있습니다.
WebP(웹피)는 2010년 9월 구글이 공개한 이미지 포맷으로 인터넷 웹페이지에서 폭넓게 사용되고 있는 JPG 이미지 파일을 대체하기 위해서 제시된 이미지 규격입니다. 검색 엔진의 강자답게 구글은 웹페이지의 용량을 줄여 속도를 높이는 것에 몰두할 수밖에 없었을 것입니다. 그것이 인터넷 기반 사업의 성패와 직결되는 문제니까요. 로딩 속도 단축으로 웹사이트의 트래픽 총량은 증가하게 되어 구글은 더욱 더 다양한 웹 기반 비즈니스 확대가 가능하게 되었습니다.
WebP(웹피)는 주로 사진 이미지 압축 효과가 높으며, 동등한 품질의 JPG 이미지의 10~80%까지 압축하는 것으로 알려져왔습니다. JPG와 동등한 화질의 이미지 보다 압축률에서 약 40% 개선되었으며, 압축률을 조정할 수 있습니다.
《 목 차 》
▣ 이미지 파일 형식 변환 소프트웨어 무료 다운로드
▣ JPG, PNG를 WebP 형식으로 변환 - PIXLR(픽슬러) 사용법
▣ 이미지 파일 변환 전후 용량 크기 비교
이미지 파일 형식 변환 소프트웨어 무료 다운로드
이미지 편집 툴과 온라인 에디터가 있으며, Pixlr(픽슬러)와 Photoscape X를 주로 사용합니다. 이미지 압축 효과가 높은 픽슬러를 설치하는 방법입니다.
❑ Pixlr(픽슬러) 온라인 사진 에디터 다운로드 및 설치
① 구글 검색창에 pixlr 입력 > '온라인 사진 에디터'를 클릭합니다.
② Pixlr E 혹은 Pixlr X 중 하나를 클릭하여 설치합니다.
JPG, PNG를 WebP 형식으로 변환 - PIXLR(픽슬러) 사용법
① 파일 > 이미지 열기 클릭 후 변환할 파일을 찾아 엽니다
② 파일 > 저장 클릭 후 변환할 조건을 확인합니다.
② 변환 조건을 확인합니다.
- 파일 유형 > WebP
- 퀄리티 > 중 체크
- 다운로드 클릭
☞ 도움말: Pixlr 에디터 이미지 저장
- 파일 형식(유형)을 선택하면 포맷(Format)명, 파일 사이즈(Size)가 나타납니다.
- 퀄리티(품질)는 저 / 중 / 하(고) 구분되어 있으며, 고품질을 요구하는 이미지가 아니라면 중 수준을 추천합니다.
| 품질 등급 | 저 | 중 | 하(고) |
| 수준 | 50% | 70% | 90% |
- 가로, 세로 사이즈는 조절할 수 있습니다.
이미지 파일 변환 전후 용량 크기 비교
▶ 그림판으로 캡처한 JPG 이미지(106KB)를 WebP 파일로 변환 시 크기 비교
| JPG 원본(106KB) | ||||
| 변환 수준 | JPG 품질 수준 변경 | 압축률(원본 대비) | WebP 변환 | 압축률(원본 대비) |
| 하(고) | 84.3KB | 20% | 51.4KB | 51% |
| 중 | 48.1KB | 54% | 30.1KB | 71% |
| 저 | 36.4KB | 65% | 25.7KB | 75% |
구글이 2010년 WebP를 이미지 규격으로 제시할 때 발표한 압축률이 10~80%였습니다. 실제로 압축 전후 이미지 용량 크기 비교를 보는 바와 같이 이미지 파일 용량 줄이기 효과가 대단히 크다는 것을 볼 수 있습니다.
Photoscape X를 사용하여 Webp 형식으로 압축을 했으나 압축률 측면에서 Pixlr(픽슬러)가 뛰어난 것으로 확인되어 픽슬러를 사용하고 있습니다.
▶ JPG, WebP 형식 이미지 비교
육안으로 관찰할 때 구분이 안됩니다. 사실 해상도가 중요하지 않은 정보 안내 이미지는 변환 수준을 최하위로 적용해도 문제가 안되기 때문에 이미지 용량 경량화가 추가적으로 가능합니다.
앞으로 이미지 파일 경량화를 통해 URL 페이지의 로딩 속도를 올려 보세요.
《 구글 검색 관련 글 더보기 》
검색엔진 최적화(SEO): 내 콘텐츠 검색 순위 올리기
검색엔진 최적화(SEO): 내 콘텐츠 검색 순위 올리기
검색 결과에서 내 콘텐츠가 높은 순위에 표시되는 것은 내 콘텐츠가 검색엔진 최적화에 잘 부합되었다는 것을 의미합니다. 내가 작성한 콘텐츠가 검색순위에서 한참 밀려 노출이 안되거나, 심
digitalline.tistory.com
구글 서치 콘솔 실적 분석: 새 기능으로 내 블로그를 최신 날짜·페이지·검색어별 실적 분석하기
구글 서치 콘솔 실적 분석: 새 기능으로 내 블로그를 최신 날짜·페이지·검색어별 실적 분석하
구글 서치 콘솔 실적 분석에 새 기능으로 추가된 최신 날짜, 검색어, 페이지, 국가, 기기 및 검색 노출 별로 실적 분석하기를 살펴보겠습니다. 구글 서치 콘솔 실적 분석 카테고리에 새로운 기능
digitalline.tistory.com
'iT insight' 카테고리의 다른 글
| 구글 서치 콘솔 '발견됨 - 현재 색인이 생성되지 않음' 원인과 해결 (6) | 2021.11.15 |
|---|---|
| 구글 퍼블릭 DNS를 설정해야 하는 이유: 구글 DNS 설정 방법 (2) | 2021.11.12 |
| 검색엔진 최적화 기법: URL 페이지 로딩 속도 올리기 (0) | 2021.11.08 |
| 세이프 브라우징 설정-개인 정보 보호 (0) | 2021.11.05 |
| 크롬 검색엔진 설정하는 방법, 다른 검색엔진 추가·수정·삭제 (0) | 2021.11.03 |