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

Количество экранов, где отображаются картинки

Мы можем насчитать более 10 видов популярных размеров экрана и еще больше единичных вариантов, которые встречаются у меньшего числа пользователей. Среди самых известных форматов разрешений для мониторов и ноутбуков можно выделить: 1024x768, 1280x720, 1920x1080, 3840x2160. У пользователей, использующих планшеты, обычно встречаются следующие форматы экрана: 600x800, 768х1024, 768x1366, 1600x2560. Владельцы смартфонов могут иметь устройства со следующим разрешением: 320×480, 480×800, 640×960, 640х1136.

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

Лирическое отступление: Адаптивным называется сайт, который динамически подстраивается под заданные размеры окна браузера в зависимости от устройства.

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

Необоснованное использование PNG формата

Первое, что мы учитываем при оптимизации изображений – это формат. Он напрямую влияет на скорость загрузки сайта. Есть три наиболее популярных формата изображений, которые используются при разработке и наполнении сайтов: JPEG, PNG и GIF.

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

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

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

Спрайты

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

Чтобы избежать такой проблемы, мы используем спрайты: маленькие картинки, соединенные в один большой фрагмент. В нем могут быть собраны различные графические элементы интерфейса, иконки, кнопки, символы. Такой метод дает возможность сократить количество обращений к серверу, снизить нагрузку на сайт и ускорить его работу. 

Сжатие файлов

Еще один элемент оптимизации — сжатие файлов. С помощью него можно сохранить само изображение, просто уменьшив его размер в 5-6 и даже в 10 раз, в зависимости от целей. При этом, потеряется всего 15-20% качества изображения, что чаще всего не критично.  

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

КЭШ браузера

Более быстрой загрузки сайта можно добиться путем настройки кэширования. 

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

Загрузка элементов страницы с сервера при этом уже не происходит.

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

Alt картинок

HTML-атрибуты нужны для более эффективного распознавания картинок поисковыми системами. В частности, элемент Alt включает короткое описание изображения. Зачем он необходим? Атрибут позволяет поисковой системе точнее определять тему изображения. Правильное указание данного атрибута требует соблюдения определенных требований:

1. Небольшой размер. Описание не должно быть более 125 символов.
2. Содержательность и конкретика.
3. Отсутствие спамности.
4. Наличие ключевых запросов, релевантных содержанию изображения. 

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