호환성 체크
2018-01-01, Mon
여러 기기에서의 호환성을 보기 위한 문서
최종 수정: 2022.12.02
이미지
caniuse.com heif
아이클라우드로 다운받은 원본 HEIC(exif를 지움)
ios16 사진 앱>내보내기>메일>원본 을 고르는 과정에서 자동으로 변환된 jpg(exif 지움)
이 다음 변환을 해야 하는데, 그냥 하면 사진이 옆으로 돌아간다. exif 지웠는데도 마찬가지…
그림판(paint)으로 jpg파일을 열었다가 바로 저장한 다음 변환하면 이러한 일이 발생하지 않음.
caniuse.com webp
jpg파일을 libwebp 1.2.4로 변환해서 만든 webp
caniuse.com avif
jpg파일을 cavif-rs 1.3.5으로 변환해서 만든 AVIF
비디오
아이클라우드에서 다운받은 원본 HEVC/mov
ios16 사진 앱>내보내기>메일>원본 을 고르는 과정에서 자동으로 변환된 H264/mov
아래부터는 HEVC파일을 ffmpeg 5.1.2를 이용해 변환했다.
https://trac.ffmpeg.org/wiki/Encode/VP8 보고 인코딩한 VP8/webm
ffmpeg -i HEVC.mov -c:v libvpx -crf 10 -b:v 10M vp8.webm
https://trac.ffmpeg.org/wiki/Encode/VP9 보고 인코딩한 VP9/webm
ffmpeg -i HEVC.mov -c:v libvpx-vp9 -crf 30 -b:v 0 vp9.webm
https://trac.ffmpeg.org/wiki/Encode/AV1 보고 인코딩한 AV1/mp4
ffmpeg -i HEVC.mov -c:v libaom-av1 -crf 30 av1.mp4
유투브 embed
유투브 임베딩 원본
유투브 임베딩 원본에서 width를 100%로 설정
유투브 임베딩 원본에서 max-width를 100%로 추가
markdown 개행 문법
문장 하나 쓰고 두 칸을 띄우고 엔터치고
다음 문장을 쓴 다음 줄 바꿈만 하고(엔터)
그 다음 문장을 쓰면
이렇게 보인다. _config.yml에서 kramdown의 hard_wrap을 true로 설정해주면 스페이스 두 칸 없이도 개행이 가능하다.
이미지의 경우 기존의 jpg에서 webp를 거치지 않고 바로 avif로 넘어가도 별 지장은 없어 보인다.
비디오는 HEVC를 써도 어지간하면 괜찮아 보인다.
유투브 임베드는 width만 만지는 것이 맞아 보인다. max-width를 설정해줘도 모바일에선 옆으로 튀어나가는데 역시 이게 CSS의 묘미인가?