спрайты по сравнению с разрезанием изображения

Основным преимуществом спрайтов является то, что браузер должен запрашивать меньше изображений с веб-сервера. Это уменьшает количество HTTP-запросов и позволяет более эффективно сжимать части дизайна. Эти две точки также представляют собой недостатки нарезанных изображений.

Здесь вы можете увидеть несколько хороших примеров того, как спрайты улучшают скорость загрузки веб-страниц:

http://css-tricks.com/css-sprites/

Спрайты

Плюсы:

• Меньше HTTP-соединений с сервером
• Более быстрая загрузка по широкополосному каналу

Минусы:

• Нет инкапсуляции: если вы хотите изменить одно изображение , вам нужно изменить спрайт
• Сложно настроить отдельные изображения в CSS без инструмента
• Не ухудшать: Если браузер не поддерживает CSS, у вас проблемы

CSS-спрайты:

Плюсы:

• Изящная деградация в неподдерживаемых браузерах (текст может отображаться, когда фоновые изображения для ссылок не разрешены)
• Меньше HTTP-запросов
• Каждый изображение имеет отдельные накладные расходы, такие как таблица цветов, поэтому нарезка изображения будет иметь больше накладных расходов, чем спрайты CSS

Минусы:

• Создает проблему, если изображения отключены в браузерах (хотя и в редких случаях)

Нарезка изображений:

Плюсы:

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

Минусы:

• Веб-страницы могут иметь большой размер на стороне клиента, даже если это не так на стороне сервера.

Попробуйте использовать генератор спрайтов CSS (мы используем SmartSprites ). Таким образом, вы можете делать срезы локально, а процесс сборки генерирует карту спрайтов. Это лучшее из обоих миров.

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

Минусы - медленнее в старых браузерах / может не работать в них с эффектом наведения (Opera6) - при неправильном использовании может стать очень / слишком большим (сгруппируйте их соответствующим образом!) - утомительная работа по их настройке

Плюсы - передается меньше байтов, потому что одно большое изображение меньше, чем все отдельные изображения вместе взятые (один заголовок / таблица цветов) - меньше HTTP-запросов

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

профи, использующие спрайты: поскольку он использует 1 изображение для всех, он требует меньшей нагрузки на http-сервер.

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

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

Один из недостатков использования CSS-спрайтов, о котором часто забывают, - это объем памяти:

https://web.archive.org/web/20130605000516/http://blog.vlad1.com/2009/06/22/to-sprite -или-not-to-sprite /

Если изображение спрайта не будет тщательно построено, вы получите невероятное количество потраченного впустую пространства. Мой любимый пример от WHIT Веб-сайт телевизора, где это изображение используется как спрайт. Обратите внимание, что это PNG 1299 × 15000. Достаточно хорошо сжимается - собственно размер загрузки составляет около 26 КБ, но браузеры не обрабатывают сжатые файлы данные изображения. Когда этот образ будет загружен и распакован, он будет использовать почти 75 МБ памяти (1299 * 15000 * 4).

Когда спрайты загружаются в браузер, они сохраняются в несжатом виде. Файл размером 26 КБ можно распаковать, чтобы занять целых 75 МБ ОЗУ. Вам следует помнить об использовании спрайтов с очень большими размерами.

Также существует проблема, что происходит в браузерах с плохой поддержкой CSS (устаревшие браузеры). Спрайты могут быть полностью сломаны.

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