HTML5에 이미지와 비디오를 포함시키는 방법은 무엇입니까?

html5에 이미지와 비디오를 포함시키는 방법?

html5에 이미지와 비디오를 포함시키는 방법은 이미지의 태그와 비디오의 태그를 사용합니다. 이미지의 경우 속성은 이미지의 URL 또는 경로를 지정하는 반면 속성은 접근성 및 검색 엔진에 대한 대체 텍스트를 제공합니다.

텍스트는 이미지의 내용을 간결하게 설명해야합니다. 예를 들면 다음과 같습니다.

<img src="/static/imghwm/default1.png" data-src="myimage.jpg" class="lazy" alt="HTML5에 이미지와 비디오를 포함시키는 방법은 무엇입니까?" > 비디오의 경우 태그를 사용하면 태그를 사용하여 여러 비디오 소스를 지정하여 다양한 형식 (MP4, Webm, OGG)을 더 넓은 브라우저 호환성을 지원할 수 있습니다. <video></video> 속성은 내장 플레이, 일시 정지 및 볼륨 컨트롤을 추가합니다. 또한 비디오가 재생되기 전에 표시되는 src 속성을 ​​사용하여 포스터 이미지를 지정할 수도 있습니다. 예는 다음과 같습니다. alt alt "브라우저는 비디오 태그를 지원하지 않습니다" 요소를 지원하지 않는 브라우저의 폴백 역할을합니다. 실제 파일 경로 또는 URL로 , 및 를 바꾸는 것을 잊지 마십시오. 이미지와 비디오를 표시하는 데 필요한 html 태그가 무엇입니까? 이미지를 표시하려면 주로 태그가 필요합니다. 필수 속성은

(이미지의 소스) 및

<img src="/static/imghwm/default1.png"  data-src="myimage.jpg"  class="lazy" alt="A beautiful sunset over the ocean">

(대체 텍스트)입니다. 선택적 속성에는 ,

, <video></video> (CSS 스타일의 경우) 및 기타 이미지 디스플레이를 제어하려면 <source></source>가 포함됩니다. 비디오를 표시하려면 태그가 필수적입니다. 태그 내에서 일반적으로 태그를 사용하여 다양한 형식 ( 속성)을 가진 여러 비디오 소스를 지정하여 다양한 브라우저에서 호환성을 보장합니다. , controls, poster (플레이어 컨트롤을 추가하기 위해), (재생 전에 표시 할 스틸 이미지) 및 태그 내에 폴백 메시지가 권장됩니다.

<video width="320"    style="max-width:90%" controls>
  <source src="myvideo.mp4" type="video/mp4">
  <source src="myvideo.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

HTML5 웹 페이지에 포함 된 이미지와 비디오를 반응하는 방법은 어떻게 내장 이미지 및 비디오를 다른 스크린 크기에 적응하고 좋은 사용자 경험을 유지하는지 확인합니다. 가장 효과적인 방법은 CSS를 사용하는 것입니다. HTML에서 고정 된 및

속성을 ​​지정하는 대신 CSS를 사용하여 크기를 제어하십시오. 이미지의 경우 종횡비를 유지하려면 를 100%로 설정하고 <video></video>를 설정하십시오. 비디오의 경우 요소 자체와 유사한 CSS를 적용 할 수 있습니다. 속성을 ​​100%로 설정하고 브라우저가 높이를 자동으로 처리하도록 할 수 있지만이 방법은 브라우저에 따라 종횡비를 왜곡 할 수 있습니다. 종횡비 유지에 일반적으로 및

를 사용하는 것이 일반적으로 선호됩니다. CSS의 를 사용하면 적절한 정렬을 보장하고 예기치 않은 간격 문제를 방지합니다. <video></video> HTML5에서 더 빠른 로딩 시간을 위해 이미지 및 비디오 임베딩을 최적화하기위한 모범 사례는 무엇입니까?

<video width="320" height="240" controls>
  <source src="myvideo.mp4" type="video/mp4">
  <source src="myvideo.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

이미지 및 비디오 최적화는 더 빠른 로딩 시간에 중요합니다. 몇 가지 모범 사례는 다음과 같습니다.

width max-width 이미지 최적화 : height: auto 적절한 이미지 형식 사용 (지원되는 경우 우수한 압축을위한 웹, 사진을위한 JPEG, 투명성이있는 이미지를위한 PNG), TinypNG 또는 ImageOptim과 같은 도구를 사용하여 이미지를 압축하여 파일 크기를 크기로 줄이십시오. 사용자의 장치를 기반으로 다른 이미지 크기를 제공하기 위해 응답 형 이미지 ( 속성)를 사용하는 것을 고려하십시오. display: block; 비디오 최적화 : 올바른 비디오 코덱 (H.264 또는 VP9는 일반적인 선택)을 선택하고 품질과 파일 크기 사이의 최적 균형을 선택하십시오. 비디오 압축 도구를 사용하여 파일 크기를 줄입니다. 다른 대역폭을 수용하기 위해 태그 내 태그를 사용하여 여러 비디오 해상도를 제공하는 것을 고려하십시오.

게으른로드 :

이미지 및 비디오에 게으른로드를 구현하십시오. 이는 이미지와 비디오가 뷰포트에서 볼 때만로드하는 것을 의미합니다. 이는 초기 페이지로드 시간을 크게 줄입니다. 이것은

및 태그 (대부분의 최신 브라우저에서 지원) 또는 JavaScript 라이브러리와 같은 속성으로 달성 될 수 있습니다. 배송.

캐시 링 :
• 웹 서버에서 브라우저가 이미지와 비디오를 캐스팅 할 수 있도록 웹 서버의 적절한 캐싱 헤더를 구성하여 반복적으로 다운로드 할 필요성을 줄입니다. 이러한 관행에 따라 HTML5 웹 페이지의 적재 속도를 크게 향상시킬 수 있습니다.

위 내용은 HTML5에 이미지와 비디오를 포함시키는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!