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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

Сообщить об ошибке

Отменить
3049 1
How-to Читать 8 минут 19 апреля 2019

Как оптимизировать изображения на сайте для мобильных устройств

Как уменьшить картинки на сайте для мобильных устройств
АУДИТ САЙТА — СКОРОСТЬ ЗАГРУЗКИ
Инструкцию одобрил
Руководитель SEO отдела в Mnogoland
Оптимизация изображений для мобильных устройств улучшает восприятие сайта поисковыми системами и положительно влияет на индексацию страниц. Чтобы уменьшить вес картинок, измените формат, используйте сжатие и кэширование данных.

Что дает сжатие картинок для мобильных устройств

Согласно исследованиям HTTP Archive, больше половины веса страницы составляют изображения. Если не уменьшать их размер, пользователю придется дольше ждать полной загрузки страницы. Соответственно большинство покинет страницу еще до ее полноценного отображения. Этот факт негативно сказывается на поведенческих факторах и ранжировании страницы в поиске.

Это особенно важно для пользователей мобильных девайсов, которые обычно обладают меньшей производительностью и меньшей скоростью интернета по сравнению с десктопами.

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

Как проверить скорость загрузки страницы на мобильных устройствах

Наиболее простой метод — использовать инструмент PageSpeed Insights, разработку от Google. Во вкладке «Мобильные устройства» отображается полноценная информация о скорости загрузки и распределении веса страницы. К тому же сервис указывает, как должна проводиться оптимизация изображений для мобильных устройств на конкретном сайте:
Проверка скорости загрузки на мобильных и компьютерах Google PageSpeed Insights
Это готовое руководство к действиям, которое можно использовать по пунктам, начиная с красной зоны.

Как уменьшить картинки для мобильных устройств

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

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

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

Какие форматы изображений используют на сайтах

Сейчас рекомендуется применять новые форматы изображений JPEG 2000, JPEG XR и WebP. Происходит более эффективное сжатие, поэтому они загружаются быстрее и потребляют меньше трафика, чем изображения PNG и JPEG. Новые формы поддерживают не все версии браузеров. Перед тем, как их использовать, нужно сделать проверку.

На разных площадках можно встретить стандартные форматы картинок:

  • JPEG — фотографии, изображения с плавными переходами цветов;
  • GIF — простые логотипы, знаки, графики, диаграммы и анимации;
  • PNG — знаки, логотипы и графики с большим количеством оттенков;
  • SVG — индивидуальные разработки логотипов и картинок в векторном виде.

Все указанные форматы поддаются сжатию при помощи онлайн-инструментов и стационарных программ, а также добавления запросов в HTML-коде сайта.

Сейчас рекомендуется применять новые форматы изображений JPEG 2000, JPEG XR и WebP. С ними происходит более эффективное сжатие, поэтому такие картинки загружаются быстрее и потребляют меньше трафика, чем изображения PNG и JPEG. Новые формы поддерживают не все версии браузеров. Перед тем, как их использовать, нужно сделать проверку.

Способы сокращения веса изображений

1
Задать размер картинки. При загрузке картинки на страницу вы можете указать количество пикселей, например, 800x600 вместо 1200x800. Но для мобильного устройства это все равно слишком большой размер.

Чтобы уменьшить формат, можно сразу загружать миниатюры картинок с возможностью увеличения до максимального размера при нажатии. Проще всего это сделать через плагины, например, Lightbox для WordPress.

Также можно задать размер картинки в HTML с помощью запроса:
Как задать размер картинки в HTML
В зависимости от ширины экрана или монитора выполняется вставка HTML картинки с размерами, указанными в коде. Так будет происходить при добавлении каждой картинки на сайт. Альтернативный вариант кода для сайтов с установленными последними версиями CSS:
Как указать размер картинки в HTML для последних версий CSS
Но что делать, если все картинки уже загружены, и все переделать вручную физически сложно? Используйте скрипты в таком порядке:

  • сначала необходимо собрать все стили:
module.exports в HTML коде
  • уменьшить изображения с указанием желаемого размера:
Уменьшение изображений в HTML
  • сжать и переместить картинки в другую директорию:
Сжатие картинок в HTML
2
Сжать картинки. Это делается вручную при помощи онлайн-инструментов или стационарных компьютерных программ. Например, Optimizilla или TinyPNG. Сжатие картинок для мобильных устройств можно выполнить и через серверные команды:

Для формата JPEG:

  • JpegTran избавляет от метаданных;
Удаление метаданных командой JpegTran
  • ImageMagic задает параметр качества для сжатия.
Сжатие картинок командой ImageMagic
Для формата PNG:

  • PngQuant сжимает картинку через уменьшение количества оттенков. В результате немного ухудшается ее качество;
Сжатие изображений командой PngQuant
  • PngCrush сжимает картинку и не влияет на ее качество.
Сжатие картинок командой PngCrush
3
Активировать разработку Google — модуль PageSpeed, который подходит для серверов Apache и Nginx и обладает набором функций для оптимизации картинок. Нужно установить и активировать модуль через команду:
Как включить PageSpeed на сервере
4
Перейти с библиотеки jQuery на более легкую версию. Например, Zeptojs. Нет смысла использовать старую тяжелую библиотеку, которая дополнительно грузит мобильные браузеры.
5
Использовать кэширование данных. После создания кэша изображений при каждом следующем обращении к странице браузер будет загружать сохраненные копии картинок без потери времени на загрузку оригиналов.
6
Отказаться от GIF-анимаций, значительно замедляющих скорость загрузки страницы. Если нужно использовать в тексте микровидео, используйте HTML 5, который поддерживает большинство современных мобильных браузеров.
7
Создать CSS-спрайты иконок. В обычном формате загрузка каждой иконки означает отдельный запрос к серверу. Создание объединенных спрайтов уменьшает количество запросов к серверу и соответственно сокращает вес страницы. Вот так выглядит пример спрайта:
CSS-спрайты иконок соцсетей

Что такое адаптивный дизайн RWD

Responsive Web Design представляет собой единую версию сайта с автоматической адаптацией под разные устройства. Это простой дизайн ресурса с гибким размером изображений, который меняется в зависимости от используемого устройства.

RWD избавляет от потребности в создании нескольких версий сайта. По факту адаптивный дизайн полезен только при использовании современных устройств с высоким уровнем производительности.

После настройки RWD картинки автоматом меняют свой формат в пределах экрана. Но вес изображений на сервере остается прежним. Пользователь с мощным устройством и быстрым интернетом разницы не ощутит.

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

Заключение

Оптимизация изображений для мобильных устройств подразумевает:

  • уменьшение формата;
  • сжатие размера;
  • кэширование;
  • объединение иконок в CSS-спрайты.

Если не изменить размер картинки в HTML, вес страницы останется по-прежнему большим. Пользователю придется долго ждать загрузки контента на странице, а поисковая система опустит такой сайт в выдаче.

Для автоматического сжатия картинок используйте онлайн-сервисы и серверные команды. Также можно использовать эффект постепенной загрузки Lazy Load: текст отображается сразу, а картинки подгружаются по мере прокрутки страницы.
Эта статья — часть модуля «Аудит сайта» в Serpstat
«Аудит сайта» в Serpstat
Аудит всего сайта или отдельной страницы в один клик. Полный список ошибок, отсортированный по критичности, пути их устранения и рекомендации. Любая периодичность проверки и автоматическая рассылка отчетов на почту.
Запустить аудит сайта

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

3.67 из 5 на основе 6 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Поделитесь статьей с вашими друзьями

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

Отправьте заявку для ознакомления с сервисом и мы свяжемся с вами в кратчайшие сроки. Наш специалист предложит подходящий вариант, который может включать персональную демонстрацию, пробный период, материалы для обучения и повышения экспертизы, личную консультацию, а также комфортные условия для начала работы с Serpstat.

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Lite или выше, чтобы получить доступ к инструменту Подробнее

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов