.gif가없는 gif : 지금 가장 성능이 좋은 이미지 및 비디오 옵션

GIF 시대에 작별 인사! 효율적인 웹 애니메이션을위한 모범 사례

여전히 오래된 GIF 애니메이션을 사용하고 있습니까? 사실, 요즘에는 더 효율적이고 더 나은 성능 대안이 있습니다! 이 기사는 브라우저 호환성 및 사용자 경험을 고려하여보다 현대적인 기술로 원활한 루핑 비디오 애니메이션을 달성하는 방법을 심층적으로 탐구합니다. html

요소 를 사용합니다 html의

요소를 사용하여 GIF 애니메이션 효과를 쉽게 재현하십시오. <video></video> 이 코드는 자동 재생, 루프 재생, 음소거 및 인라인 재생을 구현합니다 (전체 화면 재생을 피하십시오). 그러나 비디오 형식의 호환성 문제는 무시할 수 없습니다.

비디오 파일은 컨테이너와 비디오 코덱으로 구성되어 있으며 오디오 포함 및 오디오 코덱도 포함되어 있음). 일반적인 비디오 컨테이너 형식은 MP4와 웹입니다. 브라우저는 비디오를 재생하기 위해 컨테이너와 코덱을 모두 지원해야합니다.

브라우저는 다양한 복잡하고 다양한 방식으로 비디오 형식을 지원하는데, 이것이 YouTube 내장 비디오가 인기있는 이유 중 하나입니다. 어떤 비디오 형식을 고려할 가치가 있는지 봅시다 : <video></video> 컨테이너 형식 :

MP4 : 2001 년에 출시 된 이래 거의 모든 브라우저에서 지원되었습니다.

<video autoplay="" loop="" muted="" playsinline="" src="cats.mp4"></video>

Webm : iOS 사파리를 제외하고 2010 년에 출시되었으며 다른 브라우저는이를 지원합니다.

코드 코드 :

H.264 : 모든 브라우저가 지원합니다.

> HEVC/H.265 : Safari, Edge 및 Chrome (버전 105 이상)에 의해 지원되는 H.264의 후계자.

<:> vp9 : Webm을 지원하는 모든 브라우저에서 지원하는 VP8의 후속 업체.

AV1 : Chrome은 2018 년부터 지원되었으며 Firefox는 2019 년부터 지원되었으며 Edge 및 Safari는 아직 지원되지 않았습니다. H.264 인코딩이있는 MP4 파일은 가장 적합한 호환성이 있지만 품질 및 파일 크기가 가장 좋지 않습니다. AV1의 호환성은 아직 완벽하지는 않지만 최신 코덱이므로 효율성과 품질은 Netflix, YouTube 및 Vimeo와 같은 플랫폼이 이미 일부 비디오에 사용되었습니다.

기존 브라우저와 새 브라우저를 고려하려면 여러 요소를 사용하고 이상적인 소스 파일의 지정을 우선 순위를 정한 다음 대안을 차례로 추가 할 수 있습니다.

코덱이 다른 여러 MP4 파일을 사용해야하는 경우 복잡한
• 매개 변수를 사용해야합니다.
대부분의 비디오 편집 소프트웨어는 AV1 또는 Webm 형식의 직접 내보내기를 지원하지 않으며 ffmpeg : 와 같은 도구를 사용하여 변환해야합니다.
• gif를 mp4로 변환합니다 :
비디오를 배경으로 사용하고 다른 요소를 중첩시킬 CSS 포지셔닝이 필요합니다.

요소의 한 가지 단점은 화면이 동면을 방지한다는 것입니다. 사진의 장점 : Webp and avif

애니메이션 웹 또는 AVIF 이미지 형식 사용은 다음과 같은 장점이 있습니다.

다른 애니메이션 이미지는 다양한 화면 크기 또는 테마 모드 (예 : Dark Mode)에 사용될 수 있습니다.
• 게으른 하중에 대한 기본 지원 :
배경 이미지로 사용하기 쉽다 :
• <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="GIFs Without the .gif: The Most Performant Image and Video Options Right Now "> 는
• background-image: url("coolbackground.webp");
를 사용할 수 있습니다

(형식은 원래 양식과 동일하게 생략 됨)

애니메이션 avif AVIF 형식 (2019 년에 출시)은 현재 최고의 이미지 형식 중 하나이며 GIF를 AVIF로 변환하면 바이트 수를 90%이상 줄일 수 있습니다. AVIF는 AV1 비디오 코덱을 기반으로하며 정적 및 애니메이션 이미지를 지원합니다. <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="GIFs Without the .gif: The Most Performant Image and Video Options Right Now "> (형식은 원래 양식과 동일하게 생략 됨) 사용

이것은 Safari의 비디오 배경 또는 테두리 이미지와 같은 효과를 달성 할 수 있습니다 : . Safari는이 기능에 성능 장점이 있다고 주장하지만 Chrome은이 기능을 지원하지 않을 것이라고 분명히했습니다.

사용자 기본 설정을 존중 비디오 요소는 사용자의 자동 재생 설정을 자동으로 존중하고 "애니메이션 감소"설정을 자동으로 존중합니다. 진보적 인 향상 를 점검하십시오 AVIF 및 WEBP 형식에 대한 지원은 Chrome DevTools의 "렌더링"탭을 사용하여 코드 호환성을 테스트 할 수 있습니다.

로티 애니메이션 라이브러리 lottie는 애프터 효과에서 애니메이션 데이터 (JSON 파일)를 내보내고 웹 페이지로 렌더링하는 오픈 소스 애니메이션 라이브러리입니다. 여러 플랫폼을 지원하고 재생, 일시 정지, 리버스 재생 등과 같은 유연한 제어 옵션을 제공합니다.

<video autoplay="" loop="" muted="" playsinline="" src="cats.mp4"></video>

Lottie의 성능은 라이브러리 크기와 JSON 파일 크기와 생성 된 DOM 요소 수에 따라 다릅니다.

결론 : 절대적인 최상의 솔루션은 없으며 특정 요구 사항과 프로젝트 조건에 따라 선택 사항을 평가해야합니다.

위 내용은 .gif가없는 gif : 지금 가장 성능이 좋은 이미지 및 비디오 옵션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!