천사티비 모바일 화면과 이미지 용량을 함께 확인하기

이미지 파일을 직접 세어 보았습니다

2026-11-04에 게시할 WebP 파일의 크기와 해상도를 읽었습니다. 아래 값은 이미지 한 파일 자체의 바이트 수입니다. HTML·CSS·HTTP 헤더·브라우저 캐시의 효과를 합친 총전송량이나 실제 회선 속도는 아닙니다.

해상도·파일 크기 원기록을 함께 제공합니다. 같은 안내 그림이 카드와 본문에 반복돼도 서로 다른 URL의 새 이미지를 여러 개 만드는 방식은 쓰지 않았습니다.

800px 파일을 340px로 표시할 때의 차이

이 안내의 본문 그림은 800 × 450px입니다. 좁은 화면에서는 CSS로 더 작게 보이지만, 같은 src를 쓰면 원본 파일의 바이트 수가 줄어들지는 않습니다. 따라서 모바일에서 파일이 큰지 판단할 때는 눈에 보이는 폭과 파일 크기를 따로 봐야 합니다.

이번 그림은 가장 큰 첫 화면 이미지도 23,874바이트였고, 본문용 세 장은 각각 13,526·7,924·8,022바이트였습니다. 이미 작은 파일을 다시 손실 압축해서 글자나 윤곽을 흐리게 만들 실익은 제한적이라고 판단했습니다. 512px 로고 원본은 본문 다운로드에 포함하지 않고 작은 favicon으로 변환했습니다.

이는 모든 WebP가 작다는 뜻이 아닙니다. 사진의 복잡도와 저장 품질에 따라 크기가 달라지므로 실제 파일을 비교해야 합니다. 배경 영상이나 큰 애니메이션을 없앤 효과와 정지 이미지 재압축 효과도 섞어 말하지 않습니다.

파일 크기와 별도로 확인한 화면 조건

게시 전 좁은 화면과 데스크톱에서 메뉴, 버튼, 긴 주소, 비교표를 확인합니다. 전체 페이지가 가로로 밀리는지와 표 내부만 필요한 만큼 스크롤되는지를 구분하며, 이미지에는 실제 비율의 width와 height를 지정했습니다.

첫 화면 배경은 바로 불러오고, 아래쪽 본문 그림은 지연 로딩합니다. web.dev의 이미지 지연 로딩 설명에서도 처음부터 화면에 보이는 주요 이미지를 늦게 불러오지 않도록 구분합니다. 지연 로딩은 이미지 파일 자체를 압축하는 기능이 아닙니다.

이 글은 실제 휴대폰의 이동통신망 속도 순위를 제시하지 않습니다. 데스크톱 브라우저의 좁은 화면 검사는 줄바꿈과 메뉴 문제를 찾는 데 유용하지만, 기기의 CPU·메모리·발열·회선 상태까지 재현하지는 못합니다.

어느 단계가 느린지 먼저 나눠 보세요

한 번에 네트워크, 브라우저, 사이트 데이터까지 모두 바꾸면 어느 조건이 영향을 줬는지 알기 어렵습니다. 같은 주소를 유지한 채 한 조건만 비교하고, 바뀐 결과를 남기는 편이 문의에 도움이 됩니다. 보안 경고가 나타난다면 속도 확인을 위해 경고를 무시하지 않습니다.

이번 점검에서 내린 선택

첫 화면 그림은 1280 × 720px를 유지해 데스크톱 배경이 지나치게 흐려지지 않도록 했습니다. 본문 그림은 800 × 450px를 유지하고, 외부 글꼴과 추가 효과 스크립트는 넣지 않았습니다. 숫자로 확인한 것은 파일의 해상도와 바이트 수이며, “모든 기기에서 몇 초 안에 열린다”는 약속을 만든 것은 아닙니다.

모바일 품질은 작은 파일 하나로 완성되지 않습니다. 읽을 수 있는 글자, 잘리는 부분 없는 버튼, 정확한 도착 화면을 함께 보는 것이 이 안내의 점검 기준입니다. 이동 후 다른 화면이 열리는 문제는 이미지 로딩과 별도로 다뤘습니다.