좁은 화면에서 작품 사진의 세부가 너무 작아지면 다른 구도의 이미지를 보여줄 수 있다. <picture>는 조건에 따라 이미지 후보를 나누는 HTML 요소다. 작품 이미지의 여러 크기가 같은 장면의 해상도를 고르는 문제라면, 여기서는 무엇을 보여줄지 달라진다.
- 아래 예제는 좁은 화면에서 정사각형 세부 사진을, 넓은 화면에서 가로형 전체 사진을 보여준다.
<source>는 위에서부터 조건을 평가한다. 마지막<img>는 기본 이미지와 대체 텍스트를 제공한다.- 작품을 잘라 보여줄 때는 전체 모습인 것처럼 제시하지 않는다. 캡션에서 조건을 밝히고 전체 이미지로 가는 하이퍼링크를 둔다.
작은 예제
아래 코드를 UTF-8 형식의 example-02.html로 저장해 웹 브라우저에서 연다. 전체 사진 whole.png는 1200×800픽셀, 세부 사진 detail.png는 600×600픽셀로 준비한다. 이 예제의 장면은 가상의 작품이며 실제 파일과 설명을 함께 바꾼다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>화면에 따라 달라지는 이미지의 구도</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 1rem; font-family: sans-serif;
line-height: 1.6; color: #222; background: #fff; }
main { max-inline-size: 60rem; margin-inline: auto; }
h1 { font-size: 1.7rem; line-height: 1.3; }
a { color: #174fa0; }
:focus-visible { outline: 3px solid #174fa0; outline-offset: 3px; }
figure { margin: 0; }
img { display: block; inline-size: 100%; block-size: auto; }
</style>
</head>
<body>
<main>
<h1>화면에 따라 달라지는 이미지의 구도</h1>
<figure>
<picture>
<source media="(max-width: 40rem)" srcset="detail.png"
width="600" height="600">
<img src="whole.png" width="1200" height="800"
alt="종이를 여러 겹 붙인 표면에서 드러나는 접힌 자국">
</picture>
<figcaption>좁은 화면에서는 세부를 보여준다.
<a href="whole.png">전체 이미지 보기</a>
</figcaption>
</figure>
</main>
</body>
</html>창을 넓히고 좁히며 사진과 높이가 함께 바뀌는지 확인한다. 대체 텍스트는 두 구도에서 공통으로 전달할 수 있는 내용으로 쓴다. 구도마다 설명이 크게 달라져야 한다면 별도 이미지와 캡션으로 나누는 편이 낫다. 캡션이 작품을 바꾸는 순간과 작품 사진의 잘린 가장자리는 이 선택을 이어 살필 주제다.