Онлайн сервис для объединения изображений и последующего вывода CSS кода изображений. Подскажите пар - Флейм

Онлайн сервис для объединения изображений и последующего вывода CSS кода изображений. Подскажите парочку...

Вероятно, Вы имеете ввиду генераторы спрайтов. Если так, то держите:
http://www.spritebox.net/
http://csssprites.com/
http://css-sprit.es/
http://spritegen.website-performance.org/

Читал в буржуйнете блог родоначальника CSS спрайтов. Который впервые предложил использовать эту технологию, применявшуюся уже давно в видеоиграх, в рамках веб - разработки. Так вот он проводил разноплановые тестирования технологии и выявил, что 2 объединенных изображения весят столько же, сколько они весили в паре до их объединения. Да и спрайты создаются не для уменьшения веса картинок, а с целью уменьшения http запросов страницы. Вес графики зависит от знаний и рук ее создателей. От умений оптимизировать ее верстальщиков. Глупость 5летней давности, что 5 мелких картинок грузятся быстрее 1й большой. Помнится когда то тоже этому верил и резал хедеры на портянки. А потом каждую дольку ставил в ячейку таблицы... Жесть.

спрайты можно делать для различных кнопочек, частей интерфейса и т.п. где в качестве фона используется меняющийся бакграунд.
Наверное, замечали на некоторых сайтах, когда наводишь на кнопку с меняющимся бэкграундом, второй фон появляется с задержкой, т.к. подгружается еще одна картинка. А так сразу загружается полностью два бэкграунда, остается поменять лишь позицию.

Да что вы привязались к этому меню на спрайтах? гг Ну понятно, что громче всех именно об этом их применении в тырнете. Но что в этом такого мегасногсшибательного? В настройках для материала включите значки пда, емейла и всяких маркеров для меню. А потом посчитайте запросы. Вот для того, чтобы их сделать меньше, спрайты и придуманы. А то что там в меню ховер не успевает прогрузиться... Прямо как неизлечимый и всемирно вредный вирус! Ну подгрузился он на секунду позже, ну и пофиг по большей части! ))

Это не всегда возможно (например, когда изображение из спрайта должно быть бэкграундом, допустим - иконка рядом с ссылкой). Тут как раз и помогают отступы в самом спрайте.
А вообще, я делаю несколько (2-4) спрайтов, в зависимости от типов бэкграундов (горизонтальные, вертикальные, для тянущихся областей и т.п.). Но если графики не много (как в приведенном выше примере), то можно обойтись одним спрайтом с большими отступами частей друг от дурга

Кто мешает сделать ссылке один класс, картинке другой.

Мне кажется, вы заблуждаетесь. Спрайт в любом случае весит меньше, чем сумма образующих его картинок. И это без учёта запросов.

Так вы объедините и гляньте разницу в весе - никакой
Кстати есть такое дело, что порой приходится делать отступы побольше в виду дополнительного позиционирования картинки в блоке. Но сие решаемо еще и посредством псевдоэлементов и псевдоклассов. Хотя оно и не совсем валидно с точки зрения стандарта CSS 2 . Скорей бы уже 3й принимали что ли. Да ишак от старости каза болду.

Так вы объедините и гляньте разницу в весе - никакой

Большая разница. PNG оптимизировать просто надо. Опыт показывает, что объеденённые, скажем, 30 картинок в одну весят процентов на 20 меньше сумарного веса их по-отдельности. Что и логично, если почитать мануалы про то, что такое png и за счёт чего он жмёт.
А про отступы всё верно говорите. Пример использования отступов: Вы делаете иконки для пунктов меню в виде плоского списка. Логично предположить, что вряд ли высота пункта будет больше трёх строк (для длинных заголовков) и логично, что вряд ли будет превышать максимальной ширины сайта. Вот и разносим, хоть по-вертикали, хоть по-горизонтали на это значение. Другое дело, что всевозможные PNGout и другие утилиты будут жать их по полчаса из-за размеров в 3000x3000 пикселей Но это разовая операция.

Бред если честно. Картинка 9мегапикселей.
Как пример сайт www.bigmir.net. Он не на Joomla, но каскады они и в африке каскады.
Вот их картика. Как видите понатыкано все в плотную. И посмотрите FireBug как все это выводится в CSS.


В итоге файл маленький, мало весит и ничего не налазит. Т.к. у картинки отдельный класс и просто задан размер. Выше этого размера уже ничего не отображается.

Это другой пример. Они для того, чтобы не налазило используют дополнительные элементы для каждой иконки с фиксированными размерами.
Не так. У них, в той же левой колонке, рубрики гарантированно в одну строку. А если туда запилить "Последние новости Мухосранской области"? Тогда у этой рубрики будет три иконки, судя по этому спрайту А были бы отступы, не было бы ограничений таких.

Это нормальный пример. Где нет супер-пупер мегапиксельной графики.

Нормальный пример. Кто ж спорит. Для разных задач разные решения.

А для какой задачи считается нормальной графика размером 9 мегапикселей? Просветите пожалуйста.
Может я что то не так делаю.

И вот этот место можно по подробнее? Ничего не понял если честно.

У них, в той же левой колонке, рубрики гарантированно в одну строку. А если туда запилить "Последние новости Мухосранской области"? Тогда у этой рубрики будет три иконки, судя по этому спрайту А были бы отступы, не было бы ограничений таких.

Я выше просвещал. Когда элементы не фиксированного размера но с условными ограничениями. Чем Вас пугает двухмегапиксельные (не 9-ти, давайте без фанатизма ) спрайты? Задачу решают.

А всё, разобрался. Затупил сперва. Зря зачеркнул. У них для каждой иконки ДОПОЛНИТЕЛЬНЫЙ тэг. Причём не логичный span, а <b>. Вы сами как считаете, нормальное решение с точки зрения семантики? Валидатор вот говорит, что не очень. И я согласен с ним.

Меня все пугает что тормозит сайты.
В Вашем случае картинка задается максимальной ширины и просто режется по условию. И опять таки нет отступов.
Как пример так решен фон меню компонента JomSocial.

Сорри, продублировал случайно

Можно поподробнее про приём "просто режецо" применительно к вышеописанной задаче: "Сделать иконки для списка нефиксированной ширины и нефиксированного колличества строк каждого пункта?". Без дополнительных тегов.

И, кстати, гавно-спрайт. Просто прогнал на автонастройках через одну из прог и получил вот:

Было 47,3 кило. Стало 38,6. Но можно повозицо и сократить ещё процентов на 20 думаю.
А как может тормозить сайт то, что исходный спрайт при размене 5000x5000 пикселей весит всего 100 кило напримен? На загрузку влияет ТОЛЬКО физический размер файла. Да и файрбаг показывает, что они быстро загружаюцо. Так что не стоит насчёт этого переживать. Не один сайт уже сверстал и сдал с такими спрайтами. Жалоб не было. Только похвалы.

Да это не мой спрайт. Ужимали его или нет. Не в этом смысл. А в том что можно решать и меньшим размеров файла.

Оберните иконки в отдельный див и дайте класс этому диву.

Да это не мой спрайт. Ужимали его или нет. Не в этом смысл. А в том что можно решать и меньшим размеров файла.

Оберните иконки в отдельный див и дайте класс этому диву.

Ну вот смотрите. Вы предлагаете для каждой иконки дополнительный тег добавлять. Это увеличит скорость генерации страницы. Факт?
А я предлагаю добавлять пустые места в спрайте. Это ни разу не увеличивает размер конечного файла и, следовательно, никак не влияет на загрузку, но я обхожусь без дополнительных тэгов.
Предлагаю каждому остаться при своём мнении и работать по своим, наработанным, технологиям.

...А в том что можно решать и меньшим размеров файла....

Просто Вы не пробовали описаный мною приём. Ну не увеличивается размер файла от пустых мест. Ну ни разу. И скорость загрузки не увеличиваецо. Проверено. Там почему же не пользовацо этим приемуществом? Были случаи, когда размер превышал и 10 000 пикселей. Просто в фотошопе становицо не очень удобно работать. Зато почти вся графика в одном-единственном спрайте.

Предлагаю каждому остаться при своём мнении и работать по своим, наработанным, технологиям.

Согласен. Потому что у каждого свой метод. И каждый наверное по своему прав.

Кроме фотошопа есть и иные инструменты для оптимизации графики. Если Вы не умеете нормально это сделать, когда у Выс иконки по отдельности (лично у меня при минимальном разрешении 14х14 и весе 1,5кб ужимается свободно до 400бит, а то и меньше). И когда при создании спрайта из 4х подобных выходит вес файла 1,6 кб, то это закономерно. Видимо всему виной мое неумение работать над графикой. Вон у человека наверно и из 4х до 400 бит ужимается

Кроме фотошопа есть и иные инструменты для оптимизации графики. Если Вы не умеете нормально это сделать, когда у Выс иконки по отдельности (лично у меня при минимальном разрешении 14х14 и весе 1,5кб ужимается свободно до 400бит, а то и меньше). И когда при создании спрайта из 4х подобных выходит вес файла 1,6 кб, то это закономерно. Видимо всему виной мое неумение работать над графикой. Вон у человека наверно и из 4х до 400 бит ужимается

Наверное Как можно фотошопом вообще жать, не понимаю Ну там Файрворкс ещё куда не шло. Даю наводку:
1) Джипеги хорошо жать AdvancedJPGcompresser`ом. Может есть и лучше, не заморачивался, 99% графики в вёрстке - png.
2) А уж жать png - отдельная тема. Относительно недавно на Харбре подымалась. Раньше жал PngOut-ом. Но открыл для себя прогу Color Quantizer и ещё 4 алгоритма пнг-компрессии.

вы бы лучше ссылочек накидали на нужные проги желательно бесплатные или темы, чем писаниной заниматься

Riot тоже хорошо оптимизирует.
http://luci.criosweb.ro/riot/

JPEG Риотом или Paint.NET лучше всего. PNG смотрите прикрепленку - лучшего пока не встречал. С GIF'ом стараюсь не связываться - жмет через вычитание цветов, оптимизирует для веб аналогично.

[вложение удалено Администратором]

вы бы лучше ссылочек накидали на нужные проги желательно бесплатные или темы, чем писаниной заниматься

Виноват, исправляюсь
1) http://x128.ho.ua/color-quantizer.html - жать пнг-ки. Даже на автомате прога нереально круто работает. В частности, при возможности, пересохраняет пнг24 в пнг8 с восьмибитным (!) альфа-каналом, что раньше умел только Файрворкс.
2) http://entropymine.com/jason/tweakpng/ - этим удобно анализировать пнг. В частности, пригождается когда вы делаете восьмибитный спрайт и уже неуверены, впишетесь ли в 256 цветов.
3) advanced jpeg compressor - это варез, сорри, гуглим. Овер9000 версий в сети.

Color quantizer что то виснет. Жутко долго оптимизирует. Не показывает размер до и после.
Сделана красиво, но криво как то.

Может отдельную тему создать по прогам. И там начать делиться а так же писать пояснения или мини мануалы.