이미지 리소스

1. 소개

웹 애플리케이션은 종종 개발자가 제공한 이미지 리소스를 HTML 문서 외부(예: 운영 체제, 브라우저 UI 등)에 표시하도록 받습니다. 이 명세는 이미지를 설명하고 이미지 리소스를 어디에서 가져올 수 있는지 나타내는 WebIDL 사전을 정의합니다. 사용자 에이전트는 이러한 추가 정보를 활용하여 최종 사용자의 기기에 가장 적합하게 표시하거나, 사용자의 환경 또는 선호와 가장 잘 일치하는 이미지를 선택할 수 있습니다.

2. 개인정보 및 보안 고려사항

이미지 리소스 가져오기는 사용자의 IP 주소를 노출할 수 있습니다. 사용자 에이전트가 개발자가 제공한 이미지 리소스를 가져와 필요 시 재사용을 위해 저장하는 것이 권장됩니다. 이렇게 하면 사용자의 위치를 장기간 추적하는 것을 제한할 수 있습니다.

3. 이미지 리소스

이미지 리소스는 다음으로 구성됩니다:

src

이미지 데이터를 가져올 URL입니다.

sizes

이미지를 나타내는 선택적 문자열로, link의 sizes 속성과 동일한 구문을 사용해 이미지의 크기를 표현합니다.

type

선택적 이미지 MIME 타입입니다.

label

이미지의 접근 가능한 이름을 나타내는 문자열입니다.

API에서, 이미지 리소스는 ImageResource 사전으로 표현됩니다.

[JSON]에서는 이미지 리소스가 객체로 표현됩니다.

4. ImageResource 사전

WebIDLdictionary ImageResource {
  required USVString src;
  DOMString sizes;
  DOMString type;
  DOMString label;
};

const image = {
  src: "path/to/image.ico",
  sizes: "16x16 32x32 64x64",
  type: "image/vnd.microsoft.icon",
};
some.api.doSomething(image);

5. API에서 ImageResource 처리

API에서 ImageResource를 처리하는 절차는 아래 알고리즘에 따릅니다. 이 알고리즘에는 ImageResource input이 인자로 들어오며, 이미지 리소스를 반환합니다.

1. base URL을 해당 사전이 사용되는 relevant settings object의 api base url로 설정합니다.
2. image를 새로운 이미지 리소스로 생성합니다.
3. image의 src에 input.src와 base URL로 URL 파싱을 한 결과를 할당합니다. URL 파싱에 실패하면 TypeError를 throw합니다.
4. input의 sizes 멤버가 있다면:
   1. image의 sizes에 input.sizes 값을 sizes 속성을 가진 link 요소처럼 파싱한 결과를 할당합니다. 파싱이 실패하면 TypeError를 throw합니다.
5. input의 type 멤버가 있고 내용이 빈 문자열이 아니라면:
   1. type이 이미지 MIME 타입이 아니면 TypeError를 throw합니다.
   2. image의 type에 input.type 값을 할당합니다.
6. image의 label을 접근 가능한 이름 유도의 결과로 설정합니다.
7. image를 반환합니다.

6. JSON에서 이미지 리소스 처리

JSON에서 이미지 리소스 처리는 JSON 객체 input과 URL base가 주어졌을 때, 동작합니다. 반환값은 순서 있는 맵입니다.

1. input이 object 타입이 아니면, 실패를 반환합니다.
2. input["src"]가 문자열 타입이 아니면, 실패를 반환합니다.
3. src에 파싱 결과인 input["src"]와 base를 기반 URL로 사용한 값을 할당합니다.
4. src가 실패라면, 실패를 반환합니다.
5. image에 새로운 순서 있는 맵을 할당합니다.
6. image["src"]에 src를 할당합니다.
7. input["sizes"]의 타입이 문자열이고 길이가 0보다 크면:
   1. sizes에 input["sizes"]를 sizes 속성을 가진 link 요소처럼 파싱한 결과를 할당합니다. 이때 rel 속성에 icon 토큰이 포함되어야 합니다.
   2. sizes가 실패면, 실패를 반환합니다.
   3. image["sizes"]에 sizes를 할당합니다.
8. input["type"]의 타입이 문자열이고 길이가 0보다 크면:
   1. mime에 파싱 결과인 input["type"]을 할당합니다.
   2. mime이 실패라면, 실패를 반환합니다.
   3. image["type"]에 essence of mime을 할당합니다.
9. image["label"]에 접근 가능한 이름 유도 결과값을 할당합니다.
10. image를 반환합니다.

7. 이미지 리소스 가져오기

이미지 리소스 가져오기의 절차는 아래 알고리즘과 같습니다. 이 알고리즘은 이미지 리소스 image와, 선택적 Request request를 받습니다. 반환값은 Response 입니다.

1. request가 undefined이면:
   1. request에 새로운 Request를 할당합니다.
   2. URL을 image의 src로 설정합니다.
   3. Destination을 "image"로 설정합니다.
   4. Client를 컨텍스트 객체의 relevant settings object로 설정합니다.
2. request의 Client가 null이면, TypeError를 throw합니다.
3. request를 이용하여 fetch를 수행하고 Response를 반환합니다.

8. 접근 가능한 이름 유도

접근 가능한 이름 유도 절차는 이미지 리소스 resource에 대해 다음과 같습니다. 반환값은 문자열입니다.

1. resource["label"]이 문자열이면, input["label"]을 반환합니다.
2. 그렇지 않고 image에 내장 접근 가능한 이름이 있으면, 그 내장 접근 가능한 이름을 반환합니다.
3. 그렇지 않고 외부 레이블로 대체 가능하다면, 해당 외부 레이블을 반환합니다.
4. ""(빈 문자열)을 반환합니다.

9. 내장 접근 가능한 이름을 지원하는 그래픽 포맷 예시

특정 그래픽 포맷은 이미지의 내용 일부로 내장 접근 가능한 이름을 포함할 수 있습니다. 예시는 다음과 같습니다:

• title 요소 ( SVG )
• 래스터 이미지의 메타데이터 (예: tiff:ImageDescription, XMP:Description)

10. 적합성

비규범 부분으로 표시된 섹션뿐 아니라, 이 명세서의 모든 작성 지침, 다이어그램, 예시 및 참고 사항은 비규범입니다. 이 명세서의 나머지 모든 부분은 규범적입니다.

이 문서 내 MAY, MUST, RECOMMENDED 키워드는 BCP 14 [RFC2119] [RFC8174] 에서와 같이 모두 대문자로 표시될 때에만 해당 의미로 해석되어야 합니다.