Улучшаем адаптивный дизайн сайта адаптацией изображений

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

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

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

Adaptive Images for WordPress

Adaptive Images for WordPress – плагин для дополнения адаптивного дизайна WordPress. Он адаптирует картинки для мобильных экранов. Это помогает улучшить восприятие контента и ускорить загрузку картинок, что положительно скажется на поведенческих факторах сайта. Подробнее о том, что такое ПФ и как ещё их можно улучшить мы рассказывали тут.

Чтобы начать работать с плагином и улучшать адаптивный дизайн сайта, необходимо скачать, установить и активировать плагин Adaptive Images for WordPress. После этого нужно его настроить – переходим в пункт консоли «Настройки» и выбираем подпункт «Adaptive Images Settings».

• Здесь необходимо записать разрешения экранов, под которые будут подстроены изображения адаптивного дизайна сайта. Писать нужно через запятую. Можно указать самые популярные разрешения смартфонов и планшетов.
• Bigger dimension. Если включить эту галочку, то плагин будет изменять размер изображения в соответствии с положением устройства – вертикально или горизонтально.
• CDN support. Позволяет ускорить загрузку изображений адаптивного дизайна сайта на мобильном устройстве с помощью поддержки CDN кеширования. В данном плагине эта опция экспериментальная, поэтому может не работать.
• Cache directory. Выберите директорию, куда будет сохраняться кеш картинок.
• JPEG quality. Выберите качество изображений. Большой размер – маленькая скорость загрузки. При качестве 70 из 100 – визуально не будет заметно ухудшения.
• Sharpen images. Установка этой галочки улучшает скорость загрузки изображений в адаптивном дизайне сайта за счёт управления её чёткостью.
• Watch cache. Если поставить здесь галочку, то кеш изображений будет обновлён при обновлении самого изображения.
• Browser cache. Выбирается, сколько времени будет храниться кеш картинок в браузер у пользователя.