이미지 파일 형식¶

picture 요소 사용하기¶

picture 요소는 format-<type> 이미지 작업을 사용하여 다양한 이미지 형식을 지정하고 브라우저가 선호하는 형식을 선택하도록 할 수 있습니다. 예를 들어:

{% load wagtailimages_tags %}

<picture>
    {% image myimage width-1000 format-avif as image_avif %}
    <source srcset="{{ image_avif.url }}" type="image/avif">

    {% image myimage width-1000 format-webp as image_webp %}
    <source srcset="{{ image_webp.url }}" type="image/webp">

    {% image myimage width-1000 format-png as image_png %}
    <source srcset="{{ image_png.url }}" type="image/png">

    {% image myimage width-1000 format-png %}
</picture>

출력 형식 사용자 정의하기¶

기본적으로 이미지 출력 형식이 지정되지 않은 경우 모든 avif, bmp, webp 이미지는 png 형식으로 변환되고 heic 이미지는 jpeg 로 변환됩니다.

기본 변환 매핑은 WAGTAILIMAGES_FORMAT_CONVERSIONS 를 입력 유형을 출력 유형에 매핑하는 딕셔너리로 설정하여 변경할 수 있습니다.

예를 들어:

    WAGTAILIMAGES_FORMAT_CONVERSIONS = {
        'avif': 'avif',
        'bmp': 'jpeg',
        'webp': 'webp',
    }

위 코드는 bmp 이미지를 jpeg 로 변환하고 기본 avif 및 webp 의 png 변환을 비활성화합니다.