Как оптимизировать изображения для веб-сайтов
Изображения обычно составляют большую часть веса страницы. Пять решений исправляют большую часть этого.
Обновлено 1 сентября 2026 г.
Изображения являются самым большим фактором, влияющим на вес страницы на большинстве сайтов, а элемент Largest Contentful Paint является изображением на большинстве страниц. Их оптимизация — это самая высокоэффективная работа по производительности, и большая часть ее заключается в принятии решений, а не в использовании инструментов.
Это порядок, который имеет значение, от наибольшего эффекта к наименьшему.
Шаги
- 1
1. Используйте правильные размеры
Измерьте наибольшую ширину CSS, которую занимает изображение, и экспортируйте его примерно в два раза больше для дисплеев с высокой плотностью пикселей. Герой с шириной 1200 CSS-пикселей требует исходника 2400px, а не оригинальной фотографии с камеры 6000px. Этот единственный шаг обычно превосходит все остальные вместе взятые.
- 2
2. Используйте WebP, а также AVIF, где это возможно
WebP на 25–35% меньше, чем JPEG, при сопоставимом качестве и поддерживается повсеместно. AVIF идет еще дальше, но кодирует медленнее. Сохраните резервную копию JPEG, если вам нужно поддерживать очень старые клиенты.
- 3
3. Устанавливайте качество по содержанию, а не по привычке
75–85 для фотографий. Выше для графики с резкими краями, где артефакты сжатия более заметны. Проверьте результат при реальном размере отображения.
- 4
4. Всегда устанавливайте ширину и высоту
Явные размеры позволяют браузеру зарезервировать место до загрузки изображения, что предотвращает сдвиг макета. Это исправление Cumulative Layout Shift, которое ничего не стоит.
- 5
5. Отложенная загрузка ниже сгиба, никогда не выше него
Добавьте loading="lazy" к изображениям, расположенным ниже на странице. Не используйте отложенную загрузку для LCP-изображения — это задерживает именно то, что измеряется.
Удаляйте метаданные при экспорте
EXIF и встроенные цветовые профили увеличивают вес без какой-либо пользы для рендеринга в вебе.
Используйте SVG для логотипов и иконок
Векторный логотип обычно весит несколько килобайт и остается четким при любом размере и плотности.