Как создать Retina-оптимизированные изображения, которые не замедляют работу WordPress

В этой статье я расскажу, как создать в WordPress изображения высокого разрешения для Retina-устройств. Я покажу, как сделать из этой фотографии...

…вот эту…

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

Руководство для WordPress по Retina-изображениям

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

Разрешение изображения влияет на качество его отображения на устройстве пользователя.

При этом показатель DPI (количество точек на дюйм) не влияет на то, как изображение отображается на сайте. Посмотрит на эти изображения, которые были сохранены с разными DPI:

72 DPI, весит 149 КБ

150 DPI, весит 149 КБ

300 DPI, весит 149 КБ

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

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

Изображения, распечатанные на одном листе бумаги

Разрешение указывает, насколько плотно вы хотите отображать данные изображения. Если изображение размером 100 на 100 пикселей, то у меня есть данные на 10 тыс. пикселей.

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

Разрешение не меняет объем данных в изображении.

PPI

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

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

Retina, 398 КБ

Не Retina

Retina-экраны пытаются распределить данные по всей поверхности. Для пустых пикселей они пытаются использовать данные из пикселей, расположенных вокруг них. Чтобы это исправить, нужно предоставить WordPress более плотные изображения.

Шаг 1: Создать изображения с удвоенными размерами в пикселях

Чтобы создавать в WordPress Retina-изображения с достаточным количеством данных для каждого пикселя, необходимо удвоить размеры в пикселях для каждого загружаемого изображения.

Если есть большое фото шириной 1600 пикселей и высотой 400 пикселей, вам нужно создать изображение шириной 3200 пикселей и высотой 800 пикселей. Если ширина страницы 800 пикселей, то изображения для записей, опубликованных в блоге должны, иметь ширину 1600 пикселей и т. д.

Нужно удвоить размеры в пикселях для максимально возможного размера, в котором изображение будет отображаться. Не следует создавать изображения с удвоенными размерами для каждого адаптивного размера.

Вы можете сохранить изображения, указав в имени @2x перед расширением файла. Но это не обязательно, так как приведенный ниже плагин сделает это за вас.

Как оптимизировать загруженные изображения под Retina-экраны?

Создание Retina-оптимизированного сайта может занять много времени, если у вас большое количество контента. Нельзя просто загрузить изображение и увеличить его в Photoshop, иначе вы получите размытые копии.

Шаг 2: Предоставьте изображения для Retina- устройств

Есть много разных способов сделать это. Я собираюсь показать вам два из них.

Вариант 1. Вручную изменить атрибут srcset в WordPress

Одним из лучших способов предоставления Retina - изображений является использование атрибута srcset.  Вместо использования атрибута src вы предоставляете браузеру список изображений на выбор. Затем браузер отображает изображение, наиболее подходящее для пользовательского устройства. Этот подход также можно использовать для отображения изображений различных размеров или сохраненных в разных форматах.

В атрибуте srcset нужно указать изображение для устройств, не поддерживающих Retina. А также версию изображения для Retina-устройств.

Кроме этого нужно использовать атрибут src для браузеров, которые еще не поддерживают srcset .

Пример реализации:

<img srcset="logo_regular.jpg 1x, logo_retina.jpg 2x" src="logo_regular.jpg"/>

Видите в этом коде 1x и 2x? Это помогает браузеру определить, какое изображение является обычным, а какое для Retina.

Если у пользователя Retina-устройство, браузер будет использовать 2x изображение. Если устройство не поддерживает технологию Retina, браузер выведет версию 1x. А если браузер не поддерживает srcset, он будет использовать источник, указанный в атрибуте src.

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

Элемент <picture> дает нам больше возможностей:

<picture>
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="my image" width="100" height="100">
</picture>

В результате браузеры, которые не поддерживают элемент HTML5  <picture>, вернутся к изображению, указанному в элементе <img>.  Использование <img> - это обязательное требование, и он должен указываться последним.

Но самая важная часть <picture> - это элемент <source>, который спрятан внутри. Он позволяет указывать медиазапросы в атрибуте media.

Чтобы предоставить браузеру различные варианты адаптивного изображения, нужно вставить в элемент  <picture> несколько элементов  <source> . Затем с помощью атрибута media сообщить браузеру, когда их использовать.

После этого вы добавляете Retina-изображение и обычное изображение в атрибут srcset элемента <source>. Рассмотрим пример:

<picture>
 <source
   media="(min-width: 900px)"
   srcset="large-image_1x.jpeg 1x, large-image_retina.jpeg 2x"
   type="image/jpeg >
 <source
   media="(min-width: 601px)"
   srcset="medium-image_1x.webp 1x, medium-image_retina.jpeg 2x"
   type="image/jpeg" >
 <source
   media="(max-width: 600px)"
   srcset="small-image_1x.webp 1x, small-image_1x.jpeg 1x"
   type="image/jpeg" >
 <img
   src="large-image_1x.jpg"
   type="image/jpeg"
   alt="my image description">
</picture>

Много кода? Тогда используйте специализированный плагин.

Вариант 2: Установить и настроить плагин WordPress Retina 2x

WP Retina 2x  - бесплатный плагин из репозитория WordPress. Его бесплатной версии будет достаточно для задач, реализуемых в рамках этого руководства.

Плагин WordPress Retina 2x

Преимущества плагина:

1. Не нужно вручную редактировать HTML-код, чтобы добавить Retina- изображения.
2. Retina 2x не требует переименования всех изображений, чтобы идентифицировать их как версии для Retina.
3. Совместим с плагинами кэширования.
4. Позволяет отслеживать, какие изображения должны иметь Retina-версию.
5. Плагин предоставляет несколько вариантов обслуживания Retina-изображений.
6. Совместим с плагинами Smush и Smush Pro.

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

Плагин Smush поможет оптимизировать изображения, а плагин Smush Pro подарит дополнительное преимущество.

Smush Pro CDN может автоматически конвертировать изображения в файлы WebP, которые намного меньше, чем файлы в форматах JPEG и PNG. Сервис также изменяет размер изображения.

Как настроить плагин для создания изображений для Retina-дисплеев

Рассмотрим некоторые настройки плагина WordPress Retina 2x.

Базовые настройки

«Отключенные размеры» позволяют избежать преобразования определенных размеров изображений в Retina для экономии места на диске.

«Качество Retina» позволяет установить качество сжатия для JPEG.

Важным параметром на этой странице является «Метод». У вас есть несколько вариантов предоставления Retina-изображений.

Если какой-то метод не подходит, выберите другой.

PictureFill 

PictureFill – рекомендуется для обслуживания Retina-изображений в WordPress. Он использует полифилл JavaScript для загрузки изображений или переписывает HTML-код для использования атрибута srcset.

Адаптивные изображения

Чтобы использовать метод «Адаптивные изображения», потребуется WordPress 4.4 и выше. Плагин добавляет Retina-изображения к исходному набору.

Retina.js

Этот метод полностью основан на JavaScript. HTML-код загружает и обычное изображение. Если будет обнаружена поддержка Retina, он также загружает Retina-изображение.

Перезапись HTML

Метод «Перезапись HTML» при обнаружении Retina- устройства изменяет атрибуты src. Но могут возникнуть проблемы при совместном использовании с некоторыми плагинами кэширования.

Retina – Image

Данный метод модифицирует файлы .htaccess, чтобы предоставлять соответствующие файлы изображений. Метод не будет работать, если вы используете CDN.

Расширенные настройки

В разделе «Расширенные настройки» активируй те параметр «Автогенерацию», чтобы при загрузке изображений автоматически создавалась Retina-версия.

Автогенерация является важным параметром

Шаг 3: Загрузите Retina-изображения в WordPress и используйте их на своем сайте

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

Ширина изображения составляет 1200 пикселей. Но мне нужно использовать версию шириной в 600 пикселей, чтобы получить качество Retina.

Плагин распознает только изображения, созданные с помощью библиотеки мультимедиа. К изображениям, которые плагин не распознает (иконки тем и логотипы), нужно добавить к именам файлов @2x (перед расширением .png или .jpeg). Затем загрузить файл в то же место, что и оригинал, используемый WP Retina 2x. Так плагин сможет распознать его как Retina-файл и использовать на совместимых устройствах.

Например, если есть иконка сайта icon.png 200 на 200 пикселей, вам нужно создать ее версию размером 400 на 400 пикселей, переименовать в icon@2x.png и загрузить через FTP или SFTP в ту же папку, где находится файл icon.png.

Возможные проблемы с WP Retina 2x

Могут возникнуть проблемы, если у вас установлены  плагины для создания слайд-шоу или несовместимые CDN. Например, известно, что CDN WP Engine вызывает проблемы. Поэтому вам придется изменить правило перезаписи в настройках WP Engine. Если вы используете Amazon S3, вам не следует применять плагин WP Retina 2x.

Если вы хотите использовать CDN, который работает только с WP Retina 2x и не замедляет работу WordPress, рекомендую вам попробовать Smush.

Чтобы активировать Smush Pro CDN, установите плагин Smush Pro. Затем в настройках Smush, перейдите в раздел CDN и нажмите  кнопку Get Started.

Smush CDN входит в состав Smush Pro

После того, как вы активируете CDN, включите параметр WebP conversion. Файлы изображений, сохраненные в формате WebP, занимают существенно меньше места. Вы можете получить полное представление о преимуществах здесь.

С помощью плагина Smush Pro изображения легко конвертировать в более эффективный формат файлов

Вы также можете включить автоматическое изменение размера изображений. Для этого активируйте параметр «Включить автоматическое изменение размера изображений» в настройках Smush Pro CDN.

Установите переключатель «Включить автоматическое изменение размера изображений», чтобы ускорить работу WordPress.

Это все

Использование Smush Pro CDN и плагина WP Retina 2x является лучшим способом обслуживания большинства Retina-изображений в WordPress.  При этом другие посетители не почувствуют изменений в производительности.