AVIF в «Эгее»!

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

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

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

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

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

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

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

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

Поэтому мысль такая — переводим графику в AVIF, кодируем в base64 («data» так умеет, а иначе бинарные данные не вставить), из-за кодирования они увеличатся на 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-й и ниже Айос ничего не видно.