5

Возьмём самый распространенный вариант - смайлики. Их очень много (~1500) и отображаются все одновременно, как лучше их выводить?

  1. На сервер храниться одна большая картинка (спрайт) где все смайлики расположены друг за другом, у клиента в css расписаны расположение каждого смайлика (background-image и background-position) и в html документе с помощью class распознаются смайлики.
  2. На сервер хранится каждая картинка смайлика отдельно, у клиента в css расписаны путь до каждого смайлика (background-image) и в html документе с помощью class распознаются смайлики.
  3. На сервер хранятся изображения отдельно, у клиента только в html документе написаны путь до смайликов (img[src]).

И какие картинки лучше использовать svg или png?

Возможно вы предложите ещё более правильный вариант, пожалуйста расскажите максимально подробно, почему именно так?


Второй вопрос заключается в генерации этого списка смайликов, как лучше его генерировать?

  1. Сгенерировать заранее и хранить на сервере в виде шаблона/html документа и подгружать его через ajax и вставлять в html страницу, когда это нужно.
  2. Хранить html код в JS коде, в виде строки и вставлять когда это нужно.
  3. Генерировать html код из заранее составленного массива хранящийся в js коде.
  4. Генерировать код из массива хранящейся на сервер и полученного через ajax.

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

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

3
  • Заинлайнить svg в css?
    – Qwertiy
    Commented 4 мая 2016 в 17:47
  • @Qwertiy вы имеете ввиду что-то типа этого? background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 1850 1635" xmlns:xlink="http://www.w3.org/1999/xlink">...</svg>'); Или как?
    – Mr_Epic
    Commented 4 мая 2016 в 17:49
  • Да. Но я вариант предложил скорее как голосование.
    – Qwertiy
    Commented 4 мая 2016 в 17:59

1 ответ 1

6

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


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

Use the grunt-spritesmith, Luke!

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

8
  • Инлайнить можно при компиляции автоматически. При svg увеличения размера нет. Да, вынести все смайлы в отдельный css и его кэшировать.
    – Qwertiy
    Commented 4 мая 2016 в 18:00
  • То есть сразу в html документе должны быть прописаны элементы с нужными классами и всё? И ещё такой вопрос, почему тогда в VK сделаны именно отдельные картинки ,а не спрайт?
    – Mr_Epic
    Commented 4 мая 2016 в 18:01
  • @Qwertiy, я же сказал что выбрать что лучше - нужно смотреть частную ситуацию, так сказать нельзя, преимущества есть у обоих форматов.
    – user207618
    Commented 4 мая 2016 в 18:04
  • @Mr_Epic, они же там в gif, что позволяет сделать анимацию. Анимированный спрайт - это жесть.
    – Qwertiy
    Commented 4 мая 2016 в 18:06
  • @Qwertiy там нету анимированных смайлов, gif формат видемо выбран не для анимации, его часто применяют не только для анимации, не так ли?
    – Mr_Epic
    Commented 4 мая 2016 в 18:08

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.