Большие изображения — самая частая причина медленной загрузки страниц. Следуйте этим шагам, чтобы уменьшить их без заметной потери качества.
Изображения обычно самая тяжёлая часть веб-страницы. Одна фотография прямо с телефона может весить 3–5 MB — больше, чем должна весить вся хорошо сделанная страница. Хорошая новость: большую часть этого объёма можно убрать так, что никто не заметит.
1. Сначала уменьшите размер, потом сжимайте
Если страница показывает изображение шириной 1200 пикселей, нет смысла отдавать оригинал шириной 4000 пикселей. Уменьшите его до наибольшего размера показа или до двойного для чётких экранов. Одно только изменение размера часто убирает 80% веса файла и больше. Наш инструмент «Изменение размера изображений» сделает это за несколько кликов.
2. Выберите подходящий формат
Для фотографий используйте WebP или JPG, для графики с прозрачностью — PNG или WebP. Фотография в PNG получается намного больше, чем нужно.
3. Немного снизьте качество
Для фотографий качество от 70% до 85% обычно выглядит так же, как оригинал при обычном размере просмотра. Для миниатюр и фонов можно опуститься ниже. Всегда сравнивайте результат перед публикацией.
4. Проверьте результат
Внимательно посмотрите на участки с мелкими деталями, текстом или плавными переходами. Если видны квадраты или полосы, немного повысьте качество. Наш инструмент «Сжатие изображений» показывает исходный и новый размер рядом, чтобы вы нашли лучший баланс.
5. Пусть поможет браузер
- Добавьте атрибуты
widthиheight, чтобы страница не прыгала во время загрузки изображений. - Добавьте
loading="lazy"к изображениям ниже по странице. - Отдавайте несколько размеров через
srcset, чтобы телефоны загружали файлы поменьше.
Вместе эти шаги могут ускорить загрузку страниц с большим количеством изображений в несколько раз, и это заметят и посетители, и поисковые системы.