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
    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
    4 мая 2016 в 17:49
  • Да. Но я вариант предложил скорее как голосование.
    – Qwertiy
    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
    4 мая 2016 в 18:00
  • То есть сразу в html документе должны быть прописаны элементы с нужными классами и всё? И ещё такой вопрос, почему тогда в VK сделаны именно отдельные картинки ,а не спрайт?
    – Mr_Epic
    4 мая 2016 в 18:01
  • @Qwertiy, я же сказал что выбрать что лучше - нужно смотреть частную ситуацию, так сказать нельзя, преимущества есть у обоих форматов.
    – user207618
    4 мая 2016 в 18:04
  • @Mr_Epic, они же там в gif, что позволяет сделать анимацию. Анимированный спрайт - это жесть.
    – Qwertiy
    4 мая 2016 в 18:06
  • @Qwertiy там нету анимированных смайлов, gif формат видемо выбран не для анимации, его часто применяют не только для анимации, не так ли?
    – Mr_Epic
    4 мая 2016 в 18:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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