움짤 대신 비디오 넣기

비디오(349.61kb)

//원본이 수정된 관계로 아래 움짤과 밝기가 조금 달라졌고, 용량도 차이가 있으나 원본은 349.61kb

GIF (4.68mb)

gif는 프레임이 조금 잘리고 크기도 줄었지만, 당연하게 비디오 용량이 압도적으로 작다.

티스토리에 글을 쓸 때 움직이는 이미지(animated gif. APNG)를 삽입하고 싶을 때가 오기 마련이다.

그럴 때, 카카오 TV 등에 업로드한 후에, 동영상의 링크

(원문을 예로 들자면 https://tistory4.daumcdn.net/tistory/2837190/skin/images/20chaeng_Speed.mp4)

를 알아내야 한다.

'공유하기'등을 누르면 나오는 페이지의 링크가 아닌 동영상의 링크가 필요하다.

그 링크만 알아낸다면 아래 코드에 집어넣으면 끝난다.

<video autoplay muted loop playsinline src="링크" type="video/mp4">
</video>

<video autoplay muted loop playsinline>
    <source type="video/mp4" src="링크">
    <source type="video/webm" src="링크">
</video>

이런 방식으로 글을 쓴 경우, 단점은 '미리 보기'다.

간단하게 2초 정도 움짤을 만든 후에 대표이미지로 지정만 해놓고 본문에선 삭제하면 해결된다.

https://ezgif.com/에서 gif를 제작한 후에 최대로 압축한 후에 가져오도록 하자.

본문 미리보기 이미지도 로딩을 고려하여 크기와 퀄리티를 낮춘 파일을 사용했다.