Спрайте несколько файлов gif с информацией css

Question

Итак, у меня есть сайт с большим количеством файлов gif (для конкретных смайликов). Чтобы оптимизировать загрузку, я решил уменьшить объем запроса до одного, загрузив все gif как один файл.

Лучший вариант, который я нашел, - создать один файл спрайтов. Там также есть программа ImageMagic, которая очень помогает в этом и имеет удивительный wiki. После того, как мастерить вокруг нескольких часов, вот что я нашел:

1. мне нужно держать анимацию, а не просто иметь статическое изображение как результат спрайта, поэтому каждый GIF будет храниться в виде нескольких изображений, а затем анимированные с play и keyframes в here
2. Я могу с легкостью создать файл спрайтов, используя montage *.gif sprites.png
3. Мне также нужна информация о начальных и конечных координатах изображений. Поскольку мои файлы gif имеют разную высоту и ширину, я буду страдать до тех пор, пока не закончу ввод измерений вручную. Лучший вариант, который я нашел, - создать html-файл с помощью ImageMagick с теми же параметрами, что и png. Файл html содержит область с координатами начала и конца каждого файла gif, которую я могу использовать для создания css. Пример: <area href="./base/0000.gif" shape="rect" coords="0,0,89,39" alt="" />
4. ImageMagick montage «ы tile x1 параметров создает огромное широкое изображение (например, 200 гифы с 20 партиалов каждого х 40px каждая = ~ 160000px х 40px), что делает браузер к сбою. Поэтому мне нужно сделать несколько строк и столбцов, что усложняет мой расчет css.
5. Даже зная начало и конечную позицию, мне все равно нужно выполнить ручной расчет. Из координат я могу считать steps css для animation (X2-X1/[gif.width], если координаты Y находятся в одной строке), но я до сих пор не знаю его скорости. Кроме того, если частичные изображения на изображении спрайтов расположены в разных строках, это осложняет создание анимации keyframes play, которую мне все еще нужно создать вручную (или путем написания сценариев для огромного количества файлов gif). Например: + + + montage ./*.gif -geometry +0+0 -alpha On -background "rgba(0, 0, 0, 0.0)" -quality 100 out.png = . Как видите, первый смайлик помещается на 4 строки. Мне нужен какой-то сложный параметр ImageMagick tile, чтобы иметь разные gif для каждой строки.
6. Мои Gifs являются optimized, чтобы использовать режим «комбинировать». Это означает, что их частичные размеры могут быть разных размеров и не содержать частей полного изображения. Например: дизассемблируется как .
7. Чтобы решить шаг 5, я могу преобразовать gifs в слои со слоями с помощью инструмента преобразования ImageStick. Вот еще одна проблема: convert -layers dispose input.gif output.gif создает некоторые ошибки. Например результирующий файл не хватает некоторых кадров: Строка ниже является версия спрайтов в результате

Обобщить мои вопросы:

• Есть ли более простой способ для создания спрайтов файл несколько gifs? Решение всех этих проблем вызывает у меня головную боль. Должен быть волшебный инструмент, который заботится обо всем этом сразу. Например, spritegen.website-performance, но он создает только статические изображения и анимации.
• Как удалить слои из gif без ошибок, описанных в шаге 7 (See also)?
• Как сгенерировать один файл спрайтов с помощью ImageMagick или любых других инструментов и иметь только 1 gif на строку (или на столбец), как описано в шаге 5.
• Есть ли способ объединить несколько gif в одном gif, который также анимирует, а затем позиционирует изображение на своем фоне, как спрайты?

Любые виды помощи приветствуются. Даже ссылка на статью или сайт, который позволяет создать один файл спрайтов + css с анимацией, будет отличным. Спасибо за помощь в продвижении!

С наилучшими пожеланиями,

Answer 1

Благодарности к ImageMagick forum я, наконец, нашел ответ.

+ + +

convert -background none \ 
    \(smilie_yellow.gif -coalesce +append \) \ 
    \(smilie_green.gif -coalesce +append \) \ 
    \(smilie_red.gif -coalesce +append \) \ 
    -append -flatten 3_smilies.png 

=