블로그 포스팅 시 사용하는 이미지의 최적화 방법을 고민하고 있다면, 이 글이 해결책이 될 것입니다. 구글이 만든 이미지 저장 형식 webp를 사용해서 구글이 seo 기본 가이드를 통해서 요구하는 이미지 최적화의 해결 방법을 완벽하게 알 수 있습니다.
구글이 만든 이미지 저장 형식 WebP
Webp는 Google에서 2010년경 개발한 이미지 저장 형식으로 동일한 크기의 이미지를 jpeg와 png보다 적은 용량으로 보여줄 수 있습니다.
구글 seo 기본가이드에서 요구하는 이미지 최적화 위해서는 webp를 사용하는 것이 얼마나 효율적인지 다른 저장 형식과 비교한 내용을 보시면 알게 될 것입니다.
사진이나 기존 이미지를 webp 저장 형식으로 변환하시려면 포토스케이프 x를 추천합니다. 무료 사진 편집 프로그램 포토스케이프 x는 일괄작업을 통해서 편하게 기존 이미지를 webp로 변환할 수 있습니다.
번거로운 변환 과정 없이 화면 캡처 시 바로 webp 저장 형식으로 저장하는 방법도 알려드리겠습니다.
구글 seo 기본가이드 이미지 최적화 방향
이미지는 블로그가 전달하고자 하는 정보의 내용을 효율적으로 전달할 수 있으며, 방문자에게 시각적인 볼거리를 제공함으로써 체류시간을 증가시키는데 도움이 됩니다.
체류시간 증가는 사용자 경험으로 판단되어 블로그에 긍정적인 효과를 만들어주고 검색 순위 상승에 도움이 됩니다.
블로그에 사용하는 이미지는 아래 내용처럼 방향성을 가지고 최적화해야 합니다.
| 최적화 방향 | 내용 |
|---|---|
| 고품질의 이미지 사용 | 방문자가 선명한 이미지를 볼 수 있는 해상도를 높게 유지합니다. |
| 이미지의 사이즈는 적절하게 | 이미지가 너무 크면 글의 가독성이 떨어지게 됩니다. |
| 이미지의 용량은 작게 | 이미지의 용량이 크게되면 블로그 로딩 속도가 떨어집니다. |
| 글 내용과 연관성이 있게 | 제목, 본문과 연관성이 있는 이미지를 사용하고 파일명도 연관성을 있도록 작성합니다. |
| 이미지에 대한 설명 추가 | 이미지에 대한 짤고 간결한 설명을 추가해서 방문자의 이해도를 높일 수 있도록 해야합니다. |
| 이미지에 대체 텍스트 추가 | 이미지가 로딩되지 못하는 경우를 대비하여 대체 텍스트(alt) 속성를 반드시 작성합니다. |
| 이미지에 링크 추가시 데체텍스트 추가 |
이미지에 링크를 추가시, 대체 텍스트를 입력해야 합니다. |
이미지 저장 형식별 특징
이미지 저장 형식에 대한 이해를 하고 저장 형식별 이미지 파일 용량을 테스트한 결과 등을 종합하여 블로그에 사용할 이미지의 저장 형식을 선택할 수 있습니다.
블로그에서 자주 사용되는 이미지 저장 형식에 대한 특징을 살펴보면 다음과 같습니다.
| 저장형식 | 설명 | 특징 |
|---|---|---|
| TIFF | 고해상도 이미지에 적합 | 고품질 이미지, 압축된 형식, 다양한 색상 지원, 투명도 지원 |
| BMP | 윈도우에서 기본적으로 사용 | 고품질 이미지, 압축되지 않은 형식, 파일 크기가 매우 큼 |
| JPEG | 디지털 카메라에서 주로 사용 | 손실 압축 형식, 파일 크기가 작음 |
| GIF | 애니메이션 이미지에 적합 | 256색 지원, 애니메이션을 지원하는 표준 이미지 파일 형식 |
| PNG | JPEG의 대안으로 개발 | 고품질 이미지, 무손실 압축형식, 투명도 지원 |
| WebP | 구글에서 JPEG와 PNG 장점 결합 | 손실 및 무손실 압축 형식, 파일 크기가 작음 |
저장 형식 및 사이즈에 따른 파일 용량 테스트
공정한 테스트를 위해서 다빈치 리졸브 홈페이지 화면을 캡처해서 만든 이미지와 포토스케이프 x에서 다양한 색상을 사용하여 이미지를 만들어서 2번에 걸쳐서 테스트를 진행하였습니다. 각 저장 형식별 변환은 포토스케이프 x를 사용했습니다.
테스트 진행 방법
- 원본 이미지를 그림판에서 bmp로 저장,
- 원본 사이즈를 유지하여 bmp 파일을 tiff, png, jpg, gif, webp 형식으로 각 각 변환하여 저장,
- 각 저장 형식별 파일을 사이즈를 700으로 변환해서 다른 이름으로 저장,
- tinypng 홈페이지에서 용량 줄이기를 시도했습니다.
테스트 결과 #1
다빈치 리졸브 홈페이지에서 캡처한 이미지를 활용한 테스트 결과를 정리한 내용입니다.
|
최초 저장 형식 및 사이즈 |
변환된 저장 형식 |
이미지 파일 용량 |
용량 줄이기 (원본) |
사이즈 변환 가로 700 |
용량 줄이기 (가로 700) |
|---|---|---|---|---|---|
| bmp, 1438 x 727 | 3065 kb | 실패 | 727 kb | 실패 | |
| bmp, 1438 x 727 | tiff | 4,084 kb | 실패 | 969 kb | 실패 |
| bmp, 1438 x 727 | png | 811 kb | 194 kb | 230 kb | 59 kb |
| bmp, 1438 x 727 | jpg | 289 kb | 140kb | 87 kb | 75 kb |
| bmp, 1438 x 727 | gif | 274 kb | 실패 | 64 kb | 실패 |
| bmp,1438 x 727 | webp | 78 kb | 74 kb | 25 kb | 24 kb |
 |
 |
- 이미지 비교 - 각 이미지를 클릭하시면 큰 이미지로 볼 수 있습니다.
| 저장형식 | 원본 | 원본 용량 줄이기 | 사이즈 700 변환 | 700 용량줄이기 |
|---|---|---|---|---|
| webp |  |
 |
 |
 |
| 78 kb | 74 kb | 25 kb | 24 kb | |
| jpeg |  |
 |
 |
 |
| 289 kb | 140 kb | 87 kb | 75 kb |
테스트 결과 #2
포토스케이프 x에서 제작한 500 x 500 사이즈의 이미지를 사용하여 테스트한 결과를 정리한 내용입니다.
|
최초 저장 형식 |
변환된 저장 형식 |
이미지 파일 용량 |
용량 줄이기 (원본) |
|---|---|---|---|
| bmp | 733 kb | 실패 | |
| bmp | tiff | 977 kb | 실패 |
| bmp | png | 92 kb | 23 kb |
| bmp | jpg | 63 kb | 29 kb |
| bmp | gif | 37 kb | 실패 |
| bmp | webp | 18 kb | 17 kb |
 |
 |
- 이미지 비교
|
저장형식 |
원본 | 용량 줄이기 |
|---|---|---|
| jpeg |  |
 |
| 63 kb | 29 kb | |
| webp |  |
 |
| 18 kb | 17 kb |
webp 저장 형식으로 화면 캡처 방법 - ShareX
webp 이미지 효율이 좋다는 점 때문에 화면 캡처, 이미지 수정, 변환 작업을 반복하다 보니 이 것조차 귀찮음으로 다가왔습니다.
이런 작업을 간소화시킬 수 있는 방법을 찾아보니 있더군요.
화면 캡처 프로그램 화면 캡처 프로그램 sharex + 구글 web 라이브러리를 결합해서 사용하면 화면 캡처하면 shatex에서 생성된 이미지를 자동으로 변환 작업을 실행해서 매우 편리합니다.
무료 캡처 프로그램 sharex 다운로드 및 설치
먼저 화면 캡처 프로그램 ShareX을 다운로드해서 설치합니다. 픽픽에 익숙해져 있던 터라 처음에는 조금 낯설었지만, 사용법을 알게 되니 ShareX가 훨씬 좋더군요. 그래서 정들었던 픽픽은 삭제했습니다.
설치버전과 무설치 버전 등이 있으며 사용하기 편한 방식으로 다운로드하시면 됩니다.
✔무료 화면 캡쳐 프로그램 ShareX를 다운로드 할 수 있습니다.✔
구글 webp 라이브러리 다운로드
구글 WebP 라이브러리는 현재 1.3.0까지 업데이트되어 있습니다. 다운로드 페이지에 제일 하단부에 있으며, 사용하는 운영체제에 맞춰서 다운로드 후에 적당한 곳에 압축을 풀어주세요.
✔구글 Webp 라이브러리를 다운로드 할 수 있습니다.✔
sharex에서 작업 설정
이제 화면 캡처 후 ShareX을 실행해서 아래의 그림처럼 프로그램 좌측 중간쯤에 있는 [작업 설정]을 선택합니다.
작업 설정 창에서 좌측 아래쪽에 있는 [동작]을 선택하고 상단에 있는 [추가]를 선택합니다.
아래의 그림처럼 내용을 입력하시면 됩니다.
| 동작 | 설정값 | 참고 이미지 |
|---|---|---|
| 이름 | webp_convert (편한 이름으로 작성하세요) |
 |
| 경로 | cwebp.exe | |
| 인자 | "$input" -q 75 -o "$output" (수치는 70 ~100) |
|
| 출력 파일 이름 확장자 | webp |
위에서 다운로드한 파일의 압축을 해제한 폴더를 찾아서 bin폴더에 있는 [cwebp.exe] 선택하면 됩니다.
sharex에 촬영 뒤 할 일 설정
위에서 화면 캡처 후 자동으로 webp로 자동 변환을 위한 동작 설정을 만들었으니 마무리 단계로 [촬영 뒤 할 일]에서 동작할 수 있도록 아래의 그림처럼 스위치만 켜주면 됩니다.
이미지 편집까지 같이 진행하고 싶다면 이미지 수정 작업이 완료되면 아래의 버튼을 반드시 눌러주세요.
맺음말
이것으로 구글이 만든 이미지 저장형식 WebP이 블로그 이미지 최적화에 도움이 되며, ShareX와 구글 WebP 라이브러리를 활용하여 한번에 webp 이미지를 생성하는 방법에 대한 글은 마무리하겠습니다.
부족한 글이지만 끝까지 읽어주셔서 감사합니다. 다음에는 더 좋은 내용으로 뵙겠습니다.
출처 및 저작권 표시
자료 출처
저작권 표시
썸네일 디자인 : 미리캔버스에서 제작되었습니다.
본문 글꼴(폰트) : OFL(Open Font License) - Noto Sans Korean
이미지에 삽입된 글꼴(폰트) : 이 페이지는 카페24(주)이 제공한 "카페24 당당해"가 적용되어 있습니다.
'프로그램 소개' 카테고리의 다른 글
| 포토스케이프X JPEG PNG 포맷 Webp로 대량으로 변환할 때 사용하기 좋은 무료 사진 편집 프로그램 (0) | 2023.09.13 |
|---|---|
| 힘든 폰트 관리 - 넥서스폰트(nexusfont)로 쉽게 하세요. (0) | 2023.06.04 |
| 무료 화면 캡처 프로그램 sharex를 사용해야 하는 이유는? (0) | 2023.05.29 |
| 포토스케이프x 소개 및 다운로드 방법, 장점 best 7 (0) | 2023.05.25 |
댓글