워드프레스에 첨부하는 사진의 효율적 크기 찾기 (적정 사이즈)

사실, 이미지의 적정 사이즈라는 것이 있을 리는 없다. 상황이나 목적에 따라 다를 수 있기 때문에.

하지만, 워드프레스뿐만 아니라 대부분의 웹 페이지들은 아무리 큰 이미지를 첨부해도 보기 좋은 적정한 크기로 리사이즈 되어 보여진다. 이러한 상황에서 확대해 볼 필요 없는 단순 참고 이미지마저 큰 사이즈로 첨부한다면 페이지 로딩 속도도 느려지고 트래픽도 많아지며 서버 용량을 낭비하는 상황이 될 수 있다. 물론 첨부된 사진을 클릭해서 크게 확대해서 봐야 하는 사진을 첨부하는 상황은 제외.

따라서 본인이 사용하고 있는 워드프레스 테마가 최대 어느 정도의 사이즈(가로 x 세로, 세로 사이즈는 보통 가로 사이즈에 연동되어 자동 조절)로 이미지를 렌더링하고 있는지 확인해 둔다면 도움이 된다. 최대 렌더링 사이즈 혹은 그 이하로 사진을 첨부한다면 가장 효율적일 수 있는 것이다.

물론 이런 식으로 사진을 첨부한다고 해도 어느 순간 테마나 본문의 너비를 바꾸게 되면 이미지 렌더링 사이즈가 달라져 기존 작업분의 의미가 퇴색되는 상황도 얼마든지 있을 수 있기 때문에 적당히 고려하자.

다만, 텍스트가 포함되어 있는 이미지가 리사이징이 될 때는 눈에 거슬릴 정도로 흐려지는 경우가 많기 때문에 렌더링 사이즈에 대해 신경을 써 두면 좋은 것 같다.


렌더링 최대 가로 사이즈 확인하기 (세로는 가로에 맞게 자동 조절)

1. 크롬 브라우저(또는 MS엣지)에서 개발자 도구(F12) 창을 열고 본인의 워드프레스에 접속해 사진이 첨부된 포스트 아무 곳이나 들어가 본다. (인위적으로 사이즈를 조절해 첨부한 곳이 아닌, 기본 설정인 자동 사이즈로 첨부한 곳)

2. 사진이 더 이상 커지지 않을 때까지 브라우저 창을 조절하거나 최대 크기로 키운다.

3. 개발자 도구의 요소 탭에서 'Ctrl + F'로 첨부된 이미지를 찾다 보면(보통은 jpg, png로 검색하면 편리), 어느 순간 본문에 떠 있는 사진이 블록으로 선택되며 커서가 해당 코드로 이동하게 된다.

4. 해당 코드에 마우스를 올리면 해당 이미지의 고유 크기와 렌더링 된 크기가 나타난다. 현재 사용 중인 GeneratePress 테마의 경우 가로 최대 740px로 렌더링 되고 있었다. 즉, 740px 이하로 이미지를 첨부하면 낭비 없는 사이즈가 된다.

image rendering
1200 x 812px 사진이 740x501px로 렌더링 됨

카테고리의 다른 글

  1. apple-touch-icon.png 404 에러 탈출기 (feat. precomposed, 120x120, favicon)
  2. HTML 앵커 <a> 태그 속성으로 alt는 없었구나
  3. 구글 애널리틱스 내부 트래픽 설정하기 (분석 제외 IP 설정)
  4. 구글 애널리틱스와 태그 매니저 페이지뷰 중복측정 방지하기
  5. 구글 애드센스 클릭은 있지만 수익은 없는($0.00) 원인

댓글 남기기