CSS значок изображения или значок изображения?

Question

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

что за / против для этого.какие-либо предложения?или мне просто оставить 1 изображение на 1 иконку?

Answer 1

Это распространенная (и хорошая) техника, называемая CSS Sprite. Вот хорошая, хотя и немного устаревшая, статья, объясняющая их: http://www.alistapart.com/articles/sprites

Answer 2

Если бы вы использовали CSS Sprites, тогда ваши иконки будут загружаться намного быстрее, так как все они с одного изображения.Как только один значок может быть отображен, вы знаете, что все изображение загружено.Если изображение оптимизировано для Интернета, это даст вам довольно хорошее время загрузки.

Например, если вы создали изображение с 10 значками, вы можете просто использовать репозицию для отображения по одному значку за раз.

Это может быть сделано в CSS с использованием таких методов, как:

.teststyle {

background-image: url(icons.png);

background-position: top; left;

}

или

.teststyle {

background-image: url(icons.png);

background-position: 10px; 50px;

}

Надеюсь, что поможет:)

Answer 3

Объедините их в одно изображение, чтобы уменьшить количество запросов к серверу.

Для более современной статьи, описывающей процесс: http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

Answer 4

Взгляните на CSS Sprites:

http://www.alistapart.com/articles/sprites