사진이나 이미지 파일은 콘텐츠를 제작하는데 없어서는 안될 중요한 요소입니다. 하지만 종종 너무 많은 이미지나 너무 큰 크기의 이미지는 웹페이지 속에서 콘텐츠를 표현하는데 ‘부담’이 되기도 하죠.
예를 들어, 웹페이지 속에 이미지 파일이 너무 많을 경우 사이트의 로딩 속도를 떨어 뜨리게 되고 사용자의 이탈율을 높이는 원인이 됩니다. 또한 웹사이트의 로딩 속도는 검색 엔진 최적화(SEO)에 있어서도 반드시 고려할 요소이구요.
특히 요즘은 휴대폰 카메라로 찍은 사진 이미지 파일들도 화질이 좋아져서 원본 이미지의 크기가 몇 메가(MB)를 훌쩍 넘는 것들도 많죠. 이런 이미지 파일들이 웹페이지 내에 몇 개만 들어 있다고 해 보세요. 페이지 로딩 속도가 느려지는 건 순식간이겠죠?
워드프레스에서도 마찬가지입니다. 워드프레스에서는 사진이나 이미지 같은 미디어(Media) 파일을 쉽게 업로드할 수 있고 또 업로드한 파일을 웹페이지 콘텐츠 형식에 맞춰 적절한 크기로 조정할 수 있는 썸네일(thumbnail) 생성 기능을 제공합니다.
하지만 여전히 이미지를 잘 다루는 것은 필요하고 또 중요합니다.
어떻게 하면 웹페이지의 로딩 속도에도 부담을 덜 주면서 이미지 품질도 가급적 높게 유지할 수 있는 사이트를 만들 수 있을까요?
이미지 크기를 조정해서 업로드하기
가장 흔히 사용하는 방법은 이미지 파일을 업로드하기 전에 미리 사이즈를 조정해서 업로드하는 방법입니다.
예를 들어, 통상적인 PC용 모니터의 해상도를 감안하여 최대값을 정하고 이미지 편집 프로그램을 사용, 사진 크기를 조정하는 방법입니다. 이렇게 사이즈를 직접 조정해서 업로드하는 방식은 파일이 몇 안될 때는 별로 문제가 없지만, 업로드할 파일의 양이 많을 경우라면 제법 귀찮은 작업이 되어 버리는 문제가 있습니다.
이미지 최적화 플러그인 사용하기
그래서 흔히 사용하는 방법은 이미지 최적화 프로그램을 사용하는 방법입니다. 워드프레스 플러그인 중에는 이미지 최적화를 처리해주는 다양한 유형의 플러그인들이 나와 있습니다.
이들 중 내 사이트에 맞는 플러그인을 골라 설치하면 됩니다. 대개 이들 플러그인들은 다음 몇 가지 기능 중 하나 또는 그 이상을 제공합니다.
- 이미지 사이즈 최적화
- 이미지 압축(compression)
- 워터마크(watermark) 삽입
- 이미지 지연 로딩(lazy loading)
- CDN을 통한 이미지 파일 제공
만약 그 중 내게 필요한 옵션이 딱 이미지 크기만 조정하는 거라면, 가장 간단한 Resize Image After Upload 플러그인 정도만 사용해도 충분할 것입니다.
워드프레스 5.3 이후
그런데 최근 워드프레스가 버전 5.3이 출시되면서 코어 내부에 이미지 파일 자동 리사이징(resizing) 기능이 추가되었습니다.
워드프레스가 내부적으로 이미지 파일 최대 크기값(big image threshold)을 정해, 그 값보다 큰 이미지는 자동으로 최대값에 맞춰 이미지 사이즈를 조정합니다. 이 최대값의 디폴트값은 2560px이며, 테마 등에서 이 값을 조정할 수 있습니다.
물론 그렇다고 업로드한 원본 이미지 파일을 삭제하는 것은 아니며, 원본 파일은 서버의 업로드 디렉터리 내에 존재하며 필요하면 꺼내 쓸 수도 있습니다.
다만 이제 “전체 크기” 이미지의 사이즈가 예전과는 달리, 원본 이미지 사이즈가 아닌 최대값에 따라 리사이징된 이미지를 사용한다는 게 달라진 점입니다. 아래 그림에서 보면, “전체 크기” 이미지의 가로폭이 2560px임을 확인할 수 있습니다. 아무리 큰 사이즈의 이미지를 올리더라도 “전체 크기” 이미지의 폭은 2560px로 자동 조정됩니다.
그러니 이제 굳이 이미지 리사이징만을 위해 별도 플러그인을 설치할 필요는 없어진 듯 합니다. 물론 이미지 최적화 플러그인이 제공하는 여타 다양한 기능들이 필요한 경우라면, 여전히 별도 플러그인이 필요하긴 하겠지만요.
이미지 사이즈 자동 최적화 끄기
2560px이면 사실 웬만한 웹페이지에서 사진 이미지를 표현하는데는 부족함이 없는 크기입니다. 하지만 경우에 따라서는 좀 더 큰 크기의 이미지를 표시할 필요가 있을 수도 있습니다. 예를 들어 포토 갤러리 사이트나 포트폴리오 사이트에서 사진을 보여줄 경우에는 일부러 원본 이미지를 그대로 살려야 할 일도 있겠죠.
이럴 때를 대비에서 워드프레스에서는 이 자동 리사이징 옵션을 끄는 방법을 제공합니다. 테마 속 functions.php 파일에 다음 코드를 추가하면 예전 방식, 그러니까 5.3 버전 이전의 방식으로 돌아갑니다.
add_filter( 'big_image_size_threshold', '__return_false' );
만약 코드를 추가하는 방법이 귀찮다면 Disable “BIG Image” Threshold 플러그인을 설치해도 되구요! 🙂
0 thoughts on “워드프레스에서 큰 사이즈 이미지 다루기”