홈페이지 속도가 느려서 고민이신가요? 속도 문제는 여러 가지 원인으로 발생할 수 있으며, 그중 하나가 큰 이미지 크기입니다. 특히 콘텐츠가 많은 사이트에서는 이미지 크기가 속도 저하의 주요한 원인일 수 있습니다. 그러므로 워드프레스 사이트에서 이미지를 최적화하는 것이 사이트 속도 향상에 중요합니다.
이 가이드는 아바다 테마와 비슷한 판매량을 기록하고 있는 인기 워드프레스 테마인 Divi 테마의 블로그에서 제시하는 내용을 요약한 것으로 워드프레스 사이트에 적합한 이미지 크기를 결정하는 데 도움이 될 것입니다. 이미지 최적화를 통해 사이트 속도를 개선하면 고객 경험을 향상시키고 생산성을 높일 수 있습니다.
워드프레스 이미지 크기 이해하기
워드프레스에서 이미지 크기는 픽셀 수와 파일 크기(KB 또는 MB)로 결정됩니다. 이미지 크기는 미적 요소를 넘어 사이트 속도, 사용자 경험(UX), 검색엔진 최적화(SEO) 등에 직접적인 영향을 미칩니다. 워드프레스는 큰 이미지를 업로드할 경우 자동으로 여러 크기의 이미지 크기(썸네일 크기)를 생성하여 사용 위치에 따라 적절한 크기의 이미지를 표시하여 트래픽을 줄여줍니다.
SRCSet 기능
워드프레스에 이미지를 업로드하면 여러 가지 크기의 이미지를 자동으로 생성합니다(예: 썸네일, 중간, 큰 이미지 등). SRCset 속성은 브라우저가 기기 화면 크기와 픽셀 밀도에 맞는 이미지 크기를 자동으로 선택할 수 있도록 돕습니다.
예를 들어, 사용자가 큰 모니터에서 사이트를 방문하면 브라우저는 더 큰 이미지(예: 1024px)를 로드하고, 모바일 기기를 사용하여 액세스하면 브라우저는 더 작은 이미지(예: 300px)를 선택해 페이지를 빠르게 로드합니다.
워드프레스에서 자동으로 생성하는 이미지의 기본 크기는 다음과 같습니다.
- 썸네일: 150 x 150 픽셀
- 중간: 300 x 300 픽셀 (설정에 따라 다를 수 있음)
- 큰 이미지: 1024 x 1024 픽셀 (설정에 따라 다를 수 있음)
- 전체 크기: 원본 크기
기본 이미지 크기 변경은 워드프레스 관리자 페이지 » 설정 » 미디어에서 가능합니다.
워드프레스에 사용할 이미지 크기
이미지 파일 크기는 200KB를 넘지 않아야 합니다. 이상적인 크기는 50KB에서 100KB 사이입니다. 이미지 크기와 함께 이미지 해상도도 함께 고려해야 합니다.
- 블로그 게시물 이미지: 1200 x 630 픽셀
- 주요 이미지 (블로그 글 썸네일): 1200 x 800 픽셀
- 헤더 이미지 / 히어로 이미지: 1600 x 900 픽셀 또는 1920 x 1080 픽셀
- 배경 이미지: 1920 x 1080 픽셀
- 슬라이더와 배너: 1200 x 600 픽셀 또는 1920 x 800 픽셀
- 상품 이미지 (우커머스): 800 x 800 픽셀 또는 1000 x 1000 픽셀
- 로고 이미지: 200 x 100 픽셀 또는 250 x 100 픽셀
특별한 이유가 없다면 5000픽셀 크기에 5MB 용량의 이미지는 업로드하지 않는 것이 좋습니다. 워드프레스는 웹 친화적인 버전을 생성하지만, 원본 상태의 이미지 크기를 표시하면 페이지 로딩 속도가 느려질 수 있습니다.
워드프레스에 이미지를 올바르게 업로드하는 것은 웹사이트 성능을 최적화하고 모든 디바이스에서 이미지가 선명하게 표시되도록 하는 데 중요합니다. 이상적인 이미지 크기는 게시물, 썸네일, 슬라이더 등 사용 환경에 따라 다를 수 있습니다. 반응형, 파일 크기, 이미지 퀄리티 등을 함께 고려해야 합니다.
워드프레스 이미지 크기 고려 사항
워드프레스에서 사용할 이미지를 선택하거나 생성할 때는 속도(성능)와 디자인 최적화를 위해 몇 가지 주요 사항을 고려해야 합니다. 고려해야 할 주된 요소로 이미지 크기, 파일 형식, 용량 등이 있습니다.
이미지 크기
이미지 크기는 사이트의 다양한 부분에서 표시되는 방식에 직접적으로 영향을 줍니다. 큰 이미지를 사용하면 로딩 시간이 느려져 사용자 경험(UX)과 SEO에 부정적인 영향을 미칠 수 있습니다. 반면, 너무 작은 이미지는 이미지가 흐릿해져 전반적인 시각적 퀄리티가 저하될 수 있습니다.
이미지 크기는 워드프레스 테마에 의해 결정되는 경우가 많으므로 헤더, 블로그 게시물, 갤러리 등 각 섹션에 적합한 크기를 확인하시기 바랍니다. 테마 설명서를 참고하여 권장 크기를 검토하세요.
파일 크기 (용량)
용량이 큰 파일 크기를 사용하면 페이지 로딩 시간이 느려지고 사용자 경험, 특히 모바일 환경에 부정적인 영향을 미칩니다. 사이트 로딩 시간이 길면 사용자들의 이탈률이 증가하여 방문자들이 페이지가 완전히 로딩되기 전에 떠날 가능성을 높아집니다.
적합한 이미지 파일 크기는 500KB 이하입니다. 그러나 선명하게 표시하고 자할 경우에는 최대 1MB까지 허용할 수 있습니다. 이미지 압축 도구를 활용하면 시각적 퀄리티를 유지하면서 파일 크기를 줄일 수 있습니다. 직접 압축하려는 경우 TinyPNG나 JPEG-Optimizer 같은 도구를 사용할 수 있습니다. 이미지를 압축한 후에는 Google PageSpeed Insights나 GTmetrix로 페이지 로딩 시간을 체크해보시기 바랍니다. 로딩 시간이 느리다면 이미지 크기를 더 줄이도록 합니다.
파일 형식
다양한 파일 형식(PNG, JPG, GIF 등)이 있으며 용도에 따라 파일 형식을 선택해야 합니다. 올바른 형식을 사용하면 이미지 퀄리티와 사이트 속도의 균형을 맞출 수 있습니다. 반면, 잘못된 파일 포맷을 선택하면 파일 크기가 불필요하게 커지거나 이미지 품질이 떨어질 수 있습니다.
JPEG(JPG)는 사진이나 컬러가 많은 이미지를 압축하는 데 적합합니다. 손실 압축을 사용해 (일부 디테일을 포기하지만) 파일 크기를 효과적으로 줄일 수 있습니다. 반면, PNG는 로고, 아이콘, 투명한 이미지에 적합하며 무손실 압축을 제공합니다. PNG 파일의 크기가 상대적으로 더 큽니다.
종횡비 (가로 세로 비율)
종횡비를 일관되게 유지하면 이미지가 다양한 기기와 화면 크기에서도 올바르게 표시됩니다. 하지만 종횡비가 맞지 않으면 이미지가 잘리거나 왜곡될 수 있습니다.
고정 레이아웃의 이미지(슬라이더, 배너 등)는 테마나 플러그인 문서에서 권장하는 종횡비를 따라야 합니다. 예를 들어, 배너는 16:9 비율이 일반적입니다. 갤러리나 그리드의 경우 4:3 또는 정사각형 썸네일(1:1)처럼 단일 종횡비를 선택하여 모든 이미지를 해당 비율로 자르시기 바랍니다. 반응형 이미지를 설정할 때는 다양한 기기와 화면 크기에서 종횡비가 제대로 작동하는지 테스트해야 합니다.
워드프레스 이미지 크기에 대한 베스트 프랙티스
홈페이지 속도는 사용자 경험과 SEO에 지대한 영향을 미칩니다. 지나치게 큰 이미지는 워드프레스 사이트를 느리게 만들 수 있으므로 이미지 크기를 최적화하여 로딩 속도를 빠르게 유지하면서도 화질을 포기하지 않는 것이 중요합니다.
적절한 크기로 이미지 크기 조정하기
사이트 요구에 맞는 크기의 이미지를 업로드합니다. 워드프레스에서 큰 이미지를 업로드하면 자동으로 크기가 조정되는데, 이 과정에서 웹 공간과 트래픽이 불필요하게 소모됩니다. 이미지를 업로드하기 전에 테마 레이아웃에 따라 필요한 최대 크기를 확인하시기 바랍니다. 예를 들어, 콘텐츠 영역이 800픽셀이라면 그보다 큰 이미지는 제대로 표시되지 않을 뿐 아니라 페이지 속도를 저하시킬 수 있습니다.
이미지 압축 툴 사용하기
앞서 언급했듯이 이미지를 압축하면 파일 크기를 줄일 수 있습니다. Adobe Photoshop이나 Microsoft Photos과 같은 편집 소프트웨어를 사용할 수 있습니다.
이러한 툴의 대안으로 TinyPNG과 같은 온라인 툴을 활용해도 효과적으로 이미지 크기를 줄일 수 있습니다.
최대 파일 업로드 제한 크기 변경하기
워드프레스에는 최대 파일 업로드 크기가 설정되어 있으며, 이 크기 제한은 호스팅 제공업체의 설정에 따라 다릅니다. 해당 사이트에서 업로드 가능한 최대 파일 크기를 확인하려면 워드프레스 알림판 » 미디어 » 새 미디어 파일 추가로 이동합니다. 그러면 업로드 가능한 최대 파일 크기가 표시됩니다.
일반적으로 이 페이지에 표시되는 최대 업로드 파일 크기보다 더 큰 파일을 업로드하려는 경우가 아니면 이 설정값을 조정할 필요는 없습니다. 하지만 다수의 작성자가 참여하는 블로그를 운영한다면, 불필요하게 큰 이미지가 업로되되는 예상치 못한 상황을 예방하기 위해 최대 파일 업로드 크기 설정을 낮추는 것을 고려할 수 있습니다.
최대 업로드 크기를 변경하려면 호스팅 제공업체에 문의하시기 바랍니다. 클라우드웨이즈를 이용하는 경우 서버의 Settings & Packages 섹션에서 변경할 수 있습니다.
레이지 로딩(Lazy Loading; 지연 로딩) 사용
레이지 로딩은 이미지를 필요할 때만 로드하도록 하는 속도 향상 기술입니다. 페이지 접근 시 모든 이미지를 곧바로 로드하는 대신, 사용자가 스크롤하여 이미지가 화면에 표시될 때 로드합니다. 이를 통해 초기 페이지 로딩 시간을 줄이고 트래픽(대역폭)을 절감하며 사용자 경험을 향상시킬 수 있습니다.
대부분의 워드프레스 테마와 플러그인은 레이지 로딩을 기본적으로 지원합니다. 워드프레스는 5.5 버전부터 네이티브 레이지 로딩 기능을 제공하며, WP Rocket, Lazy Load by WP Rocket, a3 Lazy Load와 같은 플러그인은 이미지 레이지 로딩 과정을 세밀히 제어하고 커스텀할 수 있는 옵션을 제공합니다. 이러한 툴은 전문 지식이 없이도 쉽게 적용할 수 있도록 합니다.
이미지 크기를 효과적으로 줄이고 사이트 속도를 향상시키는 베스트 프랙티스(Best Practice)에 대한 자세한 내용은 Divi 블로그 글의 "Best Practices for WordPress Image Sizes" 부분을 참조하시기 바랍니다.
마치며
개인 블로그를 운영하는 경우 이미지를 webp 파일로 변환하고 온라인 이미지 압축 사이트를 이용하여 추가로 압축하면 이미지 크기를 크게 줄일 수 있습니다. 저는 compressor.io이라는 온라인 이미지 압축 사이트에서 대부분의 이미지를 압축한 후에 워드프레스에 업로드합니다. 그러면 대부분의 파일 크기가 50KB 이하가 됩니다. 카페24 등 국내 호스팅을 이용하는 경우 웹 용량이 부족할 수 있습니다. 그런 경우 이런 방법으로 이미지 크기를 최소화할 수 있습니다.
워드프레스에서 이미지를 업로드하면 같은 이름의 여러 버전의 썸네일들이 생성됩니다. 웹 용량이 적은 경우 금방 디스크 공간이 소진될 수 있습니다. 그런 경우 호스팅 상품을 업그레이드하거나 패스트코멧이나 케미클라우드와 같은 해외호스팅을 고려해볼 수 있습니다. 케미클라우드는 특히 서울 서버를 추가하여 우리나라에서도 속도가 빠른 편입니다.
다른 방법으로 테마나 플러그인에서 생성하는 썸네일 크기를 확인하여 불필요한 썸네일은 생성되지 못하도록 한 다음, 썸네일을 재생성하는 것도 고려해볼 수 있습니다. 먼저는 백업을 철저히 한 후에 진행하는 것이 안전합니다.
이용하는 웹호스팅 웹 용량이 충분한 경우 이미지들을 WEBP 포맷으로 변환하는 Converter for Media 플러그인을 사용하는 것을 고려할 수 있습니다.
댓글 남기기