블로그 SEO: 이미지 최적화 (블로그용 이미지 파일 용량 줄이기)

블로그 검색엔진 최적화 (Search Engine Optimize; SEO)는 자신이 블로그에 작성한 글이 다음, 네이버, 구글, 등의 검색 엔진이 찾기 쉽고 노출 우선순위를 높이기 위한 방법들을 포함한다. 블로그 SEO에는 일반적으로 글 작성 시 키워드 조사, 본문 내 링크 구축, 이미지 최적화, 등 다양한 요소들이 포함된다. 이번 포스팅에서는 블로그를 작성할 때 삽입할 이미지의 파일 용량을 줄이는 방법에 대해 알아보자. 

 

블로그 SEO - 이미지 용량 줄이기

 

이미지 크기가 페이지 로드 속도에 미치는 영향

블로그 글에 포함된 이미지가 커질수록 웹 사이트의 페이지 로드 속도가 느려진다. 페이지 로딩 속도에 따른 검색자의 반응을 조사한 결과는 다음과 같다. 

 

• 페이지 로딩에 1초가 지연되면 페이지 조회수가 11% 감소한다.
• 페이지 로딩에 1초가 지연되면 고객 만족도가 16% 감소한다.
• 페이지 로딩에 1초가 지연되면 전환율이 7% 감소한다.
• 웹사이트 로딩 시간이 1~3초라면 이탈률은 32%이다.
  
  

이와 같은 영향 때문에 가능하면 적절한 사이즈와 용량의 최적화된 이미지를 사용하는 것이 중요하겠다.

아래 두 개의 블로그 포스트는 본인이 작성한 것들인데 하나는 이미지 최적화를 한 것이고, 다른 하나는 하지 않고 고용량의 이미지들이 포함된 것이다. 각각의 포스팅 로딩 속도가 확연히 차이 나는 것을 확인할 수 있다. 

 

 

 

디아블로 4 지옥물결 수수께끼의 고통받는 선물 위치

 

 

[미국 로드트립#1] 배드랜즈 국립공원 Badlands National Park

 

두 번째 포스팅을 작성할 당시에는 이미지 크기나 페이지 로딩 속도를 신경 쓰지 않아서 무조건 고퀄리티의 이미지들만을 업로드했었다. 이후에 티스토리 글쓰기에서 사진 크기만 줄여둔 상태이긴 하지만, 사진들도 너무 많이 올려서 아직까지 수정할 엄두를 내지 못하고 있다. 

 

 

 

블로그용 이미지 형식

 

 

블로그 포스팅에 일반적으로 사용되는 이미지 파일 형식은 JPEG, PNG, GIF가 널리 사용되며, 각각 고유한 기능과 이점이 있다. 최근에는 WebP 이미지 형식이 많이 사용되고 있다.

 

JPEG (Joint Photographic Experts Group)는 다양한 색상의 사진 및 이미지에 이상적인 손실 이미지 압축 형식 (lossy image compression format)이다. JPEG 이미지는 품질 저하 없이 더 작은 파일 크기로 압축할 수 있으므로 웹 사용에 이상적이다.

PNG (Portable Network Graphics)는 투명한 배경의 그래픽, 로고 및 이미지에 이상적인 무손실 이미지 형식 (lossless image format)이다. PNG 이미지는 더 높은 품질과 투명도를 지원하지만 파일 크기가 더 커질 수 있다.

 

GIF (Graphics Interchange Format)는 애니메이션을 지원하는 압축 이미지 형식 (compressed image format)으로 간단한 그래픽 및 애니메이션에 적합하다. GIF 이미지는 최대 256색으로 제한되므로 JPEG 또는 PNG 이미지에 비해 품질이 떨어진다.

 

 

 

요약하면 JPEG는 사진에 가장 적합하고 PNG는 투명도가 있는 그래픽 및 이미지에 가장 적합하며 GIF는 단순한 그래픽 및 애니메이션에 가장 적합하다. 각 형식에는 각각의 장단점이 있으니 이미지의 사용 용도에 맞게 선택하면 된다.

 

 

WebP는 구글에서 만든 이미지 형식으로 용량은 줄이면서도 JPEG, PNG, GIF의 장점을 모두 가지고 있다. 

자세한 내용은 아래 글을 참고하자.

 

 

WebP 이미지 파일 형식: 더 빠르고 효율적인 웹 이미지 압축

 

 

블로그용 이미지 크기

 

블로그 게시물이나 웹사이트의 이미지를 최적화할 때 데스크톱 모니터와 휴대폰을 포함하여 방문자가 사용할 수 있는 장치의 화면 크기와 해상도를 고려하는 것이 중요하다.

 

일반적으로 데스크톱 모니터의 표시 영역 너비는 1280px (픽셀) 이상이고, 태블릿 장치의 경우 640px, 모바일 휴대기기의 표시 영역 너비는 320px이하이다.

 

휴대기기에서 너무 작은 사이즈의 이미지는 해상도가 떨어지기 때문에 적어도 가로 크기 600px 이상의 이미지를 사용하는 것이 적당하다. 

 

본인은 대부분 가로 750px에 맞춰 이미지를 편집하고 본문에 삽입한다. 

 

 

 

 

블로그용 이미지 파일 용량 줄이기

블로그 글에 삽입될 이미지 형식과 이미지 크기를 결정했다면, 이미지 품질 저하 없이 이미지 용량을 최대한 줄여주는 단계가 필요하다. 

이미지를 편집하는데 가장 많이 사용되는 어도비 포토샵 (Adobe Photoshop)의 경우 포토샵을 이용하여 이미지를 편집한 후, 저장 옵션에서 "Save for Web tool"을 선택해 저장하면 웹에서 사용할 수 있도록 압축된 형태의 파일로 저장할 수 있다. 

 

 

이미지 편집에 사용되는 무료 프로그램인 포토스케이프 (Photoscape)에서도 "다른이름 저장"을 선택하고 ".webp" 형식으로 저장하면 크기가 확 줄어든 이미지 파일로 저장할 수 있다. 

 

 

 

 

이미 가지고 있는 이미지 파일도 웹툴을 사용해 손쉽게 압축할 수 있다. 기존에 있던 이미지 파일을 형식에 맞춰 업로드하고 압축 후 다운로드하면 된다. 또한, 이미 가지고 있는 이미지 파일들을 손쉽게 WebP 이미지 파일로 변환할 수도 있다. 아래 사이트들은 본인이 가장 많이 사용하는 사이트이다. 

 

 

JPEG 이미지 파일 압축하기

 

 

블로그 이미지 최적화 - 간편하게 jpeg 이미지 압축하기

 

 

JPEG/PNG/GIF 이미지 파일 압축하기

 

PNG 이미지들을 온라인으로 압축하기

 

 

이미지 파일 WebP로 변환하기

 

 

블로그 이미지 최적화 - 이미지 WebP 형식으로 변환하기

 

 

 

이상 블로그 검색엔진 최적화 중 이미지 용량 최적화에 대해 알아봤다. 블로그를 포스팅하면서 많은 이미지를 다루는 것은 분명 힘들고 시간이 필요한 작업이다. 하지만, 블로그 최적화를 위해 꼭 필요한 작업이니 신경 써서 관리하는 것이 좋은 블로그 포스팅을 위한 한 방법일 것이다. 

 

 

---

미깡인미네소타