📌 background-image 대신 img 태그를 사용하자

이미지를 배경으로 사용하는 여러 방법이 있습니다. CSS의 background-image 속성을 이용해 배경에 넣는 방법과 HTML의 img 태그를 사용하는 방법이죠. 오늘 소개해드릴 글에서는 HTML만으로 이미지를 동적으로 설정하는 방법을 안내합니다. CSS보다 성능에도 더 유리하다고 하네요! - 1️⃣ 이미지 성능을 향상시키기 위한 img 태그의 속성은 loading=lazy입니다. 뷰포트에 없는 이미지를 자동으로 다운로드하지 않기 때문에 크게 성능이 개선됩니다. 2️⃣ img 상단에 picture를 추가하면 webp와 같은 보다 현대적이고 최적의 이미지 포맷을 지정할 수 있습니다. source 태그를 통해 지원가능한 브라우저에서 사용할 수 있습니다. 3️⃣ 브라우저가 메인 스레드에서 이미지 디코딩하지 않고 이동할 수 있도록 이미지에 decoding="async"를 지정할 수 있습니다. 4️⃣ alt 텍스트는 접근성과 SEO에 매우 중요하며 간과해서는 안됩니다. 또한, 추상적인 모양, 색상 또는 그라데이션과 같이 순수하게 표현되는 이미지의 경우 다음과 같은 role 속성을 사용하여 표현으로만 명시적으로 표시할 수 있습니다. 5️⃣ 가능하면 CSS에 background-image 대신 HTML에 img를 사용하세요. 그리고 이미지를 최적 방법으로 전달하기 위해 지연 로딩, srcset, picture 태그, 그리고 위에서 논의한 다른 최적화 방식을 사용하세요. 우선 순위가 낮은 이미지와 비교하여 우선 순위가 높은 이미지를 인식하고 그에 따라 속성을 조정하세요.