병원 광고 랜딩페이지 이미지 용량, 원본 파일보다 실제 전송 바이트를 봅니다

디자이너가 전달한 사진을 300KB로 줄였어도 브라우저가 같은 화면에서 배경·모바일용·슬라이더 이미지를 모두 받으면 총량은 커집니다. 반대로 고해상도 원본이 서버에 있어도 기기에 맞는 작은 후보만 전송된다면 문제가 아닐 수 있습니다. 파일 보관 크기가 아니라 실제 모바일 방문에서 어떤 이미지가 몇 바이트 전송되고 언제 표시되는지를 측정해야 합니다.

페이지가 요청하는 이미지를 먼저 전부 찾습니다

HTML의 `img`, CSS 배경, 슬라이더, 팝업, 채팅 위젯과 숨김 탭을 포함해 네트워크 요청 목록을 저장합니다. 첫 화면에 보이지 않는데 즉시 내려받는 이미지와 같은 사진의 중복 URL을 표시합니다. 로고·아이콘·사진·도식처럼 성격별로 나누면 적합한 형식과 압축 판단이 쉬워집니다.

개발자 도구에서 캐시를 끄고 모바일 화면과 제한된 네트워크 조건으로 새로고침합니다. 전송 바이트, 리소스 크기, 요청 수와 가장 늦게 표시되는 주요 이미지를 기록합니다. 한 번의 점수보다 같은 조건의 배포 전후 차이를 봅니다.

표시 폭에 맞는 후보가 선택되는지 봅니다

작은 카드에 3000px 사진을 보내고 CSS로만 줄이지 않습니다. 표시 폭과 화면 밀도에 맞는 여러 후보를 만들고 `srcset`과 `sizes`가 실제 레이아웃을 설명하는지 확인합니다. 크롭이 달라야 정보가 유지되는 경우에는 `picture`를 사용하되 모든 후보의 의미와 대체 텍스트가 맞는지 봅니다.

web.dev의 이미지 자동화 안내는 이미지 소스의 인코딩·압축과 대체 크기 생성, `srcset` 마크업을 작업 흐름에 포함하는 방법을 설명합니다. 압축 및 인코딩 자동화 AVIF·WebP 같은 형식에는 지원 환경을 고려한 대체 파일을 두고 압축 흔적과 의료 이미지의 의미 손실을 사람이 확인합니다.

지연 로딩과 우선순위를 구분합니다

첫 화면의 핵심 이미지를 무조건 지연 로딩하면 빈 영역이 오래 남을 수 있고, 아래쪽 이미지를 모두 즉시 받으면 초기 경쟁이 커집니다. 화면 위치와 중요도를 기준으로 로딩 전략을 정합니다. 배경 이미지는 HTML 반응형 이미지와 선택 방식이 달라 실제 네트워크 결과를 별도로 확인합니다.

이미지에 병원명·가격·조건 같은 중요한 글자를 넣지 않습니다. 텍스트는 마크업으로 제공하고 사진에는 목적에 맞는 대체 설명을 둡니다. 장식 이미지는 화면 읽기 도구에 불필요하게 반복되지 않게 처리합니다.

업로드 경로에 용량 회귀 방지를 넣습니다

CMS 업로드 때 최대 픽셀, 허용 형식과 압축 후보 생성을 자동화하고 실패 시 원본을 그대로 공개하지 않게 합니다. 캠페인 복제·A/B 테스트가 새 파일명을 만들어 캐시와 중복 다운로드를 늘리는지 봅니다. 이미지별 예산은 일률적 숫자보다 화면 역할과 품질 요구에 따라 정하고 전체 페이지 예산도 함께 둡니다.

수정 뒤에는 실제 광고 최종 URL에서 캐시 없음·재방문 조건을 모두 측정하고 이미지가 깨졌을 때 레이아웃과 대체 텍스트를 확인합니다. 출처 확인일은 2026-10-26입니다. 용량과 네트워크 조건은 검수 환경에 따라 달라지므로 동일 조건의 측정 기록을 근거로 판단해야 합니다.