Как получить avif-заглушку с минимальным весом?

Question

[Hecktosaurus]

Есть один js-детект поддержки avif в браузере, пытаюсь ускорить его. Вкратце, создаётся base64-картинка и проверяется, удалось ли ей загрузиться.

Сама картинка, 311 байт

data:image/avif;base64,AAAAFGZ0eXBhdmlmAAAAAG1pZjEAAACgbWV0YQAAAAAAAAAOcGl0bQAAAAAAAQAAAB5pbG9jAAAAAEQAAAEAAQAAAAEAAAC8AAAAGwAAACNpaW5mAAAAAAABAAAAFWluZmUCAAAAAAEAAGF2MDEAAAAARWlwcnAAAAAoaXBjbwAAABRpc3BlAAAAAAAAAAQAAAAEAAAADGF2MUOBAAAAAAAAFWlwbWEAAAAAAAAAAQABAgECAAAAI21kYXQSAAoIP8R8hAQ0BUAyDWeeUy0JG+QAACANEkA=

Можно ли еще сильнее сжать тестовое изображение?

Comments

[d'Ivan]

А можно ли поинтересоваться: зачем нужна эта битва за байты?

[Hecktosaurus]

Роман Мирр, встраиваю скрипт инлайново в head, хотелось бы сократить время блокировки

[d'Ivan]

Hecktosaurus, а в CSS или JS нельзя ли встроить, чтобы не блокировало?

[Hecktosaurus]

Роман Мирр, в css?

[d'Ivan]

Hecktosaurus,
да. Вот так: https://css-tricks.com/data-uris/

[Hecktosaurus]

Роман Мирр, спасибо, но суть в другом. Вот пример кода для webp

[d'Ivan]

Hecktosaurus, ну вот, я о том же. JS же не блокирует. В том же примере заменить на нужный data URI.

[Hecktosaurus]

Роман Мирр, всю жизнь считал, что пока не выполнится инлайновый < script>, браузер не будет отображать стоящие после него элементы и в целом рендерить страницу

[d'Ivan]

Hecktosaurus,
Зависит от использования.
https://www.sitepoint.com/non-blocking-async-defer/

[Hecktosaurus]

Роман Мирр, ну окей, это если тег имеет вид < script src="..." async/defer>. У меня же тело скрипта встроено инлайново. Перемещать скрипт вниз, к < /body> тоже не хотелось бы - он должен выполниться первым, т.к. он добавляет класс к < html>, от которого зависит, какую из указанных в *.css версию изображения грузить.

[d'Ivan]

Hecktosaurus,

ну окей, это если тег имеет вид < script src="..." async/defer>. У меня же тело скрипта встроено инлайново.

Я, конечно, не специалист по JS, но что мешает подключать в head с аттрибутом sync в HTML head?

[Hecktosaurus]

Роман Мирр, async и defer игнорируются для скриптов без src (т.е. инлайновых).
В любом случае, даже если бы и применялось, на время работы скрипта это бы никак не влияло; к тому же, откладывание скрипта также отложит отрисовку графики, что снизит баллы в pagespeed за счёт LCP.
Я бы не заморачивался и рулил версиями изображений через nginx/apache, но не на всех хостингах есть доступ к редактированию конфига nginx, а до apache дело не доходит из-за отдачи статики первым.