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

#javascript #html #css #изображения #оптимизация_сайтов

Возьмём самый распространенный вариант - смайлики. Их очень много (~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.


Так же прошу рассказывать максимально подробно.  

Под правильным вариантом подразумевается не только правильно по написанию кода, но
и по быстроте загрузки смайликов и нагрузки на обе стороны (сервер и клиент).
    

Ответы

Ответ 1

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



Генерировать как картинку, которую прописать background-image, браузер сам подтянет,
JS вообще не нужен.  

Use the grunt-spritesmith, Luke!


P. S. Инлайнить в css - это зарядить револьвер и поднести к ноге: поддержка сложнее,
код распухает, кэшировать картинки нельзя (можно файлы стилей, конечно, но их может
автоматически генерировать сервер, выгоды мало).
Однажды я попробовал и отказался.