2. HTML_이미지 동영상 삽입

 

 

 

개요: 2026년 기준 웹 페이지 제작 시 필수적인 이미지 및 동영상 미디어 최적화 삽입 가이드입니다. 사용자 경험과 로딩 성능(LCP)을 극대화하는 표준 속성들을 정리합니다.

HTML5

Web Performance

LCP Optimization

Core Web Vitals

목차 1. 이미지 삽입 및 최적화 2. 동영상 삽입 및 자동 재생

이미지 삽입 및 최적화

현대 웹 개발에서는 단순 삽입을 넘어 성능 최적화가 필수입니다. LCP(Largest Contentful Paint) 개선을 위해 초기 로드되는 이미지에는 fetchpriority 속성을 활용하십시오.

 

 

 

<img src="hero.jpg" alt="메인 이미지" loading="eager" fetchpriority="high" width="800" height="600">

실무 팁:

• fetchpriority="high": 화면 최상단(Hero Section) 이미지에 적용하여 로딩 순서를 우선시합니다.
• loading="lazy": 화면 하단 이미지에 필수적으로 적용하여 초기 로딩 속도를 높입니다.
• width/height 정의: 레이아웃 시프트(CLS)를 방지하기 위해 필수 기재합니다.

동영상 삽입 및 자동 재생

동영상은 호환성뿐만 아니라 자동 재생 정책을 고려해야 합니다. 모든 자동 재생 영상은 반드시 음소거 상태여야 합니다.

 

 

 

<video autoplay muted playsinline loop poster="thumb.jpg"> <source src="video.mp4" type="video/mp4"> 현재 브라우저는 동영상을 지원하지 않습니다. </video>

실무 팁:

• autoplay & muted: 브라우저의 자동 재생 정책을 준수하기 위해 두 속성을 함께 사용해야 합니다.
• playsinline: iOS 기기에서 영상이 전체 화면으로 강제 전환되는 것을 방지합니다.
• WebM 권장: MP4보다 압축률이 우수한 WebM 형식을 병행 제공하면 로딩 속도가 비약적으로 향상됩니다.

TOP