Примечание: ниже находится перевод заметки от Steve Souders "SpriteMe (part 2)", в которой он рассказывает о своем новом инструменте SpriteMe. Мои комментарии далее курсивом.
Ранее на этой неделе я уже публиковал анонс SpriteMe (никакие технические моменты в анонсе не раскрывались). Это вторая заметка из серии, посвященной этому инструменту, в ней я хочу рассказать о мотивах, подтолкнувших меня к его созданию, и логики, заложенной в его работу.
У меня была замечательная идея для доклада на WordCamp в прошлом мае мне предстояло публично оптимизировать тему для WordPress. В ночь перед этим (чтобы не тормозить публично) я решил основательно подготовиться. Всего за 30 минут мне удалось сделать большинство действий по оптимизации производительности (кэширование и сжатие на уровне Apache, перемещение скриптов вниз, запуск из командной строки YUI Compressor и т.д.).
Последним шагом было создание CSS Sprites из различных фоновых картинок темы. ниже описан процесс, через который я прошел:
background-url на новый и задав соответствующий background-position, который выдал генератор спрайтов.background-position.Несколько часов спустя мне удалось объединить большое количество исходных картинок в спрайт и внести необходимые изменения в CSS, чтобы сохранить первоначальный дизайн страницы нетронутым. Но это заняло так мноооого времени. Именно поэтому я и решил создать SpriteMe.
Здесь Steve описывает свой подход для создания спрайтов. Его будет интересно сравнить с подходом, освещенным в этой статье.
Наиболее сложной частью создания SpriteMe было обнаружение фоновых картинок, которые могут быть объединены в спрайты и задание правил их объединения. Почти все, что я знаю о CSS Sprites, я узнал в последние несколько месяцев, поэтому для меня очень важно задокументировать эту логику и подтолкнуть гуру CSS-кода для ее анализа и высказывания своего мнения на ее счет. Ниже изложена высокоуровневая логика, которую сейчас использует spriteme.js для создания спрайтов:
repeat-x И repeat-y. Картинки, которые повторяются по всем направлениям, не могут быть объединены в спрайт, потому что рядом лежащие в этом спрайте картинки будут видны. На самом деле часть таких повторяющихся картинок можно объединять, если четко заданы размеры области. в которой происходит повторение, и эта область не является большой: тогда можно в итоговом спрайте просто «залить» эту область повторяющейся картинкой. Критерий «большой» области легко можно установить из соотношения 1 сэкономленный запрос (в мс) = увеличенный размер картинки (время загрузки на скорости в 100Кб/с). Грубый расчет дает, что мы можем пойти на увеличение размера в 5-10 Кб для включения такой картинки, при использовании сжатия, заложенного в PNG-формат, это дает весьма значительные размеры ограничительной области, от 1000x1000.repeat-x, у которых одинаковая ширина. Основная особенность таких картинок заключается в том, что у них не должно быть никаких отступов слева или справа: все, что находится сбоку, будет повторяться каждый период картинки. Поэтому картинки с repeat-x могут быть склеены только вертикально (с одинаковой шириной). SpriteMe сейчас оперирует только картинками repeat-x одинаковой ширины. Я предполагаю расширить это поведение на различные ширины, если наименьшее общее кратное всех ширин не превосходит 20 пикселей. Например, картинки шириной в 2, 3 и 9 пикселей могут быть объединены в одну с шириной в 18 пикселей. Это реализуется повторение первой картинки 9 раз, второй 3 раза и последней 2 раза. (Картинки repeat-x с шириной, большей 20 пикселей, могут быть объединены только если имеют одинаковую ширину.) Тут стоит отметить, что 20 пикселей будет довольно жестким ограничением. Учитывая особенности сжатия PNG-изображений можно закладываться на значительно большую ширину, например, в Auto Sprites это значение вообще не ограничено.repeat-y склеиваются аналогично repeat-x, только с одинаковой высотой и горизонтально. (Алгоритм полностью описан в предыдущем пункте.)Вышеописанная логика покрывает практически все случаи, когда изображения вообще могут быть объединены (на самом деле, не все, и количество случаев довольно велико: их можно уменьшить), но мы уже думаем над тем, чтобы покрыть больше возможных случаев применения спрайтов или убрать одно из комбинированных изображений, объединив его с другими:
repeat-x в один спрайт, а неповторяющиеся — в другой (вертикальный метод), и эти группы изображений никогда не пересекаются. Но изображения repeat-x могут быть добавлены к своим товарищам без повторения, если у них одна и та же ширина (в самое начало или самый конец результирующего файла). А также repeat-x могут быть откопированы, чтобы подойти по ширине, как уже описано выше. Это все приведет к уменьшению числа запросов ровно на 1. Абсолютно аналогично можно поступить с repeat-y случаями и горизонтальным методом.Наконец SpriteMe не обрабатывает следующие картинки: