안녕하세요. 린치핀소프트 한광희입니다.

지난 포스트 워드프레스 썸네일 최적의 사이즈는 무엇인가요? #1 에서는 워드프레스에서 업로드되는 썸네일들이 어떻게 관리되는가? 에 대한 소개를 해드렸습니다.

이번 포스트에서는 어떻게 자신의 워드프레스 사이트에 최적화된 이미지 사이즈를 알아 볼 수 있을까? 에 대한 내용입니다.

 

이미지의 해상도가 중요한 이유

1.적절한 이미지 사이즈가 최적의 가시성을 제공한다.

여기서 적절한 이미지 사이즈란? 이미지가 웹 페이지를 통해 보여질때 사용되는 이미지 사이즈와 업로드된 이미즈 사이즈가 같거나 유사한 사이즈를 말합니다. 보통 웹사이트에서 이미지의 깨짐이나 늘어짐등은 업로드된 이미지 사이즈가 적절하지 않아 축소와 확대에 따라 발생하는 현상입니다. 그러므로 최소한의 이미지 축소/확대를 위해서는 보여지는 이미지의 사이즈와 같거나 유사한 사이즈로 업로드하는 것이 좋습니다

2. 경제적으로 고비용을 초래 할 수 있다.

이 부분은 일반적으로 워드프레스 사이트를 처음 운영하는 분들에게 부딪치는 문제입니다. 초기 무료 웹 호스팅 또는 저가의 웹 호스팅을 이용하다가 갑자기 파일 업로드가 안되는 상황이 발생할때가 있어 알아보니, 허용된 웹 호스팅 용량을 다 써버린 경우가 많습니다. 보통 무료/저가의 웹 호스팅에서 제공하는 용량이 작음에도 그 원인이 있지만, 고해상도의 3MB-4MB이상의 이미지를 업로드하다가 맞닥뜨린 상황입니다.

 앞선 포스트에서 예를들때 600KB사이즈를 올렸을 경우 20개가까이의 이미지 썸네일이 생성되어 대략 3MB가 넘는 용량이 소요되었습니다. 위의 사례처럼 고해상도의 수메가바이트(MB)의 사진을 업로드한다면 훨씬 더 많은 용량이 사용되어 금방 웹 호스팅에서 제공하는 용량을 사용하게 되어버릴것입니다.

그래서 이는 곧 비용 문제가 될 수 있습니다. 적절한 이미지 사이즈를 업로드하여 주어진 웹 호스팅 용량을 알뜰히 사용한다면 더 저렴하고 효율적으로 웹 호스팅을 이용하실수 있게 됩니다.

3.사이트의 느려짐을 초래한다.

고해상도의 이미지를 업로드할 경우 테마와 플러그인에 따라 다르지만 생각보다 빈번한 경우로 워드프레스에서 최대해상도 이미지를 사용하는 경우가 있습니다. 이 경우에는 현재 보여질수 있는 이미지의 크기가 최대 1920px 임에도 불구하고 3000px이 넘는 고해상도/고용량의 이미지를 웹 페이지에서 로드하게 됩니다.

이에 따라 웹 페이지에서 이미지를 로드하는데에 따라 정상적으로 페이지가 보여지기까지 시간이 걸리며 이는 사이트의 느려짐의 원인이 되기도 합니다.(일반적으로 웹 페이지에서 용량을 크게 차지는 것은 프로그래밍 소스파일이나 HTML파일이 아닌 이미지와 폰트가 상대적으로 큰 용량을 차지합니다)

 

자신의 사이트에 적합한 이미지 해상도 파악 기준  3가지

1.주요 콘텐츠가 어떠한가?

포트폴리오 사이트로 이미지나 사진등의 콘텐츠가 주요 콘텐츠이라면 되도록이면 사진 사이즈는 상대적으로 텍스트가 주요 콘텐츠인 사이트에 비해 큰 해상도의 이미지를 올려주는게 바람직합니다. 이런 경우의 사이트는 테마에 따라 다르지만 사진이나 이미지의 전체를 노출하거나 줌(Zoom)을 통해 사진을 디테일하게 볼수 있는 기능을 제공하는 등의 구성이 많기 때문에 이를 염두했을때 고해상도의 이미지를 사용하는 것이 맞습니다.

2.전면 이미지나 Wide 템플릿을 자주 사용하는가?

요즘들어 CSS3와 HTML5등을 통해 플래시없이 이미지나 비디오 영상으로 다이너믹한 웹 페이지 디자인이 가능해졌습니다. 그래서 최근의 많은 워드프레스 테마에서도 전면 이미지 배경이나 이미지를 크게 게시하는 디자인의 테마가 많아 졌습니다. 또한 Wide 형식의 템플릿으로 화면의 좌우 여백 없이 와이드하게 꽉 차는 테마가 많아 졌기 때문에 자신이 사용하는 테마에 이런 템플릿과 디자인이 많다면 고해상도의 이미지를 업로드하는 것이 좋습니다.

3.주요 방문자층이 어떠한 해상도에 편중되어 있는가?
screenshot-gs.statcounter.com 2016-01-03 15-11-13

 

위의 통계는 지난 6개월동안 국내의 해상도 비율에 대한 통계자료입니다(Statcounter) 자료에 의하면 대략 50%이상이 1920 x 1080 해상도가 많이 집계된 것을 볼 수 있습니다. 이 자료는 거시적인 통계로 자신의 사이트에 오는 방문층의 주요 해상도를 알기 위해서는 구글 애널리틱스(Google Analytics)같은 방문자 통계 분석 서비스를 통해 자신의 사이트를 주로 방문하는 사람의 해상도 통계를 집계 할 수 있습니다.

이를 기준으로 뚜렷이 방문자층이 편중되는 해상도를 집계 할수 있다면 그에 최적화한 이미지나 사이트의 개편을 염두해 볼 수 있습니다.

 

 

앞선 포스트에서도 말씀드린 것처럼 어느 워드프레스에서도 만족하는 최적의 이미지 업로드 사이즈나 최대 사이즈를 제안드리는 것은 쉽지 않습니다.

그럼에도 점점 많은 사람들이 1920 x 1080 의 고해상도를 이용하는 분들과 더불어 레티나 디스플레이(Retina Display) 수준의 2500px이상의 고해상도를 이용하는 분들도 점점 더 많아 지는게 현재의 상황입니다.

대략적으로 제가 제안드리는 바는 사진이나 이미지의 사용이 많지 않고 전면 이미지 배경이 들어가지는 않는 테마를 사용하는 분들은 최대 너비 기준 1920px 을 최대한으로 잡으시고, 사진이나 이미지를 많이 사용하는 포트폴리오 웹 사이트라면 레티나 디스플레이까지 고려하여 대략 너비 기준 2500px까지를 최대로 생각해 보시는게 좋습니다.

위에서 언급드리는 사이즈는 테마나 플러그인마다 달라질수 있으며 대략적으로 제안드리는 수치입니다.

 

참고

1.워드프레스 썸네일 최적의 사이즈는 무엇인가요? #1

워드프레스 썸네일 최적의 사이즈는 무엇인가요? #1

2. 워드프레스에 사용될 이미지 검색하기

워드프레스 포스트용 이미지 검색하기