HTML5 <PICTURE> 태그

일반적으로 background-image 속성을 사용했을 때 사용하는 큰 이유는 background-size:cover 속성 때문인데..

이를 해결하기 위해서 object-fit으로 해결하실 수 있습니다.

이럴 때, picture를 사용하면 background-size:cover와 동일한 효과가 생깁니다.

그리고 또한 다른 부수효과를 얻을 수 있는데요.

• SEO 친화적 이미지
• 접근성 친화적 이미지(alt="" 속성 사용)
• CMS-generated 이미지, CDN과 함께 잘 동작함
• 이미지 최적화를 위한 srcset과 함께 잘 작동
• .webp같은 next-generation 이미지 포맷을 위해 태그를 사용하여 활용할 수도 있습니다.

<picture>
<img src="..." alt="..." style="object-fit:cover" loading="lazy" />
</picture>

이렇게 하고나면 또 Chrome이나 다른 브라우저의 이미지 로드 기능과 같은 장점도 얻을 수 있습니다.

이런 이미지들은 또한, Image Optimize 같은 도구를 통해 CMS에서 크기가 자동으로 조정될 수도 있습니다.
object-fit 속성을 사용하면 css를 사용하여 이미지 크롭핑 효과도 얻을 수 있습니다.