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

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

Хорошая новость: у проблемы почти всегда есть конкретная причина и в большинстве случаев её можно устранить без перестройки сайта. Здесь я объясняю четыре реальные причины, по которым картинки грузятся плохо или не грузятся вовсе на телефоне, и как проверить каждую самому, даже если вы не технический человек. В конце скажу, что делать дальше.

Главная причина: фото слишком тяжёлые как файлы

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

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

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

«Битая» картинка: неверная ссылка или перемещённый файл

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

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

• Файл удалили, переименовали или переместили в другую папку после публикации.
• Фото хранилось на другом сайте или в аккаунте, которого больше нет.
• В адресе есть заглавные буквы или пробелы, написанные не так, как в реальном файле (серверы различают Photo.JPG и photo.jpg).

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

Ленивая загрузка: картинки грузятся только когда до них доходишь

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

Проблема возникает при плохой настройке. На телефоне, где вы быстро листаете пальцем, фото не успевает загрузиться до того, как вы его увидите, поэтому секунду-две оно пустое, а потом резко появляется. Иногда агрессивно настроенный плагин оптимизации даёт именно этот неприятный эффект, особенно на медленном соединении.

Как распознать: на ноутбуке с хорошим интернетом всё плавно, а на телефоне фото возникают «рывками» при прокрутке. Решение — не отключать lazy-load полностью, а дать важной верхней картинке (той, что клиент видит первой) загрузиться сразу, а остальным — постепенно.

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

Чтобы понять, что происходит, сложные программы не нужны:

• Откройте сайт на телефоне, но на мобильном интернете, а не на wi-fi. Так вы увидите то, что видит реальный клиент.
• Сохраните пару фото и проверьте размер файла. Больше мегабайта на картинку — явный сигнал.
• Сравните: фото отсутствует и на ноутбуке? Тогда это битая ссылка. Есть на ноутбуке, но тормозит на телефоне? Тогда это размер или lazy-load.
• Проверьте страницу бесплатным инструментом измерения скорости (PageSpeed Insights от Google). Он прямо скажет, слишком ли тяжёлые изображения или они в старом формате.

Эти четыре проверки чаще всего показывают, без гаданий, в какую из трёх категорий вы попадаете.

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

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

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

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