Как правильно нарезать макет?

Question

[Дмитрий Гормаш]

Добрый день. Интересует следующий вопрос:
Есть картинка(Рис.1), как лучше, с точки зрения экономии места и оптимизации картинки, использовать ее при верстке? ИМХО, что цельная, что разбитая на части, в итоге дает одинаковый вес страницы. Как лучше поступать в таких случаях:

1. Разбивать картинку на каждый элемент, в данном случае(каждый взрыв фейерверка, градиент, заряды и другие элементы) и складывать в верстке как пазл? Есть ли смысл этим заниматься?

2. Использовать одной картинкой, как показано на рисунке и просто использовать какой-то компрессор для сжатия размера.



p,s, Фон предоставлен в качестве примера.

Answer 1

[romy4]

Да, разбивать по слоям. Большой в jpg (однотонный можно даже сжатие увеличить), фейверки прозрачным png.

Comments

[Дмитрий Гормаш]

Если так разбивать, то вес может и уменьшиться на процентов 20, но время, которое потребуется на реализацию увеличится в несколько раз. Палка двух концов.

[Maksim Zverev]

Дмитрий Гормаш: врмя на реализацию? у вас что картинка не в слоях? Как может сильно увеличиться время, раскидал слои по группам, отключил одну группу, сохранил картинку, включил обратно, отключил другую, сохранил картинку. Из примера выше, вы потеряете минут 5 максимум и то, это если делать все мышкой и отвлекаясь на приготовления чая.

[Дмитрий Гормаш]

Maksim Zverev: При верстке расположение всех элементов займет куда больше 5 минут. Во-первых, картинку обрезаем строго по краям, без лишнего пустого пространства. Во-вторых, при верстке, как вариант, придется делать дополнительную разметку в хтмл под эти все слои. А это уже дополнительные теги и вложенности. И в третьих, эти все слои(части фона, которые отделяем) придется выставлять на их места строго по макету с помощью позиционирования. Мне кажется, такой процесс займет куда больше нескольких минут.

[romy4]

Дмитрий Гормаш: вам ответили как лучше, но ваше право сохранять это в "большой жпег, качество 80". Для сайта аля начало 2000х оставить всё в жпег, конечно.

[Maksim Zverev]

Дмитрий Гормаш: ок ок 20 минут в случае с этой картинкой. еще при нарезке вы получите нужные отступы для css.

[Дмитрий Гормаш]

romy4: Да причем здесь джипег? Вопрос не в том, что лучше джпег или пнг, а в том, как поступать с бэкграундами, если он имеет несколько элементов, которые никак не задействуются, а просто существуют, как дополнительные элементы заднего плана. Резать или оставлять цельным. Все.

[Дмитрий Гормаш]

Maksim Zverev: Благодарю за ответ.

Answer 2

[Maksim Zverev]

Блин, в первую очередь надо отталкиваться от задачи, кол-ва другой графики на странице и сроков проекта.

Излишняя переоптимизация вредит срока а выигрывает доли процента.
Бытовой вариант:
Если требуется прозрачность снизу сверху - png цельным куском и прогнать через https://tinypng.com/ уменьшится процентов на 70.
Если не требуется прозрачность - jpg цельным куском - прогнать через https://tinypng.com/

Если требуется как то работать с внутренними картинками (что бы они двигались, по ним можно было кликнуть и тд), то фон исходя из задачи выше, отдельные элементы в png и все прогнать через https://tinypng.com/ для сжатия.

https://tinypng.com/ - как пример, его можно использовать прямо в браузере или подключить в gulp или использовать другие минификаторы изображений.

Answer 3

[maxfox]

Ну, если хотите "резиновую" страницу, то надо нарезать. Если это не нужно - то резать не надо.
Нарезанная будет подгружаться и отрисовываться медленнее, если вас это интересует.
PS Та картинка, которую вы показали - она, как бы помягче сказать... В общем, над ней стоит поработать. Серьезно поработать. Нарезать и верстать что-либо с таким материалом - пустая трата времени. Хотя, конечно, это не мое дело.

Comments

[Дмитрий Гормаш]

Та дело не в том, какую я картинку выложил, вопрос в том, стоит ли нарезать многослойные картинки и потом с помощью верстки их складывать воедино или сразу сохранять в одной картинке все слои.

[maxfox]

В некоторых случаях - стоит, в некоторых нет. Зависит от самой картинки и поставленной задачи. Конкретно этот "коллаж" лучше просто уничтожить. А с другим изображением ситуация может быть иной. Я думаю, несложно догадаться, что небольшое изображение на однотонном фоне или на повторяющейся текстуре нет смысла загружать целиком в разрешении 3000*3000. Если можно загрузить небольшой тайл - то лучше разделить изображение на слои. И уж тем более, если это один цвет или градиент. Если же это полноценное изображение - то вы не получите никакого выигрыша от его нарезки на слои, только лишний раз нагрузите браузер и канал. В общем, все это на уровне зравого смысла и так понятно.