6503
SEO Читать 6 минут 3 августа 2020

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

Как оптимизировать изображения для мобильных устройств
Александр Иванов
Ильхом Чакканбаев
Автор блога Seopulses.ru
Оптимизация изображения для мобильных устройств позволяет ускорить загрузку страницы. В дальнейшем это положительно повлияет на пользовательский опыт, конверсию, а также поможет сайту лучше ранжироваться в поисковых системах.

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

Скорость загрузки сайта — это фактор ранжирования в Google. А так как в первую очередь сканируется контент для смартфонов (Mobile-First Index), следует поработать именно над мобильной версией.
Как оптимизировать метатеги и изображения раз и навсегда

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

Как оптимизировать изображения для мобильных устройств
Наиболее простой метод для уменьшения веса картинок — это их сжатие. Для этого потребуется найти самые «тяжелые». Чтобы сделать это можно использовать инструмент PageSpeed Insight, куда вводим для примера данную статью и получаем следующий результат для смартфона.
Как оптимизировать изображения для мобильных устройств 16261788426411
Спускаемся немного ниже и видим тяжелые изображения во вкладке «Настройке подходящий размер изображений», где указано, что имеется 2 наиболее тяжелых изображения:
1
Первое весит 2,3Мб
2
Второе весит 0,8 Мб
Как оптимизировать изображения для мобильных устройств 16261788426412
Кстати, скорость загрузки страницы можно проверить прямо в браузере с помощью бесплатного расширения Serpstat Website SEO Checker.
Как оптимизировать изображения для мобильных устройств 16261788426412
Там же можно найти и большие изображения:
Как оптимизировать изображения для мобильных устройств 16261788426412
Для того чтобы улучшить эти значения скачиваем их и прогоняем через сервис iloveimg.
Как оптимизировать изображения для мобильных устройств 16261788426412
Видим, что система позволила облегчить изображения на 0.5 Мб, что уже дает возможность выиграть некоторое количество времени.

Массово сжать изображения на всем сайте Wordpress можно через плагины:

Изменение размера изображений
После того как мы опробовали стандартное сжатие, следует переходить к уменьшению размера, что можно сделать открыв изображения в графическом редакторе, например, Paint (есть на любом компьютере с Windows). После открытия выбираем «Изменить размер».
Как оптимизировать изображения для мобильных устройств 16261788426413
Видим, что изображение имеет размер 2417*1188 пикселей, что достаточно много даже для десктопа.
Как оптимизировать изображения для мобильных устройств 16261788426413
Чтобы оптимизировать, попробуем уменьшить его размер до 1200*589 пикселей. Видим, что оно без сжатия уже потеряло почти 400 Кб.
Как оптимизировать изображения для мобильных устройств 16261788426414
Сжимаем их, как и в первой инструкции и видим, что, теперь сжатые две картинки весят всего 792 Кб, что на 2300 Кб меньше, чем было.
Как оптимизировать изображения для мобильных устройств 16261788426414
В случае с сайтом ограничить максимальный размер изображений можно при помощи классов CSS, например, используя:
img {
    max-width: 100%;
}
Полный гайд по оптимизации картинок на сайте

Использование формата WebP
Возвращаемся в инструмент PageSpeed Insight и видим, что он также предлагает нам использовать современные форматы изображений, среди которых:
JPEG 2000;
JPEG XR;
WebP.
Как оптимизировать изображения для мобильных устройств 16261788426414
В примере мы будем использовать последний, а для проверки теории прогоним через конвертер Convertio исходные два изображения.
Как оптимизировать изображения для мобильных устройств 16261788426414
Как видим удалось сократить их вес еще на 700 Кб, теперь попробуем провести аналогичную операцию со сжатыми копиями.
Как оптимизировать изображения для мобильных устройств 16261788426414
Даже в этом случае удалось добиться снижения веса более чем на 10%, что также поможет улучшить скорость загрузки.

Массово превратить все изображения для Wordpress можно при помощи плагинов:
Как создать XML карту сайта для изображений

Ленивая загрузка изображений
Технология позволяет загружать изображения лишь при выполнении определенного действия, например, когда пользователь начал скролить страницу. Для примера включим ленивую загрузку при помощи плагина для Wordpress Autoptimize.
Как оптимизировать изображения для мобильных устройств 16261788426414
Без LazyLoad получаем следующий результат для мобильных устройств.
Как оптимизировать изображения для мобильных устройств 16261788426415
После включения ситуация становится значительно лучше.
Как оптимизировать изображения для мобильных устройств 16261788426415
Также включить ленивую загрузку на сайтах на базе CMS Wordpress можно при помощи официального плагина от Google.

Использование CDN
Использование CDN позволит ускорить загрузку как изображений, так и видео-контента на сайте, за счет уменьшения расстояния от сервера до пользователя. Для того чтобы воспользоваться услугой можно использовать инструменты:
Чтобы понять, используется ли данная технология в других сайтах можно просто посмотреть адрес изображений на странице.

Вывод
Данная инструкция позволит оптимизировать загрузку изображений на сайте. В дальнейшем это даст возможность добиться лучшей конверсии, а также занять более высокие позиции в поисковой выдаче.
Чтобы быть в курсе всех новостей блога Serpstat, подписывайтесь рассылку. А также вступайте в чат любителей Серпстатить и подписывайтесь на наш канал в Telegram.

Serpstat — набор инструментов для поискового маркетинга!

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

Набор инструментов для экономии времени на выполнение SEO-задач.

7 дней бесплатно
Мнение авторов гостевого поста может не совпадать с позицией редакции и специалистов компании Serpstat.

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

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

Используйте лучшие SEO инструменты

Проверка обратных ссылок

Быстрая проверка обратных ссылок вашего сайта и конкурентов

API для SEO

Получите быстро большие объемы данных используя SЕО API

Анализ конкурентов

Сделайте полный анализ сайтов конкурентов для SEO и PPC

Мониторинг позиций

Отслеживайте изменение ранжирования запросов используя мониторинг позиций ключей

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

Вы уверены?

Знакомство с Serpstat

Узнайте об основных возможностях сервиса удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Я принимаю условия Политики конфиденциальности.

Спасибо, мы сохранили ваши новые настройки рассылок.

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

Отменить
Открыть чат технической поддержки
mail pocket flipboard Messenger telegramm