대표 이미지 용량 200KB 맞추기

대표 이미지는 선명도만큼 전송 크기가 중요합니다. 저는 1200×630 비율로 작업하고 사진은 WebP 품질 75~82, 단순 도형은 PNG나 WebP를 비교해 200KB 안팎을 목표로 합니다. 글자가 들어간 이미지는 모바일에서 축소해도 읽히는지 실제 크기로 확인합니다.

원본을 바로 업로드하지 않고 가로 크기를 먼저 줄인 뒤 압축합니다. 같은 화면을 PNG와 WebP로 각각 저장해 테두리와 작은 글자의 번짐을 비교합니다. 파일명은 영문 소문자와 하이픈으로 정하고 대체텍스트에는 파일명이 아니라 이미지가 전달하는 의미를 씁니다.

위블로그에 올린 뒤에는 첫 화면의 가장 큰 콘텐츠가 언제 보이는지, 느린 네트워크에서 빈 공간이 얼마나 지속되는지 확인합니다. 이미지의 표시 크기와 원본 크기가 지나치게 다르면 작은 화면에 불필요한 데이터를 보내게 됩니다. 너비와 높이 비율을 예약해 로딩 중 본문이 밀리지 않게 합니다.

모든 이미지를 같은 수치로 억지 압축하지는 않습니다. 제품의 작은 차이를 보여 주는 사진은 300KB까지 허용하고 장식 이미지는 더 작게 만듭니다. 월별 속도 점검에서 가장 무거운 이미지 10개를 다시 최적화하면 전체 페이지를 손대는 것보다 효과가 큽니다.