먼저 화면에서 실제로 몇 px로 보이는지 확인합니다
본문 폭이 900px인 사이트에 5000px 사진을 그대로 올려도 화면에서 보여주는 정보가 다섯 배 늘어나는 것은 아닙니다. 브라우저는 큰 파일을 내려받은 뒤 작게 표시할 뿐이라 전송량만 커질 수 있습니다.
고해상도 화면 때문에 정확히 표시 폭만 맞추는 것도 아쉽습니다
고밀도 디스플레이에서는 CSS상의 한 픽셀을 여러 물리 픽셀로 표현합니다. 그래서 중요한 대표 이미지는 표시 폭보다 여유 있게 준비하되, 무조건 원본 최대 크기를 유지할 필요는 없습니다.
사진과 UI 캡처의 기준은 다르게 잡습니다
사진은 약간의 손실 압축을 적용해도 자연스럽게 보이는 경우가 많지만, 코드·표·UI처럼 작은 글자가 많은 이미지는 압축 흔적이 읽기 편의성을 떨어뜨릴 수 있습니다.
- 표시 영역보다 지나치게 큰 원본 피하기
- 모바일에서도 읽어야 하는 글자 크기 확인
- 대표 이미지와 작은 썸네일을 같은 파일로 강제하지 않기
- 가능하면 실제 페이지에서 로딩과 선명도를 함께 확인
한 번의 규칙보다 반복 가능한 작업 순서가 중요합니다
사용처 크기 확인 → 리사이즈 → 형식 선택 → 압축 → 실제 화면 확인 순서로 작업하면 이미지마다 숫자를 외우지 않아도 안정적으로 최적화할 수 있습니다.