놀라운 HTML 그림 요소

그림 요소는 "CSS"미디어 쿼리를 작성할 필요 없이 다양한 화면 크기 또는 뷰포트를 기반으로 이미지를 선언하기 위한 HTML 요소입니다. 두 가지 속성, 즉 <source> 속성을 사용하여 다양한 화면 크기에 따라 다른 이미지를 지정하는 — srcset 태그와 브라우저에서 대체 이미지 역할을 하는 필수<img> 태그를 사용합니다. t 그림 요소를 지원합니다.

사용 사례

그림 태그가 매우 유용할 수 있는 몇 가지 사용 사례 시나리오가 있습니다. 아래는 이러한 사례의 세 가지 예입니다.

이미지 유형 지원

이미지에는 AVIF 및 WEBP와 같은 다양한 형식이 있으며 이는 많은 장점이 있지만 모든 브라우저에서 지원되지 않을 수 있습니다. 이 경우 그림 태그는 <source> 태그를 사용하여 대체 형식을 제공하는 데 유용합니다. 출처: MDN Docs

이미지 폭

다양한 화면 크기에 따라 표시할 이미지를 결정합니다. 이는 데스크톱 화면에서 큰 이미지를 미리 보고 모바일 또는 태블릿 화면에서 더 작은 이미지를 미리 보려는 경우에 특히 중요할 수 있습니다.

대역폭 절약

그림 태그는 대역폭을 절약하는 데 유용할 수 있으며 뷰어의 표시에 가장 적합한 이미지를 로드하여 페이지 로드 시간을 단축합니다.

작동 원리

데스크톱에서는 483KBgif 이미지, 태블릿 화면에서는 250KB 이미지, 마지막으로 모바일에서는 32.7KBPNG 이미지를 보여주는 이 간단한 예를 통해 그림 요소가 어떻게 작동하는지 보여드리겠습니다. 이것은 그림 요소로 가능한 것을 보여 주는 것일 뿐이며 더 창의적으로 만들 수 있습니다.

<picture>
   <source media="(min-width: 768px)" srcset="desktop-image.gif" />
   <source media="(min-width: 500px)" srcset="tablet-image.png" />
   <img src="mobile-image.png" alt="Banner image" />
</picture>

media="" 속성을 사용하여 표시할 각 이미지의 중단점을 지정했습니다. 768px 이상에서는 데스크톱 이미지가 표시되기를 원합니다. 그렇다면 767px에서는 어떻게 될까요? 음, 우리가 이 특정 중단점을 명시적으로 지정하지 않았더라도 그림 요소는 다음 소스 태그를 사용할 수 있을 만큼 똑똑합니다. 태그가 표시되지 않으면 모바일 화면에 대해 500px의 기본 대체 이미지로 전환됩니다. . 이것이 다소 혼란스럽다면 라이브 예제를 확인하여 더 명확하게 확인하십시오.

https://picture-element.netlify.app

효과를 보려면 화면 크기를 조정해 보세요.

브라우저 호환성

그림 요소는 오래된 "Internet Explorer"를 제외한 대부분의 브라우저에서 지원되지만 Microsoft가 June 15 2022에서 IE를 중단할 것이라고 발표했기 때문에 이에 대해 신경쓰지 않을 것입니다. 따라서 모든 주요 브라우저가 다음 달부터 그림 태그를 지원할 것이라고 해도 무방합니다.



출처: MDN Docs

드디어

따라서 HTML 그림 요소의 힘을 볼 수 있습니다. 바라건대, 이것은 당신에게 그것을 사용하는 방법에 대한 몇 가지 아이디어를 제공했습니다. 아트 디렉션에 관심이 있는 개발자에게는 그림 요소가 적합합니다. 전반적으로 이미지를 최적화하여 모바일 사용자에게 더 나은 경험을 제공하여 SEO 및 성능을 향상시키는 등 여러 작업을 수행하는 데 사용할 수 있습니다.

이전에 그림 요소를 듣거나 사용한 적이 있는지 궁금합니다. 아래 의견에 알려주십시오. 읽어 주셔서 감사합니다. 다른 기사에서 뵙겠습니다.

중요한 링크

Code File

Live URL