AVIF в «Эгее»!
Как говорится, если нельзя, но очень хочется, то можно. «Эгея», как я писал не понимает формат AVIF, но мне его удалось всё-таки в неё вставить, причём даже малой кровью.
Изображение ниже я взял из своей заметки про Красную площадь в коронавирусный период. В оригинале оно весит 1,1 мегабайт в формате JPEG, в этой заметке используется сконвертированное изображение размером в 179 килобайт. Почувствуйте разницу.
Добавлено позднее: в небе, кстати, я отчётливо вижу артефакты сжатия, надо играть с параметром качества, прежде чем использовать. Но в остальном картинка как будто бы не попортилась.
Конечно, если ваш браузер не поддерживает AVIF, это будет не та разница, на которую я надеялся. Напишите мне, кстати, если картинка у вас не отображается — я хотел бы узнать что у вас за браузер и насколько он современный.
Итак, «Эгея» не поддерживает 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-й и ниже Айос ничего не видно.
Safari Version 16.3
macOS Version 12.6.3
У меня огромный размытый знак вопроса вместо фото)
Сафари мне портит всю малину ))
У меня, к слову, в Сафари 16.2 (МакОС 13.1) всё видно.
https://caniuse.com/avif
Очень плохая идея, исходя из покрытия
В предыдущей заметке я как раз рассматривал покрытие — почти 80% кажется мне хорошей цифрой. Вообще хорошо бы научить Эгею выбирать картинку в зависимости от браузера, но пока эта задача не даётся мне без модификации её исходников.
Edge 109.0.1518.70 — не видно.
Вот про него, кстати, я что-то вообще забыл. Для него нужен полифил, а с картинкой в SVG он работать не будет 🤔
Ну вообще да, многие не обновляют системные приложение, в том числе и по причине того, что техника у них устаревшая, и новые ОС не поддерживает.
Мне вот пришлось ноутбук в этом году сменить на новый, так как на старый Ventura не устанавливалась в принципе. Соответственно, и Сафари там старый.
Надо искать какой-то ещё вариант (мысли у меня есть), использовать этот формат очень уж заманчиво.
А в чём идея использовать этот формат?
Занимать меньше места на диске или уменьшить трафик?
Если только второе, то в html есть несколько вариантов, как указать альтернативные сорцы
Тег <picture> с вложенными <source>
Или атрибут srcset в теге <img>
Тогда придётся загружать 2 изображения или делать автоматическую конвертацию в JPEG при залитии AVIF
Уменьшить трафик.
В HTML способов много, я даже использовал их у себя в блоге, но штука в том, что «Эгея» использует специальную разметку, о чём я уже писал, которую она понимает. Разметка позволяет ей оформлять картинки и выдавать их в поисковой выдаче. А с HTML этот фокус не прокатывает.
Я и так каждую картинку готовлю — те же жпеги у меня оптимизируются иногда минут по десять, так что будет просто чуть больше возни.
Safari 15.2. Огромный размытый знак вопроса.
Да, у «Сафари» с этим что-то совсем плохо. «Эдж», например, не поддерживает AVIF, но позволяет обработать эту ситуацию, а «Сафари» вообще ничего не даёт сделать.