Возник немного странный вопрос. Допустим, на сайт нужны 4 иконки со стрелками в разных направлениях. Можно конечно отдельно каждую стрелку подшить в спрайт, а можно ведь и через css: rotate просто крутить одну и ту же. Какой вариант лучше, быстрее?
И чтоб два раза не вставать. Часто у иконок есть какой-то аналог среди спецсимволов. Например иконку с треугольником аля кнопка play можно получить если вставить греческую букву дельта ( Δ ) и тоже повернуть средствами css. Или иконку 'гамбургер', ну которая три горизонтальных линии, можно имитировать с помощью греческой буквы кси( Ξ ). По идее шрифты рендерятся быстрее чем грузится картинка. В общем тот же вопрос.
Стрелочки, небольшие иконки и прочую хрень давно уже делаю на Base64.
А что касается вопроса - перевернуть или отдельную - то лучше перевернуть.
Но учтите, что css rotate не работает в IE старых. Если не страдаете некрофилией, то крутите.
Одна картинка в Base64 и rotate самый быстрый способ.
Опять же, я говорю о простых картинках, а не про фигурную стрелку с вензелями.
Liquidos: только что навскидку в голову пришло:
1. Больше контроля над материалом, рисуй что хочешь и как надо, а не как получится.
2. Трансформации через CSS могут портить сглаживание, мылить и так далее.
3. Буквы те похожи на соответствующие пиктограммы лишь очень отдалённо.
4. Буквы могут быть только одноцветными.
Если надо только стрелки и 4 штуки, то переворачивать - вариант. Если иконок много - то подключите fontawesome.io/icons и не пытайтесь экономить байты, в то время, когда точно можно сэкономить МБ (уверен что есть где, всегда есть).
Простой
Средний
