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

Question

[nsonso]

Что нужно знать о вставке картинок на сайт?

К примеру, имеется обычный лендинг, весь хедер которого занят большим, качественным (=много весящим) изображением. Из-за этого страница может тормозить.

Каким образом обычно решается эта проблема? Что вообще можно почитать на этот счет?

Comments

[Tsiren Naimanov]

gzip я чёт читал тип, страницу ещё gzip сжимают перед отправкой и если браузер эт умеет он сам всё юзает

Answer 1

[Никита Петров]

Если ты пряморукий фронтенд и вопрос в теме js то Gulp тебе в помощь, там норм таски на сжатие и обработку изображения. Лучше потрать пару часов, изучи сборщик проекта чем вечно ходить по левым сайтам и оптимизировать каждую картинку и слушать как google pagespeed все равно тебя унижает.

Answer 2

[Сергей]

Как вариант: В адаптивном дизайне есть метод, использующий несколько картинок разного размера.
В JS создаётся скрипт, который грузит "тяжелый рисунок" только если разрешение монитора велико.
Если разрешение "не дотягивает", то используется картинка поменьше.

Что почитать: почитайте книгу " Добавь воздуха! Основы визуального дизайна для графики, веба и мультимедиа". Выше вам правильно написали: нужно дизайнить минималистично.

Answer 3

[Максим Тимофеев]

Все зависит от ситуации, методов много. Иногда вместе с страницей грузят сжатые копии картинок, например размытые, потом подгружают ajax качественные. Иногда оправдано загрузить верхнюю часть сайта, остальное позже. Иногда делают прелоадер, который видит пользователь до момента формирования тяжелой страницы. Кроме этого есть gzip, надо на сервере настроить. Кроме этого некоторые изображения можно объединить в 1, сделать так называемый спрайт. А иногда просто хостера стоит поменять. Если дадите ссылку на сайт, Вам дадут более правильный совет.