Итак, я смотрел HTML-код в facebook с firebug, и я оценил этот образ и пришел к выводу, что facebook использует это большое изображение (с хитрым кодом позиционирования изображения), а не многие маленькие для своих графических элементов. Является ли это более эффективным, чем хранение многих небольших изображений?
Может кто-нибудь дать какие-либо подсказки относительно того, почему facebook это сделает.
Они называются CSS-спрайтами, и да, они более эффективны - пользователю нужно только загрузить один файл, что уменьшает количество HTTP-запросов для загрузки страницы. Подробнее см. эту страницу.
Теория, лежащая в основе этого, объясняется здесь: http://css-tricks.com/css-sprites/, также смотрите здесь, поскольку он подчеркивает, почему вам действительно нужно одно большое изображение. Я также говорю, что вся статья интересна:)
Проблема с точки зрения производительности - это то, что она всегда кажется "почему" (производительность), часто без "How", и никогда "Why Not".
CSS-спрайты оказывают положительное влияние на производительность, по причинам, которые другие плакаты здесь подробно рассмотрели. Однако у них есть недостаток: ремонтопригодность; удаление, изменение и, в частности, изменение размеров изображений становится более сложным - в основном из-за изменений, которые необходимо внести в таблицу стилей, пронизанную фоном, вместе с каждым изменением размера спрайта или формы карты.
Я думаю, что это мнение меньшинства, но я твердо убежден, что проблемы обслуживания должны перевешивать проблемы с производительностью в подавляющем большинстве случаев. Если производительность необходима, тогда продолжайте, но знайте о стоимости.
Тем не менее, влияние производительности огромно - особенно когда вы используете опрокидывания и хотите избежать эффекта, который вы получаете, когда вы наводите указатель на изображение, тогда браузер уходит, чтобы запросить опрокидывание. Уместно реорганизовать ваши изображения на карту спрайтов после того, как ваши требования уладились - особенно если ваш сайт будет находиться под большим трафиком (и, конечно же, большие примеры, которые люди вытаскивали - facebook, amazon, yahoo - все это соответствует профилю).
Есть несколько случаев, когда вы можете использовать их в основном без затрат. Каждый раз, когда вы нарезаете изображение, использование одного изображения и тегов фоновой позиции, вероятно, дешевле. Каждый раз, когда у вас есть стандартный набор значков, особенно если они имеют одинаковый размер и вряд ли изменится. Плюс, конечно, в любое время, когда производительность действительно имеет значение, и у вас есть бюджет для покрытия расходов на обслуживание.
Если это вообще возможно, используйте инструмент и документируйте его использование, чтобы тот, кто должен поддерживать ваши спрайты, знает об этом. http://csssprites.org/ - это единственный инструмент, который я изучил, но http://spriteme.org/ выглядит потрясающе.
Техника дублируется "css спрайты".
См:
Так как другие пользователи уже ответили на это, здесь, как это сделать, и здесь есть другой способ.
Открытие соединений более дорогостоящее, чем просто продолжение передачи. Точно так же браузеру нужно кэшировать только один файл, а не сотни.
еще один ресурс: http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
Одним из основных преимуществ спрайтов CSS является то, что он добавляет фактически 0 служебных данных сервера и все рассчитаны на стороне клиента. Огромный прирост для производительности на стороне сервера не достиг.
Простой ответ, вам нужно только "извлечь" один файл изображения, и он "вырезается" для разных представлений, если вы использовали несколько изображений, которые были бы несколькими файлами, которые вам нужно скачать, что просто приравнивалось бы к дополнительному времени загрузите все.
Резка большого изображения в "спрайты" делает один HTTP-запрос и не обеспечивает никакого мерцания, а также для элементов "onmouseover" (если вы повторно используете одно и то же большое изображение для эффекта над мышью).
Google также делает это - я написал здесь сообщение в блоге: http://www.stevefenton.co.uk/Content/Blog/Date/200905/Blog/Google-Uses-Image-Sprites/
Но суть в том, что вы делаете один HTTP-запрос для одного большого изображения, а не 20 небольших HTTP-запросов.
Если вы смотрите HTTP-запрос, они тратят больше времени на загрузку, чем на самом деле, так что гораздо быстрее сделать это за один удар - коротко, не болтливо!
Css Sprites tecnique - это метод уменьшения количества запросов изображения с использованием фонового положения. Рекомендации по ускорению веб-сайта