Пишу, по большей части, про историю, свою жизнь и немного про программирование.

AVIF в «Эгее»!

Как говорится, если нельзя, но очень хочется, то можно. «Эгея», как я писал не понимает формат AVIF, но мне его удалось всё-таки в неё вставить, причём даже малой кровью.

Изображение ниже я взял из своей заметки про Красную площадь в коронавирусный период. В оригинале оно весит 1,1 мегабайт в формате JPEG, в этой заметке используется сконвертированное изображение размером в 179 килобайт. Почувствуйте разницу.

Добавлено позднее: в небе, кстати, я отчётливо вижу артефакты сжатия, надо играть с параметром качества, прежде чем использовать. Но в остальном картинка как будто бы не попортилась.

Конечно, если ваш браузер не поддерживает AVIF, это будет не та разница, на которую я надеялся. Напишите мне, кстати, если картинка у вас не отображается — я хотел бы узнать что у вас за браузер и насколько он современный.

Моя фотография храма Василия Блаженного (1555—1561 гг.) из заметки «Красная площадь без людей»

Итак, «Эгея» не поддерживает AVIF, но я её в «Эгею» вставил. Как же мне это удалось?

Дело в том, что «Эгея» поддерживает формат SVG, а SVG поддерживает внутри себя растровую графику, в том числе вставленную через протокол «data». Протокол «data» — это картинка, закодированная в текстовую строку, вида data:mime/type;encoding,encoded_data.

Вообще, SVG поддерживает и внешние ресурсы (то есть в теории способен подгрузить картинку снаружи), но при вставке через тег img (как в «Эгее») в нём это запрещено по соображениям безопасности.

Поэтому мысль такая — переводим графику в AVIF, кодируем в base64data» так умеет, а иначе бинарные данные не вставить), из-за кодирования они увеличатся на 33%, но даже при этом овчинка выделки стоит, а потом получившееся запихиваем в SVG.

Для конвертации я написал вот такой небольшой bash-скрипт (для работы требуется пакет ImageMagick):

#!/bin/bash

if [ -z "$1" ]; then
    echo "Usage: $0 <picturename>"
    exit 1
fi

NAME="$1"
NEWNAME="${NAME%.*}.svg"
WH=( $(identify -ping -format '%w %h' "$NAME") )

if [[ "$NAME" == *@2x* ]]; then
    WH=( $(( ${WH[0]} / 2 )) $(( ${WH[1]} / 2 )) )
fi

cat<<XML > "$NEWNAME"
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 ${WH[*]}" width="${WH[0]}" height="${WH[1]}">
<image width="${WH[0]}" height="${WH[1]}"
href="data:image/avif;base64,$(convert "$NAME" "avif:-" | base64)"/>
</svg>
XML

echo "$NAME" to "$NEWNAME" was converted.

Последовательность теперь у меня такая — готовлю графику в более привычном формате, запускаю скрипт, получаю файл SVG, вставляю его драг-н-дропом в редактор «Эгеи». Не знаю насколько у меня такой способ приживётся, буду пока считать эту запись тестовой.

Дополнение: уже сообщают, что в 15-й и ниже Айос ничего не видно.

6 комментариев
jime 2023

Safari Version 16.3
macOS Version 12.6.3

У меня огромный размытый знак вопроса вместо фото)

Евгений Степанищев 2023

Сафари мне портит всю малину ))

У меня, к слову, в Сафари 16.2 (МакОС 13.1) всё видно.

Denai 2023

https://caniuse.com/avif
Очень плохая идея, исходя из покрытия

Евгений Степанищев 2023

В предыдущей заметке я как раз рассматривал покрытие — почти 80% кажется мне хорошей цифрой. Вообще хорошо бы научить Эгею выбирать картинку в зависимости от браузера, но пока эта задача не даётся мне без модификации её исходников.

Денис Дыранов 2023

Edge 109.0.1518.70  — не видно.

Евгений Степанищев 2023

Вот про него, кстати, я что-то вообще забыл. Для него нужен полифил, а с картинкой в SVG он работать не будет 🤔

Евгений Суреев 2023

Ну вообще да, многие не обновляют системные приложение, в том числе и по причине того, что техника у них устаревшая, и новые ОС не поддерживает.
Мне вот пришлось ноутбук в этом году сменить на новый, так как на старый Ventura не устанавливалась в принципе. Соответственно, и Сафари там старый.

Евгений Степанищев 2023

Надо искать какой-то ещё вариант (мысли у меня есть), использовать этот формат очень уж заманчиво.

jime 2023

А в чём идея использовать этот формат?
Занимать меньше места на диске или уменьшить трафик?

Если только второе, то в html есть несколько вариантов, как указать альтернативные сорцы

Тег <picture> с вложенными <source>
Или атрибут srcset в теге <img>

Тогда придётся загружать 2 изображения или делать автоматическую конвертацию в JPEG при залитии AVIF

Евгений Степанищев 2023

Уменьшить трафик.

В HTML способов много, я даже использовал их у себя в блоге, но штука в том, что «Эгея» использует специальную разметку, о чём я уже писал, которую она понимает. Разметка позволяет ей оформлять картинки и выдавать их в поисковой выдаче. А с HTML этот фокус не прокатывает.

Тогда придётся загружать 2 изображения или делать автоматическую конвертацию в JPEG при залитии AVIF

Я и так каждую картинку готовлю — те же жпеги у меня оптимизируются иногда минут по десять, так что будет просто чуть больше возни.

Иван Золотов 2023

Safari 15.2. Огромный размытый знак вопроса.

Евгений Степанищев 2023

Да, у «Сафари» с этим что-то совсем плохо. «Эдж», например, не поддерживает AVIF, но позволяет обработать эту ситуацию, а «Сафари» вообще ничего не даёт сделать.