Изображения — это один из компонентов, которые могут замедлить загрузку сайта, а ведь разработка мобильной версии сайта одной из главных целей ставит обеспечение более быстрой загрузки. Кроме того, пользователи тоже не будут ждать, пока слишком тяжелая страница прогрузится до конца.
Способы оптимизации изображений на мобильных сайтах
Разработка адаптивного дизайна сайта или создание отдельной мобильной версии требует работы над всеми иллюстрациями и изображениями, которые вы хотите показать посетителям ресурса. Сегодня существуют следующие способы оптимизации
- Использование формата PNG. Этот формат обеспечивает хорошее сжатие картинки без потери качества, при этом лучше всего это работает с одноцветными иллюстрациями. Кроме того, можно взять в помощь известные сетевые инструменты для сжатия PNG (например, OptiPNG), что позволит добиться лучшего результата.
- Применение Sprite Sheet для объединения графических элементов страницы в одно изображение. Преимущество использования спрайтов состоит в том, что все картинки на странице становятся одним файлом, который помещается на сервер вместо нескольких частей. Таким образом, при загрузке страницы снижается количество запросов на сервер и процесс происходит быстрее.
- Использование CSS для загрузки изображений. Это хороший способ для ускорения загрузки, который советуют использовать вместо введения в код команд типа visibility:hidden, поскольку скрытые таким образом иллюстрации так или иначе будут подгружаться с сервера. Очень удобно, если на странице много мелких графических элементов вроде иконок или логотипов.
- Шрифт вместо иконок. Выбор единого шрифта вместо отдельных изображений для иконок на мобильном сайте ускоряет загрузку по тому же принципу, что и спрайты. Вместо многочисленных запросов, которые будут поступать на сервер при загрузке отдельного файла для каждой иконки, будет один запрос для загрузки шрифта.
В зависимости от того, какие изображения используются на странице, можно выбрать один или несколько вышеперечисленных методов. Это поможет сохранить визуальную привлекательность страницы и вместе с тем сделает ее загрузку на мобильном устройстве быстрее.
Методы загрузки изображений
Если вы хотите адаптировать сайт под мобильные устройства, цена слишком длительного времени загрузки страницы из-за графического контента может оказаться слишком высока — посетитель не захочет ждать, пока страница отобразится на экране, и покинет сайт. Для тех, кто использовал методы оптимизации изображений, но все еще недоволен скоростью загрузки, есть дополнительные методы, один из которых — метод отсроченной загрузки, реализуемый на основе JavaScript. Его суть состоит в том, что многочисленные изображения начинают подгружаться уже после того, как загружен основной контент, так что посетитель не будет долго смотреть на пустой экран и сможет решить, нашел ли он на странице то, что ему требовалось.
Для тех, кто не хочет заставлять пользователя ждать загрузки изображений после основного содержимого, можно использовать активную загрузку, при которой на экране сначала появляются картинки низкого качества, которые “весят” меньше, а уже потом они заменяются изображениями с большим разрешением.
Еще один вариант — загрузка изображений, которые пользователю необходимы в данный момент, то есть те, которые он видит на части экрана без скролла вниз. Остальной контент будет загружаться, если пользователь начнет пролистывать страницу вниз. Это актуально для мобильных версий интернет-магазинов, при этом для первоначального просмотра галереи можно использовать картинки низкого качества, а если клиент захочет поближе рассмотреть конкретный товар, после клика по такой картинке он получит отдельно загруженное изображение высокого качества.