Реактивные веб-сайты Николай Мациевский Евгений ...

134РЕАКТИВНЫЕ ВЕБ-САЙТЫ3. Производятся абсолютно аналогичные действия с repeat-y.4. Далее изображения из группы 7 объединяются по вертикали (0100% означает, что фон должен быть прижат к правому краю элемента,соответственно, весь спрайт будет «прижат» к правомусвоему краю).5. Аналогично с группой 8 — прижимаем все к низу. Естественно,что для всех групп мы учитываем первоначальное значениеbackground-position.6. Рассчитываем позиционирование для изображений группы 1(для этого подойдет и просто перебор отсортированных по площадиили сумме квадратов измерений изображений: готовим матрицу,в которую пытаемся «вписать» очередное изображение;если не получается, то матрицу увеличиваем). При вписыванииради экономии процессорного времени можно проверять только9 точек (8 по краям изображения и 1 в центре), чтобы убедиться,что на месте изображения еще ничего нет.7. Строим «лесенку» из изображений второй группы. Лесенкулучше строить с низа уже созданного спрайта из предыдущегопункта: тогда легко найти минимальный размер «дырки» междудвумя группами изображений, чтобы сдвинуть «лесенку»вверх (и потом, возможно, влево). Конечно, поиск наиболееоптимального расположения — непростая задача. Но ее можнорешить и в достаточно грубом приближении, которое описановыше.8. Итоговое изображение из пункта 4 прикрепляется к правомуверхнему углу нашего сложного изображения (результат действияпунктов 6 и 7). Так как у каждого такого изображения заданадопустимая высота и все они находятся вне «рабочей» зоныостальных no-repeat изображений, никаких рудиментов не возникнет.9. Аналогичным образом поступаем с изображением из пункта 5 —его располагаем в нижнем левом углу нашего спрайта.10. На выходе мы получаем 3 спрайта со всеми возможными случаями.В среднем размеры таких спрайтов будут лишь незначительнопревосходить (если вообще будут) аналогичные «ручные»аналоги (в том числе за счет использования PNG). Естественно,можно в автоматическом режиме пропустить их черезpngcrush или jpegtran. Стоит также предусмотреть, в каком видебудут создаваться полноцветные изображения: JPEG или PNG(последние больше по размеру, но гарантируют отсутствие потерькачества).