Тут на днях понадобилось мне заменить ссылки на фоновые изображения в CSS на соответствующие встроенные base64 закодированные изображения. Да, на дворе шёл 2017-й, можно было без испуга использовать прекрасный векторный SVG, а его до безобразия небольшие размеры (особенно после прогона через SVGO) просто напрашивались на base64. Да, наверное существует множество различных онлайн-инструментов для таких штук, но это для меня выглядело как-то неспортивно.

Итак, не буду долго томить, рецепт довольно прост (ну, если учесть, что у вас уже есть под руками NPM).

Сначала ставим себе в глобальные зависимости пакет mime:

npm i -g mime

Затем для ваших любимых шеллов добавляем себе функции.

fish

Просто вставляем это в файл ~/.config/fish/functions/base64urldata.fish:

function base64urldata
  set filename $argv[1]
  echo "data:"(mime $filename)";base64,"(cat $filename | openssl enc -base64 | tr -d '\n')
end

zsh/bash

В конец ~/.zshrc или в конец ~/.bashrc, соответственно:

base64urldata() {
    FILENAME=$1
    echo "data:$(mime $FILENAME);base64,$(cat $FILENAME | openssl enc -base64 | tr -d '\n')"
}

Пользоваться всем этим добром везде одинаково просто:

base64urldata ~/path/to/file.svg

Собственно, на этом всё, гладкой вам вёрстки!

Ссылки

  1. Если ещё не приходилось, обязательно уделите время знакомству с SVGO