Картинки почти всегда занимают больше веса страницы, чем всё остальное вместе.

Картинки почти всегда занимают больше веса страницы, чем всё остальное вместе.

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

Что даёт быстрый результат:

— отдавать размер под фактический контейнер, с запасом на плотные экраны, а не в разы больше;
— выбирать современный формат там, где браузер его понимает, оставляя привычный как запасной;
— откладывать загрузку того, что ниже первого экрана, но не откладывать главную картинку: от неё зависит ощущение скорости;
— задавать размеры заранее, чтобы страница не прыгала при подгрузке.

Отдельно про обработку на лету. Сервис, который сам подгоняет размер и формат под запрос, снимает с редакторов обязанность помнить о правилах. Это надёжнее любых инструкций.

И про декоративное. Фоновые градиенты и текстуры весом с полстраницы обычно можно заменить средствами оформления и не грузить вовсе. 📉