Уменьшить размер картинки?

Question

[Darkness]

Не знаю, что делать с этой картинкой.. как вообще сделать её фоном ? если она 3к на 3к

Я просто обернул две секции дивом и пытаюсь этому диву дать background url D:
Рад помощи и спасибо!

Comments

[RAX7]

SVG попробуй, это же не фото, а картинка нарисованная в векторе.

[ProjectSoft]

Зачем вообще её делать фоном? ведь там html разметка явно должна быть.

[Darkness]

ProjectSoft, ??? я про синию фигню

[ProjectSoft]

Darkness, и что? у вас вся картинка синяя. Какая фигня?
Если нижняя, то всё просто.
Режете, просчитываете проценты и применяете для пустого див в котором :before это блок с высотой в 0 пикселей и нижним отступом (padding-bottom) равным процентному отношению высоты к ширине.
Он будет как бы распоркой для div
Именно в процентах. (h * 100) / w
background-size задаёте как background-size: 100% 100%

Верхнюю же часть вам нужно именно верстать, а не картинку подсовывать.

[RAX7]

Darkness, как-то так: https://jsfiddle.net/ds32a0on/

[Darkness]

RAX7, воу, спасибо!

Answer 1

[shmatuan]

1. Можно progressive JPEG использовать - будет и оптимизация размера и постепенная загрузка (ч/б крупные пиксели, потом постепенное улучшение качества)
https://www.jpeg.io/

2. Разделить картинку на составляющие и грузить отдельно (большая чась - синий фон, например, можно и так сделать)

Comments

[Darkness]

1) интересно
2) тоже так делаю, сейчас просто решил уменьшить его и все
3) Вопрос, то что я 2 секции обернул одним дивом и после дал ему background, норм или нет? Думаю, что нет)

[shmatuan]

Darkness, С 3 по логике всё ок, отрицательными марджинами было бы хуже в плане адаптивности)
Вообще смотря какие секции - если хэдер, то можно его fixed сделать, без объеденения в 1 див.