HTML5 Picture 태그 사용법

1. Picture 태그란?

Picture 태그는 반응형 이미지를 구현하는 데 사용됩니다. 다양한 화면 크기나 해상도에 따라 다른 이미지를 제공할 수 있게 해주며, 주로 반응형 웹 디자인에서 활용됩니다.

2. 기본 구조

<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="반응형 이미지">
</picture>

3. 자주 사용되는 속성

4. 실제 사용 예제

<!-- 기본 반응형 이미지 예제 -->
<div class="responsive-example">
    <h3>기본 반응형 이미지 예제</h3>
    <picture>
        <source media="(min-width: 800px)" srcset="large.jpg">
        <source media="(min-width: 400px)" srcset="medium.jpg">
        <img src="small.jpg" alt="반응형 이미지">
    </picture>
</div>

<!-- 고해상도 디스플레이 예제 -->
<div class="retina-example">
    <h3>고해상도 디스플레이 예제</h3>
    <picture>
        <source srcset="image.jpg 1x, image-2x.jpg 2x">
        <img src="image.jpg" alt="고해상도 이미지">
    </picture>
</div>

<!-- WebP 지원 예제 -->
<div class="webp-example">
    <h3>WebP 지원 예제</h3>
    <picture>
        <source type="image/webp" srcset="image.webp">
        <img src="image.jpg" alt="WebP 지원 이미지">
    </picture>
</div>

<style>
    /* 반응형 이미지 예제 스타일 */
    .responsive-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 고해상도 이미지 예제 스타일 */
    .retina-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* WebP 이미지 예제 스타일 */
    .webp-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        .responsive-example,
        .retina-example,
        .webp-example {
            margin: 10px 0;
            padding: 10px;
        }
    }
</style>

5. 스타일링 예제

<style>
    /* 기본 picture 스타일 */
    picture {
        display: block;
        max-width: 100%;
        height: auto;
    }

    /* 이미지 스타일 */
    picture img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        picture {
            margin: 10px 0;
        }
    }
</style>

6. 성능 최적화 팁

• 적절한 이미지 크기를 사용합니다.
• 이미지 최적화를 수행합니다.
• 지연 로딩을 고려합니다.
• 불필요한 이미지 로딩을 피합니다.

7. 검증 및 테스트

picture 태그가 올바르게 사용되었는지 확인하는 방법:

• W3C 마크업 검증 서비스 사용
• 다양한 브라우저에서 테스트
• 다양한 화면 크기에서 테스트
• 이미지 로딩 테스트
• 접근성 검사 도구 사용