작성 예시 바로가기: 후보가 커진 원인을 기록표에서 좁히는 예시

화면에 보이는 크기와 내려받는 파일 크기는 다릅니다

모바일에서 사진이 화면 안에 들어간다고 해서 작은 파일을 내려받은 것은 아닙니다. 가로로 큰 원본을 받아 놓고 CSS로 줄여 보여줄 수도 있습니다. 반대로 작은 이미지를 큰 화면에 늘리면 파일은 가볍지만 세부가 흐려집니다. 반응형 이미지 검수는 “잘리지 않는다”는 확인과 “필요한 후보 파일을 선택한다”는 확인을 나누는 작업입니다. 이 글은 상품 사진이나 가이드 도식을 여러 화면에서 제공할 때 원본, 후보 파일, 표시 폭, 실제 선택 결과를 연결하는 절차를 설명합니다. 실제 사이트의 속도 개선 성과를 보고하는 글은 아닙니다.

썸네일은 상품을 식별하고, 확대 사진은 봉제선이나 연결부를 보여줍니다. 먼저 각 사진에서 읽혀야 할 세부를 정해 두면 파일을 줄인 뒤에도 그 정보가 남았는지 비교할 수 있습니다.

원본 폭·표시 폭·화면 폭을 세 칸으로 기록합니다

원본 폭은 이미지 파일 자체의 픽셀 수입니다. 표시 폭은 페이지에서 이미지가 차지하는 CSS 픽셀의 너비이고, 화면 폭은 브라우저의 뷰포트 너비입니다. 같은 화면 안에서도 본문 사진, 두 열 카드, 작은 후기 썸네일의 표시 폭은 다릅니다. 세 값을 모두 “이미지 크기”라고 부르면 편집자가 파일을 줄여야 하는지, 개발자가 레이아웃 힌트를 바꿔야 하는지 구분하기 어렵습니다.

설명용으로 화면 폭이 390 CSS 픽셀이고 본문 좌우 여백이 각각 20 CSS 픽셀이라고 가정해 보겠습니다. 이미지가 본문 폭을 모두 사용한다면 표시 폭은 350 CSS 픽셀입니다. 이것은 실제 detailry의 모든 페이지에 적용되는 값이 아니라 계산 관계를 보여주는 가정입니다. 두 열 카드 안에서는 같은 화면이어도 이미지가 훨씬 작아질 수 있으므로, 뷰포트가 390이라고 모든 이미지에 390만 필요하다고 결론 내리지 않습니다.

항목설명용 값기록 목적
화면 폭390 CSS px검수한 브라우저 조건
좌우 여백20 CSS px씩본문의 사용 가능 폭 계산
이미지 표시 폭350 CSS px파일 후보 선택 힌트와 대조
원본 폭파일마다 다름실제 파일 속성에서 확인

같은 장면의 후보 파일과 다른 구도의 이미지를 구분합니다

srcset은 브라우저가 선택할 이미지 후보를 제시합니다. 폭 설명자 w를 쓰는 방식에서는 각 후보의 실제 파일 폭을 적고, sizes로 표시 공간에 대한 힌트를 제공합니다. 파일 이름에 800이 들어간다고 실제 폭이 800 픽셀인 것은 아니므로, 등록 전에 파일 속성을 확인해야 합니다. 브라우저는 표시 공간과 화면 밀도 등의 조건을 참고해 후보를 고릅니다. 특정 후보를 모든 기기에서 강제로 고르는 장치로 이해하지 않습니다. 이 관계는 MDN 반응형 이미지 안내에서 확인할 수 있습니다.

후보끼리는 기본적으로 같은 장면을 같은 비율로 보여주는 편이 검수하기 쉽습니다. 큰 파일에는 상품의 뚜껑이 열려 있고 작은 파일에는 닫혀 있다면, 사용자는 화면 조건에 따라 서로 다른 상태를 보게 됩니다. 해상도 선택을 위해 만든 파일 묶음에 내용 차이가 섞인 것입니다. 제품 버전, 색상, 배경, 촬영 상태가 동일한지 후보 목록에서 먼저 대조합니다. 구도가 달라져야 한다면 별도의 편집 판단으로 관리합니다.

모바일에서 인물이나 상품의 핵심 부위를 더 크게 보여주기 위해 구도를 바꾸는 것은 단순한 해상도 선택과 다릅니다. 이 경우 picture처럼 조건에 따라 다른 이미지를 제공하는 구조를 검토할 수 있습니다. 다만 파일을 바꿀 때도 원래 사진이 전달하던 사실과 적용 조건을 유지해야 합니다. 큰 화면의 구성품 사진에서 일부를 잘라내 놓고 모바일에서는 그 구성품이 포함되지 않는 것처럼 보이게 만드는 편집은 피합니다.

sizes 예제는 실제 레이아웃을 설명해야 합니다

예제는 작은 화면에서 좌우 20px씩을 제외하고, 큰 화면에서는 최대 800px로 표시한다고 가정합니다. 코드의 후보 파일은 설명용 이름입니다. 실제 파일 폭과 페이지 여백에 맞게 바꾸어 사용하세요.

<img
  src="tray-800.jpg"
  srcset="tray-400.jpg 400w, tray-800.jpg 800w, tray-1600.jpg 1600w"
  sizes="(max-width: 840px) calc(100vw - 40px), 800px"
  width="1600" height="1000"
  alt="트레이의 테두리와 손잡이를 포함한 외형을 보여주는 사진">

이 예제에서 sizes는 CSS를 대신하지 않습니다. 이미지가 실제로 본문 폭을 사용하도록 만드는 레이아웃과 함께 대조해야 합니다. 편집자가 화면 여백을 20에서 24로 바꾸거나 큰 화면의 본문을 두 열로 나누었다면, 힌트가 이전 표시 공간을 가리키고 있을 수 있습니다. 레이아웃 변경 요청에 이미지 후보와 힌트 확인을 같이 넣어야 하는 이유입니다.

후보의 실제 폭과 w 설명자가 다르면 후보 목록을, 실제 표시 폭보다 sizes가 크면 레이아웃 힌트를 고칩니다. 실제 후보 폭·선언한 폭·페이지 표시 폭을 별도 열에 적으면 두 오류를 구별할 수 있습니다.

이미지가 로딩되는 동안 본문이 밀리는 문제는 파일 선택과 별개입니다. 이미지 영역을 미리 확보하는 방법에서 폭·높이와 화면 배치의 관계를 확인할 수 있습니다.

화면 캡처만으로 내려받은 후보를 판정하지 않습니다

검수자는 브라우저 개발자 도구의 네트워크 목록에서 이미지 요청 URL과 전송 정보를 확인하고, 선택한 이미지 요소의 currentSrc와 대조할 수 있습니다. currentSrc는 현재 요소가 사용하는 이미지 주소를 확인하는 데 도움이 됩니다. 사용 방법은 MDN currentSrc 문서를 참고합니다. 개인정보가 포함된 요청이나 관리자 세션을 외부로 공유하지 않고 이미지 관련 항목만 기록합니다.

화면을 넓혔다 좁히면 이미 받은 큰 후보를 계속 사용할 수 있습니다. 각 조건에서 새로고침 방식과 캐시 사용 여부를 적고, 화면 폭과 함께 DPR·확대 상태도 남깁니다.

화면 아래 지연 로딩 이미지에 요청이 없다면 먼저 해당 위치로 이동하세요. 그 뒤 이미지 요청과 응답을 확인하고, 파일이 표시된 다음 필요한 세부가 읽히는지 봅니다.

선택 결과와 읽기 품질을 한 장부에서 비교합니다

검수 조건기술 확인편집 확인
작은 화면표시 폭과 실제 선택 후보핵심 부위·설명선이 구분되는가
큰 화면본문 최대 폭과 후보의 실제 폭확대해도 필요한 디테일이 남는가
지연 로딩이동 후 요청·응답·표시 상태그림을 기다려도 설명 순서를 놓치지 않는가
파일 교체 후새 URL·후보 묶음·캐시 조건구성품·옵션·문장과 같은 버전인가

표에는 선택된 파일과 읽혀야 할 정보를 따로 적습니다. 전송량이 작아져도 손잡이 결합부나 치수선이 흐려지면 해당 이미지의 목적을 충족하지 못한 것입니다. 파일을 교체할 때는 같은 장면의 후보 파일 전체를 갱신했는지도 확인하세요.

파일을 가볍게 만들면서 정보까지 없애지 않습니다

상품 상세 사진은 압축 후 색상 차이, 질감, 얇은 연결선이 달라질 수 있습니다. 작은 도식 안의 글자는 파일이 정상 표시돼도 읽기 어려울 수 있습니다. 따라서 이미지의 정보는 가능한 한 본문 설명과 표에도 남깁니다. 복잡한 도식에 대한 접근성 원칙은 W3C WAI 복잡한 이미지 안내를 참고합니다. 이미지 속 작은 글씨를 대체 텍스트에 무작정 모두 넣기보다, 주변 문서에서 독자가 같은 의미를 확인할 수 있게 구성합니다.

후보마다 다른 대체 설명을 붙여 별개의 제품처럼 읽히게 만들 필요는 없습니다. 해상도 후보가 같은 의미를 전달한다면 이미지 요소의 설명도 그 의미를 중심으로 유지합니다. 구도가 달라져 사실의 범위까지 바뀌면 설명이 여전히 맞는지 다시 봅니다. 대표 사진에 “전체 구성”이라고 썼는데 모바일 구도에서 구성품 일부가 빠졌다면 이미지 선택과 문장을 함께 수정해야 합니다. 파일 최적화와 내용 검수는 별개의 담당자가 하더라도 한 번의 공개 승인으로 연결하는 편이 좋습니다.

사진의 핵심 정보를 어떤 문장으로 남길지는 이미지의 역할에 맞는 대체 설명과 함께 정하면 좋습니다.

후보가 커진 원인을 기록표에서 좁히는 예시

아래 선택 파일은 가상 관측 기록입니다. 브라우저가 이 조건에서 반드시 해당 파일을 고른다는 예측표가 아닙니다.

관측 조건기록된 결과다음 대조
모바일: 뷰포트 390 CSS px·표시 폭 350 CSS px·DPR 2폭 800 px 후보 파일 선택실제 currentSrc와 해당 파일 응답을 보관
같은 화면에서 sizes가 900px로 남음폭 1600 px 후보 파일 선택으로 기록됨레이아웃 표시 폭과 sizes 계산값의 불일치 조사
sizes 수정 후 재시험폭 800 px 후보 선택·그림 설명 유지새 방문과 캐시 방문을 별도 행으로 비교

같은 구도·표시 폭·DPR 조건에서 currentSrc와 요청을 비교합니다. sizes를 고친 뒤 작은 후보를 받더라도 치수선이나 작은 글자가 흐려졌다면 더 큰 후보가 필요합니다.

참고 자료와 적용 범위