Карточка занятия на телефоне занимает всего пару сантиметров, а браузер может загружать для неё фотографию весом в несколько мегабайт. На мобильном интернете это видно сразу: текст уже появился, а вместо снимка вверху страницы ещё пусто. Прежде чем менять хостинг, проверьте, какой файл получает посетитель и нужен ли ему оригинал такого размера.
Почему вес изображений влияет на впечатление от сайта
Каждую картинку браузеру приходится скачивать. Фотографии занятий, портреты тренеров, карточки направлений и декоративные иллюстрации вместе могут заметно замедлить страницу. Причём важен не только их общий объём: тяжёлое фото вверху задерживает появление самого заметного элемента, а изображения внизу порой занимают соединение ещё до того, как человек до них долистал.
Посетитель спортивного клуба может открыть расписание по дороге домой, чтобы узнать время занятия и условия записи. Ждать ради этого загрузки всех фотографий зала ему ни к чему. Но убирать снимки тоже не стоит: по ним проще представить пространство и саму тренировку. Лучше передавать нужную версию изображения тогда, когда она понадобится.
Размер файла и размер на экране — разные вещи
Сначала сравните размеры исходного снимка и блока, в котором он показан. Если фото шириной 4000 пикселей стоит в карточке шириной около 400 пикселей, браузер всё равно может скачать полный исходник. Уменьшение средствами оформления меняет картинку на экране, но само по себе не сокращает объём загрузки.
Подготовьте несколько версий: небольшую для карточки, среднюю для обычного экрана, крупную — для широкого блока или дисплея с высокой плотностью пикселей. Атрибуты srcset и sizes помогают браузеру выбрать файл с учётом ширины окна и места, которое снимок занимает в макете. Результат нужно проверять на самой странице: фотография во всю ширину телефона и та же фотография в узкой колонке требуют разных версий.
Не забывайте о пропорциях
Уменьшение не спасёт кадр, если его форма не подходит блоку. Для квадратной карточки может потребоваться отдельная обрезка широкого снимка, иначе лицо тренера или важная часть упражнения уйдёт за край. Ориентируйтесь на содержание фотографии, а не обрезайте её автоматически по центру. Если сайт работает на системе управления контентом, проверьте, какие размеры она создаёт и не подставляет ли оригинал вместо готовой миниатюры.
Формат и сжатие: что выбирать
Формат влияет и на вес, и на вид картинки. JPEG подходит для фотографий и широко поддерживается. WebP и AVIF часто позволяют уменьшить файл при сопоставимом качестве, хотя результат зависит от снимка и настроек экспорта. PNG пригодится для прозрачности или чёткой графики без потерь, но для обычной фотографии нередко будет слишком тяжёлым. SVG подходит для простых логотипов и значков, если файл подготовлен безопасно и векторный формат здесь действительно нужен.
Единой настройки сжатия для всех материалов нет. На фотографии зала присмотритесь к лицам, надписям на табличках, контурам оборудования и плавным переходам цвета. Если сжать файл слишком сильно, снимок станет мутным или на нём появятся заметные искажения. Сравнивайте версии в том размере, в котором их увидит посетитель, в том числе на телефоне.
- Фотографии: подбирайте размеры под макет, затем сравнивайте результат экспорта в доступных форматах.
- Логотипы и пиктограммы: сохраняйте чёткие края; для простых элементов рассмотрите SVG.
- Изображения с текстом: по возможности переносите текст в HTML, чтобы его было удобно читать и он оставался доступным.
- Скриншоты расписания: заменяйте таблицей или текстом, если данные нужно разбирать на маленьком экране.
Когда загружать фотографии
Изображениям далеко ниже первого экрана подходит отложенная загрузка: браузер запрашивает файл ближе к тому моменту, когда посетитель до него долистает. В HTML для этого часто используют loading="lazy". Но ставить его на все картинки подряд не нужно. Главное фото вверху страницы должно появиться быстро, а отложенная загрузка может ему помешать.
То же касается каруселей. Если сразу виден только первый слайд, крупные фотографии остальных необязательно загружать одновременно с ним. Проверьте работу своей карусели: некоторые решения добавляют скрытые слайды на страницу и сразу начинают скачивать их снимки. На короткой странице разница может быть невелика, в длинной галерее — заметнее.
Место для изображения до его появления
Если браузер заранее не знает размеров картинки, после её загрузки текст и кнопки могут сдвинуться. Это сбивает с чтения, особенно когда человек уже тянется нажать «Записаться». Указывайте ширину и высоту изображения либо задавайте соотношение сторон его контейнера. Тогда место под снимок останется свободным, пока файл загружается.
Что делать с уже опубликованными страницами
Необязательно сразу пересохранять всю медиатеку. Начните с главной страницы, расписания и описаний занятий. Откройте их на телефоне и компьютере, посмотрите, какие файлы загружаются и какие занимают больше всего данных. Инструменты разработчика в браузере покажут размер переданных файлов и помогут найти карточки, в которые подставлен огромный оригинал. Проверка скорости укажет на элементы, задерживающие появление содержимого, но её выводы стоит сверить с тем, что видно на экране.
- Найдите тяжёлые изображения и выясните, где и в каком размере они показаны.
- Подготовьте версии нужных размеров и сравните качество после сжатия.
- Убедитесь, что браузер получает подходящую версию, а не исходник.
- Настройте отложенную загрузку для изображений ниже первого экрана.
- Повторно проверьте страницу на узком экране и при медленном соединении.
Автоматическая обработка новых файлов экономит время, но сначала испытайте её на разных изображениях: портрете, фотографии зала, афише. Исходники лучше хранить отдельно. Если дизайн изменится, из них можно будет подготовить новые размеры, не увеличивая уже сжатую картинку. Когда изображения отдаёт сторонний сервис или система управления сайтом, смотрите не на название функции «оптимизация», а на файл, который браузер получает на самом деле.
Скорость не должна скрывать содержание
Фотография — часть страницы, а не просто файл определённого веса. Описательный альтернативный текст передаст её смысл, если снимок не загрузился или посетитель пользуется программой чтения с экрана. Декоративную картинку, которая ничего не добавляет, не нужно сопровождать длинным описанием. А цену, время тренировки и адрес лучше размещать обычным текстом, а не оставлять только внутри изображения: так их проще прочитать, скопировать и обновить.
Перед следующей публикацией откройте страницу на телефоне и сравните размер загруженного файла с размером фотографии на экране. Если маленькая карточка всё ещё получает полноразмерный оригинал, начните с настройки выбора версии. Для этого не придётся менять дизайн страницы.
