Сжать JPG для сайта

На типичной контентной странице изображения составляют большую часть передаваемых байтов, а самое крупное из них очень часто и есть элемент Largest Contentful Paint — метрика, которую Core Web Vitals измеряют напрямую. Если hero-изображение приходит на полсекунды позже, LCP тоже сдвигается на полсекунды, а LCP выше 2,5 секунды — тот порог, за которым страница перестаёт считаться «хорошей».

Самая распространённая ошибка — отдавать файл прямо с камеры или из дизайн-макета без изменений. JPEG на 4000px и 5 МБ, отображаемый в контейнере шириной 1200px, передаёт примерно в двадцать раз больше данных, чем макет способен показать. Браузер уменьшает изображение уже после загрузки, так что посетитель ждёт детали, которые будут отброшены ещё до отрисовки.

Качество 78 находится чуть ниже той точки, где артефакты JPEG становятся заметны на фотографическом контенте, а 1920 пикселей покрывают полноширинное отображение на подавляющем большинстве экранов. Вместе эти значения обычно позволяют уменьшить hero-изображение до менее чем 300 КБ. Дальнейшее снижение качества заметно ухудшает изображение ради относительно небольшой экономии веса; дальнейшее уменьшение размеров начинает выглядеть «мыльно» на экранах с высокой плотностью пикселей.

Впрочем, сжатие — лишь часть решения, остальное зависит от разметки. Задавайте явные атрибуты width и height, чтобы браузер мог заранее зарезервировать место и избежать сдвига макета, добавляйте loading="lazy" ко всему, что находится ниже первого экрана, и позволяйте загружаться немедленно только тому единственному изображению, которое является элементом LCP. Следующий по значимости выигрыш после этого шага обычно даёт отдача современного формата вместе с JPEG через элемент picture.