Каждая картинка отдельно или спрайт?

Возьмём самый распространенный вариант - смайлики. Их очень много (~1500) и отображаются все одновременно, как лучше их выводить?
На сервер храниться одна большая картинка (спрайт) где все смайлики расположены друг за другом, у клиента в css расписаны расположение каждого смайлика (background-image и background-position) и в html документе с помощью class распознаются смайлики. На сервер хранится каждая картинка смайлика отдельно, у клиента в css расписаны путь до каждого смайлика (background-image) и в html документе с помощью class распознаются смайлики. На сервер хранятся изображения отдельно, у клиента только в html документе написаны путь до смайликов (img[src]).
И какие картинки лучше использовать svg или png?
Возможно вы предложите ещё более правильный вариант, пожалуйста расскажите максимально подробно, почему именно так?

Второй вопрос заключается в генерации этого списка смайликов, как лучше его генерировать?
Сгенерировать заранее и хранить на сервере в виде шаблона/html документа и подгружать его через ajax и вставлять в html страницу, когда это нужно. Хранить html код в JS коде, в виде строки и вставлять когда это нужно. Генерировать html код из заранее составленного массива хранящийся в js коде. Генерировать код из массива хранящейся на сервер и полученного через ajax.
Так же прошу рассказывать максимально подробно.
Под правильным вариантом подразумевается не только правильно по написанию кода, но и по быстроте загрузки смайликов и нагрузки на обе стороны (сервер и клиент).

Ответ

Куда проще пожертвовать загрузкой одним спрайтом на N Mb, чем открывать 1500 соединений. Спрайт после первой загрузки в кэш и тяжёлое неудобство исчезнет. В HTTP2 попроще в этом вопросе, но настроить сервер грамотно нужно для выигрыша скорости. Выходит для спрайта лучше юзать одну картинку с background-position и классами. Какой формат лучше - вопрос достаточно сложный, сильно зависящий от конкретной ситуации и предпочтений, для спрайтов лично я обычно использую png - разумный баланс качества/размера.

Генерировать как картинку, которую прописать background-image, браузер сам подтянет, JS вообще не нужен.
Use the grunt-spritesmith, Luke!
P. S. Инлайнить в css - это зарядить револьвер и поднести к ноге: поддержка сложнее, код распухает, кэшировать картинки нельзя (можно файлы стилей, конечно, но их может автоматически генерировать сервер, выгоды мало). Однажды я попробовал и отказался.