Спрайты — когда использовать, а когда нет

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

Я видел на одном спортивном сайте, как спрайты использовались для иконки флажков. Т.к. на странице их было много, то грузилась картинка с ~20 флагами, и рядом с каждым спортсменом отображался нужный кусок. Плюс всякие иконки можно так рисовать, вроде иконки юзера рядом с ником автора новости, иконки календаря рядом с датой публикации новости и т.д. - сейчас это модно.

Вижу применение спрайтов в таком виде.

А что значит «огроменное»?

Пока не тормозит спрайты вообще не нужны.

http://stackoverflow.com/questions/1182501/when-not-to-use-css-sprites

Many developers like to use CSS sprites because it saves on request time — the browser makes one request, downloads the image, and all the various sprites are now automatically cached and blazing fast.

So how can it hurt?

Because download size != memory size.

That PNG or GIF that's only 10kb might actually be much, much greater in size once the browser loads it in memory. The issue is that while something like GIF will compress solid areas of color, the browser expands it out to a bitmap, where all images of equal dimensions use equal memory.

And it loads a new bitmap every time you use that image somewhere.

больше 100кб П.С. парсер блин сожрал знак >

Пока не тормозит спрайты вообще не нужны.

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

парсер блин сожрал знак >

>УМВР
Если спереди воткнуть пробел.

когда использовать, а когда нет

http://spriteme.org/

Для мелочи, например иконок, нужны.

Если их надо самому делать - не нужны. Если уже готовые, как font-awesome, то ок.

Если их надо самому делать

http://instantsprite.com/

Если уж оптимизировать то результат можно ещё через https://tinypng.com/ прогнать.

для иконок можно использовать и шрифт с иконками.

Лишние сложности.

для иконок можно использовать и шрифт с иконками.

Иконки иконкам рознь, разноцветные шрифтом не сделаешь. Зависит от задачи.

Лишние сложности.

Не вижу сложностей.

да, цветные пока нельзя.

А потом придёт HTTP/2 и всё.

А потом придёт HTTP/2 и всё.

В HTTP/2 запретили спрайты?

спасибо, буду знать