Рекомендации по использованию CSS-спрайта

Ответ 1

Должен ли я группировать и помещать изображения с примерно одинаковым размером в один png?

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

Каков приемлемый размер изображения спрайтов? Рекомендуется ли создавать разные спрайты вместо одного огромного файла?!

Представьте себе сайт с коллекцией значков, кнопок и других графических элементов huuuuge. Теперь образ вы помещаете все эти элементы в один спрайт, потому что, вы знаете, небольшое количество запросов и все. Спрайт имеет размер 5 МБ.

Посетитель входит на страницу и начинается загрузка. Появится текст, но вы все еще ожидаете загрузки Megasprite. В зависимости от размера файла и подключения к Интернету посетитель должен ждать потенциально долгое время, прежде чем могут использоваться важные (навигационные) элементы сайта.

Для простого сайта будет выполняться один спрайт, но когда ситуация станет более сложной, полезно использовать пару спрайтов. Кроме того, размещение всех ваших изображений в одном спрайте - это боль в gluteus maximus, когда дело доходит до обслуживания (хотя автоматизация очень помогает). В общем, огромные спрайты - плохие спрайты.

Не имеет значения, как размещать и выравнивать изображения в изображении спрайта?

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

Еще одна вещь

Рассматривали ли вы использование спрайтов SVG? Маленький размер файла, идеально гладкий и четкий при каждом разрешении. CSS Tricks имеет отличные статьи на нем здесь и здесь

Ответ 2

К вопросу 1:

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

Это упростит поиск и сохранение бит в процессе разработки.

С другой стороны, если вы делаете игру, и у вас есть все ваши изображения, созданные уже (например, 64 изображения анимированного персонажа), вы также можете вставить их в один файл.

Надеюсь, что это поможет.

Майкл

Ответ 3

Что такое CSS-спрайты?

CSS Sprites - это метод объединения нескольких изображений, используемых на вашем веб-сайте, в одно большое изображение. Затем вы можете использовать правильный CSS-атрибут background-position для загрузки определенного изображения из CSS Sprite с использованием координат X и Y. CSS-спрайты и производительность веб-сайта

Многие люди полагают, что быстрее будет уменьшать размеры файлов изображений и загружать каждое изображение отдельно. На самом деле это неправда, это совсем наоборот. Причина этого заключается в том, что каждый раз, когда вы делаете HTTP-запрос (будь то в своем HTML-коде или код CSS), вы по существу создаете еще одно соединение, которое должно произойти, чтобы полностью загрузить данную страницу. Так, например, если у вас есть страница с 16 фоновыми изображениями (как указано в файле CSS вашего веб-сайта), это означает, что для загрузки этой страницы она должна сделать 16 индивидуальных HTTP-запросов для каждого из этих изображений. Это не говоря уже о каких-либо дополнительных HTTP-запросах, которые должны быть сделаны для таблиц стилей, JavaScripts и т.д.

Объединив все 16 этих фоновых изображений в один большой CSS-спрайт, веб-сайт должен сделать только одно HTTP-соединение вместо 16 отдельных подключений. Это также означает, что в любое время, когда изображение должно загружаться "на лету" (например, изображение опрокидывания), изображение уже будет загружено без какой-либо задержки благодаря тому, что оно уже было загружено как часть вашего отдельного файла CSS Sprite.

Таким образом, вы не только значительно увеличиваете производительность за счет сокращения количества подключений, но также можете воспользоваться преимуществами CSS-спрайтов, используя предварительную загрузку изображений CSS. Как создать CSS-спрайт

Когда дело доходит до создания CSS Sprites, у вас есть два варианта. Если вы достаточно профессиональны с программой редактирования фотографий, такой как Adobe Fireworks или Adobe Photoshop, то у вас не возникнет проблем с созданием CSS Sprite. Для людей, которые не склонны к подобным программам, мы рекомендуем использовать SpriteMe. SpriteMe - это букмарклет. После того, как вы добавили его в панель закладок, вы просто заходите на любой сайт и щелкаете букмарклет SpriteMe. Затем SpriteMe откроет надпись поверх правой части экрана со всем необходимым. Вы также обнаружите, что на сайте SpriteMe есть демонстрация, которая будет очень помогать всем, кто не знаком с ней.

Вот пример того, как будет выглядеть CSS Sprite (это было создано в Adobe Fireworks):

Пример CSS Sprite

Вышеприведенный пример использования CSS Sprite. Имейте в виду, что существует много разных способов сделать это. Некоторым людям нравится оставлять 1 пиксель пространства между каждым изображением, чтобы обеспечить некоторое пространство. Другие люди любят оставлять значительное пространство между изображениями. Вы также найдете некоторых людей, которые любят складывать вещи рядом друг с другом в строках, чтобы максимально использовать пространство. Суть в том, что на самом деле это неправильный способ сделать это. Таким образом, с учетом сказанного рассмотрим приведенный выше пример именно в этом примере.

Внедрение CSS-кода

Теперь, когда вы закончили делать свой CSS Sprite своим временем, чтобы перейти к nitty gritty и поместить CSS-код на место, чтобы мы могли фактически использовать наш CSS Sprite. Для нашего примера хорошо используйте CSS Sprite выше и покажем вам, как мы работали с кнопкой "Отправить комментарий" в нашей форме комментариев в нижней части этой публикации.

 #commentform input[type=submit] {
width: 122px;
height: 26px;
border: 0px;
background-color: #FFFFFF;
background-color: #FFFFFF;
background: url(/images/btn-sprite.png) no-repeat 0px 201px;
 }

 #commentform input[type=submit]:hover {
cursor: pointer;
background-position: 0px 175px;
  }

В основном трюк в использовании CSS-спрайтов в вашем коде заключается в том, что вы ссылаетесь на оси X и Y из CSS Sprite. В этом случае код CSS использует фоновый атрибут, ссылается на URL-адрес изображения и, наконец, обращается к оси X и Y, которая для них равна 0px.

Навигационная версия кнопки не должна ссылаться на URL-адрес фонового изображения, так как уже упоминалось выше. Вместо этого вам просто нужно изменить ось Y на 175px, чтобы отразить тот факт, что состояние зависания кнопки находится над состоянием кнопки, не зависящим от кнопки.

Я понимаю, что это изначально может показаться запутанным, но я обещаю вам, когда вы поиграете с ним, вы увидите, что он на самом деле очень прост. Если все изображения CSS Sprite выровнены слева, ваша ось Y всегда останется равной 0 пикселям. Это одна из причин, по которой мы предпочитаем складывать наши изображения, все выровненные слева, так как для этого требуется много угадывания. Учитывая, что ваша ось Y всегда будет одинаковой в этом случае, единственное, что изменится, это ваша ось X. Таким образом, если кнопка не наведения находится в 0 пикселях по оси Y и 201 пиксель по оси X, то кнопка наведения над ней будет равна 0 пикселям по оси Y и 175 пикселей по оси X.