Почему картинки на телефоне грузятся очень медленно или не грузятся вообще?

Картинки на телефоне чаще всего грузятся медленно потому, что файлы слишком тяжёлые для мобильного интернета: виноват не телефон, а сама фотография. Если изображение не появляется вовсе, причина почти всегда в битой ссылке, в формате, который мобильный браузер не умеет показывать (например, HEIC прямо с iPhone), в неудачно настроенной ленивой загрузке или в теме, которая прячет картинку на маленьком экране. А если картинки пропали на всех сайтах подряд, проверять нужно телефон или соединение, а не сайт.

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

Хорошая новость: у каждой из этих проблем есть конкретная причина, и большинство решается без переделки сайта. Начните с таблицы ниже, чтобы понять, какой у вас случай, а потом прочитайте нужный раздел и проверьте всё сами, даже без технических знаний.

Быстрая диагностика: что вы видите и что это обычно значит

Причина 1: фото слишком тяжёлые

Самая частая причина связана не с телефоном, а с самой фотографией. Современная камера или смартфон выдаёт снимки весом в несколько мегабайт. Если загрузить такое фото на сайт как есть, мобильному браузеру придётся скачивать весь файл по соединению, которое часто заметно медленнее домашнего Wi-Fi.

Как проверить: сохраните фото с сайта на компьютер и посмотрите размер файла. Если одна картинка весит мегабайты, а не килобайты, для сайта это слишком много.

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

Две вещи, о которых часто забывают:

• Телефон получает версию для компьютера. Хорошо сделанный сайт хранит несколько размеров каждого фото, а браузер сам выбирает подходящий (для этого есть srcset и элемент picture). Если в теме только одна большая версия, каждый телефон скачивает файл, рассчитанный на широкий монитор.
• Не указаны ширина и высота. Без них браузер не может заранее оставить место под картинку, и текст «прыгает», пока фото догружаются. Google советует прописывать атрибуты width и height для каждого изображения.

Пошагово это разобрано в статье как оптимизировать изображения для веба без потери качества.

Причина 2: «битая» картинка — неверная ссылка, перемещённый файл или адрес с http

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

Типичные причины:

• Файл удалили, переименовали или перенесли в другую папку уже после публикации.
• Фото лежало на чужом сайте или в аккаунте, которого больше нет, либо тот сайт запрещает показывать свои картинки на других ресурсах.
• Заглавные буквы или пробелы в адресе не совпадают с реальным именем файла (многие серверы считают Photo.JPG и photo.jpg разными файлами).
• Адрес картинки начинается с http://, а сайт работает по https://. Браузеры стараются сами перевести такие картинки на https, но в части случаев блокируют их, например если изображение задано через набор размеров (srcset) или элемент picture либо если в адресе стоит IP-адрес вместо доменного имени.

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

Причина 3: формат, который мобильный браузер не показывает

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

• Фото HEIC с iPhone. iPhone часто сохраняет снимки в формате HEIC (HEIF). Safari показывает его только начиная с 17-й версии, а Chrome, Firefox и Edge не показывают вовсе. Загрузите HEIC без конвертации, и вы увидите фото на своём iPhone, а посетители с Android — пустое место. Перед загрузкой сохраните снимок в JPEG или, если снимаете специально для сайта, выберите «Настройки» → «Камера» → «Форматы» → «Наиболее совместимый».
• AVIF или WebP без запасного варианта. Современные форматы — правильный выбор, но AVIF в Safari поддерживается только с 16-й версии, и на старом iPhone, оставшемся на iOS 15 или более ранней, вместо фото может быть пусто. Надёжная схема: AVIF или WebP плюс запасной JPEG через элемент picture; так работают хорошие плагины оптимизации.

Причина 4: слишком агрессивная ленивая загрузка (lazy-load)

Современные сайты используют ленивую загрузку: картинки ниже по странице скачиваются не сразу, а по мере того, как вы до них прокручиваете. При правильной настройке это экономит трафик и ускоряет первый показ.

Проблемы начинаются при плохой настройке. На телефоне листают быстро, фото не успевает загрузиться: секунду-две пусто, потом картинка резко появляется. Особенно заметно на медленном соединении.

У Google на этот счёт чёткая рекомендация: не включать ленивую загрузку для изображений, которые видны сразу при открытии страницы, и особенно для большой картинки вверху (часто именно по ней считается LCP — показатель того, как быстро появляется основное содержимое). Некоторые плагины оптимизации и темы включают lazy-load для всех картинок подряд, в том числе для верхней, и именно это даёт задержку.

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

Решение — не отключать lazy-load целиком, а загружать первую картинку сразу (без ленивой загрузки и с высоким приоритетом), а остальные — по мере прокрутки.

Причина 5: тема прячет картинку на телефоне или кэш показывает старую версию

• Скрыто на мобильных. Многие темы и конструкторы страниц позволяют скрыть блок на маленьких экранах или поставить отдельную картинку для мобильной версии. Если мобильную картинку так и не выбрали или забыли выключить «скрыть на мобильных», на компьютере фото есть, а на телефоне его просто нет. Проверьте адаптивные (мобильные) настройки этого блока в редакторе.
• Старая копия в кэше. Если вы заменили фото, а видите старое или сломанное, копия может храниться в браузере, в плагине кэширования или на CDN. Очистите кэш сайта в плагине или в панели хостинга и проверьте страницу в режиме инкогнито.

Если картинки не грузятся ни на одном сайте, сначала проверьте телефон

Если фото пропали на всех сайтах, а не только на вашем, сайт ни при чём. Что проверить:

• Переключитесь между Wi-Fi и мобильным интернетом, чтобы исключить слабое или фильтруемое соединение.
• Временно отключите VPN, блокировщик рекламы или контента и обновите страницу.
• На время проверки исключите режимы экономии. На Android это обычно «Настройки» → «Сеть и Интернет» → «Экономия трафика» (у разных производителей названия отличаются), на iPhone — «Экономия данных» в разделе «Настройки» → «Сотовая связь» → «Параметры данных» или в сведениях о сети Wi-Fi, к которой вы подключены.
• Очистите кэш браузера или откройте страницу во вкладке инкогнито; если ничего не изменилось, перезагрузите телефон.

Как проверить свой сайт за несколько минут

• Откройте сайт на телефоне через мобильный интернет, а не через Wi-Fi: так его видит реальный клиент.
• Сохраните пару фото и посмотрите вес. Мегабайты на одну картинку — явный сигнал.
• Сравните устройства: фото нет и на ноутбуке, в любом браузере — битая ссылка; на ноутбуке есть, а на телефоне тормозит — вес или lazy-load; на iPhone видно, на Android нет — формат.
• Проверьте страницу в PageSpeed Insights на вкладке для мобильных. Смотрите рекомендации о доставке изображений («Improve image delivery»: слишком тяжёлые, слишком большие или в старом формате) и об обнаружении запроса LCP («LCP request discovery»: не стоит ли на главной картинке ленивая загрузка). В русском интерфейсе названия могут быть переведены.

Обычно этих проверок хватает, чтобы без гаданий понять, какая из причин выше ваша. Если беспокоит сама оценка, вот как поднять оценку PageSpeed Insights, не будучи программистом.

Что делать дальше

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

Так мы и работаем в MPO Web Studio, небольшой веб-студии из Клуж-Напоки: готовим изображения в современных форматах с запасным вариантом, в правильных размерах для телефонов, и настраиваем ленивую загрузку так, чтобы первое фото появлялось сразу, а остальные подгружались плавно. Работаем удалённо, цены называем заранее и понятно, а новым клиентам сначала делаем бесплатную демо-версию, чтобы вы увидели результат до того, как примете решение.

Если хотите, напишите нам в WhatsApp адрес вашего сайта, и мы честно скажем, какая из этих проблем у вас и сколько времени займёт её решение.