썸네일은 작아 보여도 합이 큽니다
한 장은 작아도 목록 페이지에 수십 장이 모이면 전체 로딩 바이트가 크게 늘어납니다. 사용자가 목록에서 스크롤할 때 이미지가 하나씩 뜨는 지연이 생기면 페이지 전체가 느리다는 인상을 줍니다.
블로그·쇼핑몰·포트폴리오처럼 목록 뷰가 중요한 사이트에서는 썸네일 최적화가 메인 콘텐츠 이미지 최적화만큼 중요합니다. 목록 페이지 속도가 빠르면 사용자가 개별 글이나 상품 페이지로 이동하는 경험이 훨씬 매끄러워집니다.
본문 이미지와 동일 파일을 쓰면 낭비입니다
역할이 다르면 해상도와 품질 기준도 달라야 합니다. 본문에서 1200px로 보여줄 이미지를 목록에서 200px 슬롯에 쓰면, 다운로드하는 바이트의 대부분이 낭비입니다.
썸네일 전용 파일을 만들면 초기 로딩 속도가 눈에 띄게 좋아집니다. 작업량이 늘어 보이지만, 한 번 규칙을 정해두면 이후에는 자연스럽게 따라갈 수 있습니다.
만드는 법
목록 박스 크기에 맞는 리사이즈를 먼저 합니다. 박스가 200×200px이라면 400px(레티나 대응) 이하로 줄이는 것이 적절합니다. 그다음 JPEG나 WebP로 공격적으로 압축해 50~80KB 이하를 목표로 합니다.
lazy load를 함께 적용하면 스크롤하기 전에는 뷰포트 밖 이미지를 로딩하지 않아 초기 페이지 속도가 더욱 빨라집니다. 작은 placeholder(흐린 버전 또는 색 블록)를 먼저 보여주다가 실제 이미지로 교체하는 방식도 체감 로딩을 개선합니다.
도구로 썸네일 후보 만들기
본문용과 분리해 별도 파일로 압축하는 습관이 좋습니다. 이 사이트의 이미지 용량 줄이기 도구와 이미지 크기 조절 도구를 순서대로 쓰면 리사이즈와 압축을 분리해 처리할 수 있습니다.
파일명 규칙을 정해두면 관리가 쉬워집니다. 예를 들어 `product-01-thumb.jpg`처럼 '-thumb' 접미사를 붙이면 본문용과 혼동하지 않습니다.
정리: 썸네일 최적화는 트래픽 절감의 숨은 열쇠
목록이 빠르면 사이트 전체 체감이 좋아집니다. 개별 상품·글 페이지를 최적화하는 것만큼 목록 페이지를 가볍게 유지하는 것도 중요합니다.
썸네일 이미지 최적화는 한 번에 대규모로 작업하기보다, 신규 콘텐츠를 추가할 때마다 규칙대로 처리하는 루틴을 만드는 것이 장기적으로 더 효과적입니다.