Bây giờ là năm 2019 và đã đến lúc chúng ta quyết định sử dụng ảnh GIF ( - ở đây chúng ta đang nói về cách phát âm trong tiếng Anh, đối với chúng tôi điều này không liên quan - khoảng. dịch). Ảnh GIF chiếm một lượng lớn dung lượng (thường là vài megabyte!), điều này hoàn toàn trái ngược với mong muốn của bạn nếu bạn là nhà phát triển web! Là một nhà phát triển web, bạn muốn giảm thiểu những thứ người dùng cần tải xuống để trang web tải nhanh. Vì lý do tương tự, bạn giảm thiểu JavaScript, tối ưu hóa PNG, JPEG và đôi khi chuyển đổi . Nhưng phải làm gì với GIF cũ?
Chúng tôi sẽ không cần ảnh GIF ở nơi chúng tôi sắp đến!
Nếu mục tiêu của bạn là cải thiện tốc độ tải trang thì bạn cần loại bỏ ảnh GIF! Nhưng làm thế nào để bạn tạo ra những bức ảnh hoạt hình? Câu trả lời là video. Và trong hầu hết các trường hợp, bạn sẽ có được chất lượng tốt hơn và tiết kiệm không gian từ 50-90%! Trong cuộc sống, hầu hết mọi thứ đều có ưu và nhược điểm. Khi bạn thay thế GIF bằng video, thông thường bạn sẽ không thể tìm thấy bất kỳ nhược điểm nào.
Xuống với tất cả các GIF!
May mắn thay, việc thay thế GIF bằng video đã trở nên phổ biến trong những năm gần đây, vì vậy tất cả các công cụ cần thiết đều đã được sử dụng. Trong bài đăng này, tôi sẽ không phát minh lại bánh xe mà chỉ cải thiện một chút các giải pháp hiện có. Vì vậy, đây là ý chính:
- Chụp ảnh GIF và chuyển nó thành video
- Mã hóa video bằng H.264 hoặc VP9, tức là nén nó và đóng gói vào thùng chứa MP4 hoặc WebM
- Thay thế
<img>với GIF động được bật<video>với con lăn - Bật tính năng tự động phát không có âm thanh và vòng lặp để tạo hiệu ứng GIF
Đó là năm 2019
Bây giờ là năm 2019. Sự tiến bộ đang tiến về phía trước và chúng ta phải theo kịp nó. Cho đến nay chúng tôi đã có hai tùy chọn codec được hỗ trợ rộng rãi trên tất cả các trình duyệt và công cụ mã hóa video:
- H.264 - được giới thiệu vào năm 2003 và được sử dụng rộng rãi nhất hiện nay
- VP9 - xuất hiện vào năm 2013 và đạt được mức cải thiện về khả năng nén gần 50% so với H.264, mặc dù không phải mọi thứ đều màu hồng như vậy
Lưu ý: Mặc dù H.265 là phiên bản tiếp theo của H.264 và có khả năng cạnh tranh với VP9 nhưng tôi không coi đó là do trình duyệt hỗ trợ kém, như trên trang . Chi phí cấp phép là lý do chính khiến H.265 không trở nên phổ biến như H.264 và tại sao tập đoàn Alliance of Open Media đang làm việc với codec miễn phí bản quyền AV1.
Hãy nhớ rằng mục tiêu của chúng tôi là thu nhỏ các ảnh GIF lớn xuống kích thước nhỏ nhất có thể để tăng tốc thời gian tải. Sẽ là một năm 2019 kỳ lạ nếu chúng ta không có tiêu chuẩn mới về nén video trong kho vũ khí của mình. Nhưng nó tồn tại và được gọi là AV1. Với AV1 bạn có thể . Lepota! 🙂
AV1 sẵn sàng phục vụ bạn kể từ năm 2019!
Trên máy tính để bàn
Gần đây, hỗ trợ giải mã video AV1 đã được thêm vào phiên bản máy tính để bàn и . Hiện tại, hỗ trợ của Firefox đang có lỗi và có thể gây ra sự cố, nhưng mọi thứ sẽ được cải thiện khi bổ sung đã có trong Firefox 67 ( - khoảng. dịch.). Để biết chi tiết về phiên bản mới, hãy đọc -
Trên điện thoại thông minh
Hiện tại không có hỗ trợ phần cứng cho điện thoại thông minh do thiếu bộ giải mã thích hợp. Bạn có thể thực hiện giải mã phần mềm, mặc dù điều này sẽ dẫn đến mức tiêu thụ pin tăng lên. SOC di động đầu tiên hỗ trợ giải mã phần cứng AV1 sẽ xuất hiện vào năm 2020.
Và sau đó những người đọc bài báo sẽ nói, "vậy nếu điện thoại di động chưa hỗ trợ đúng cách thì tại sao lại sử dụng AV1?"
AV1 là một codec khá mới và chúng tôi đang ở giai đoạn đầu quá trình thích ứng với nó. Hãy coi bài viết này như giai đoạn “khi bạn nấu ăn, đám đông sẽ làm theo”. Bản thân việc hỗ trợ máy tính để bàn sẽ tăng tốc trang web cho một số đối tượng. Và các codec cũ có thể được sử dụng làm kịch bản dự phòng khi AV1 không được hỗ trợ trên thiết bị đích. Nhưng khi người dùng chuyển sang các thiết bị có hỗ trợ AV1, mọi thứ sẽ sẵn sàng. Để đạt được điều này, chúng ta cần tạo một thẻ video như hiển thị bên dưới, điều này sẽ cho phép trình duyệt chọn định dạng ưa thích của nó – AV1 - >> VP9 - >> H.264. Chà, nếu người dùng có một thiết bị hoặc bộ điều hướng quá cũ không hỗ trợ video (điều này cực kỳ khó xảy ra với H264), sau đó anh ấy sẽ chỉ nhìn thấy ảnh GIF
<video style="display:block; margin: 0 auto;" autoplay loop muted playsinline poster="RollingCredits.jpg">
<source src="media/RollingCredits.av1.mp4" type="video/mp4">
<source src="media/RollingCredits.vp9.webm" type="video/webm">
<source src="media/RollingCredits.x264.mp4" type="video/mp4">
<img src="media/RollingCredits.gif">
</video>Tạo AV1
Tạo video trong AV1 thật dễ dàng. và sử dụng các lệnh dưới đây. Chúng tôi sử dụng 2 lượt để đạt được tốc độ bit mục tiêu. Để làm điều này, chúng tôi sẽ chạy ffmpeg hai lần. Lần đầu tiên chúng tôi ghi kết quả vào một tệp không tồn tại. Điều này sẽ tạo một nhật ký cần thiết cho lần chạy ffmpeg thứ hai.
# Linux or Mac
## Проход 1
ffmpeg -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 /dev/null &&
## Проход 2
ffmpeg -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4
# Windows
## Проход 1
ffmpeg.exe -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 NUL && ^
## Проход 2
ffmpeg.exe -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4Dưới đây là bảng phân tích các tham số:
-i - Входной файл.
-pix_fmt - Используем формат 4:2:0 для выбора информации о цветности в видео. Существует много других возможных форматов, но 4:2:0 наиболее совместимый.
-c:v - Какой кодек использовать, в нашем случае - AV1.<br />
-b:v – Средний битрейт, которого мы хотим добиться.
-filter:v scale - Фильтр масштаба ffmpeg используется для уменьшения разрешения видео. Мы устанавливаем X:-1 что говорит ffmpeg уменьшить ширину до X, сохранив соотношение сторон.
-strict experimental - Надо указать, т.к. AV1 достаточно новый кодек.
-cpu-used - Ужасно названный параметр, который на самом деле используется для выбора уровня качества видео. Возможные значения 0-4. Чем меньше значение, тем лучше качество и, соответственно, больше время, которое займёт кодировка.
-tile-columns - Для использования нескольких тредов. Говорит AV1 разбить видео на отдельные колонки, которые могут быть перекодированы независимо для лучшей утилизации ЦПУ.
-row-mt – Тоже, что и предыдущий параметр, но разбивает так же на строки внутри колонок.
-threads - Количество тредов.
-pass - Какой проход сейчас выполняется.
-f - Используется только при первом проходе. Указывает формат выходного файла, т.е. MP4 в нашем случае.
-movflags faststart - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
Tạo ảnh GIF
Để tạo GIF tôi đã sử dụng lệnh dưới đây. Để giảm kích thước, tôi đã chia tỷ lệ GIF thành chiều rộng 720px và 12 khung hình/giây thay vì video 24 khung hình/giây ban đầu.
./ffmpeg -i /mnt/c/Users/kasing/Desktop/ToS.mov -ss 00:08:08 -t 12
-filter_complex "[0:v] fps=12,scale=720:-1" -y scene2.gifKết quả kiểm tra
Xem một lần còn hơn đọc trăm lần phải không? Hãy đảm bảo AV1 là lựa chọn phù hợp cho mục đích của chúng ta. Tôi đã lấy video Tears Of Steel miễn phí có sẵn tại đây và chuyển đổi nó bằng cách sử dụng tốc độ bit gần giống nhau cho các codec AV1, VP9, H.264. Kết quả bên dưới để bạn có thể tự so sánh.
Lưu ý 1: Nếu tệp bên dưới không tải được, có lẽ đã đến lúc bạn nên cập nhật trình duyệt của mình. Tôi muốn giới thiệu trình duyệt dựa trên Chrome như Chrome, Vivaldi, Brave hoặc Opera. Đây là thông tin mới nhất về hỗ trợ AV1
Lưu ý 2: Đối với Firefox 66 trên Linux, bạn sẽ cần đặt cờ media.av1.enabled thành ý nghĩa true в about:config
Lưu ý 3: Tôi đã quyết định không đưa các ảnh GIF thông thường vào bên dưới do kích thước lớn và lượng dữ liệu cần thiết để tải trang này! (Thật là mỉa mai, vì trang này nói về việc giảm lượng dữ liệu trên một trang :)). Nhưng bạn có thể xem ảnh GIF cuối cùng ở đây
Ghi chú của người dịch: Habr không cho phép bạn bật tính năng tự động phát và lặp lại tệp nên bạn chỉ có thể đánh giá chất lượng. Bạn có thể xem trực tiếp những “hình ảnh hoạt hình” sẽ trông như thế nào .
Cảnh 1 @ 200 Kbps
Ở đây có rất nhiều chuyển động, đặc biệt nhạy cảm ở tốc độ bit thấp. Bạn có thể thấy ngay H.264 tệ đến mức nào ở tốc độ bit này, các hình vuông hiển thị ngay lập tức. VP9 cải thiện tình hình một chút, nhưng các ô vuông vẫn hiển thị. AV1 thắng rõ ràng, tạo ra hình ảnh rõ ràng là tốt hơn.
H.264
VP9
AV1
Cảnh 2 @ 200 Kbps
Có rất nhiều nội dung CGI mờ ở đây. Kết quả không khác như lần trước nhưng nhìn chung AV1 trông đẹp hơn.
H.264
VP9
AV1
Cảnh 3 @ 100 Kbps
Trong cảnh này, chúng tôi giảm tốc độ bit xuống 100 Kbps và kết quả vẫn nhất quán. AV1 duy trì vị trí dẫn đầu ngay cả ở tốc độ bit thấp!
H.264
VP9
AV1
Anh đào trên bánh
Để kết thúc bài viết này bằng cách cảm nhận lượng băng thông tiết kiệm được so với GIF - tổng kích thước của tất cả các video cao hơn... 1.62MB!! Phải. Một số 1,708,032 byte chết tiệt! Để so sánh, đây là kích thước video GIF và AV1 cho từng cảnh
GIF
AV1
Cảnh 1
11.7 MB
0.33 MB
Cảnh 2
7.27 MB
0.18 MB
Cảnh 3
5.62 MB
0.088 MB
Đơn giản là tuyệt đẹp! Không phải nó?
Lưu ý: Kích thước tệp của VP9 và H264 không được cung cấp vì thực tế chúng không khác AV1 do sử dụng cùng tốc độ bit. Sẽ là thừa nếu thêm hai cột nữa có cùng kích thước, chỉ để nhấn mạnh rằng các codec này tạo ra chất lượng tốt hơn nhiều so với GIF ở kích thước tệp nhỏ hơn nhiều.
Nguồn: www.habr.com