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

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

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

…вот эту…

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

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

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

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

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

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

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

72 DPI, весит 149 КБ

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

150 DPI, весит 149 КБ

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

300 DPI, весит 149 КБ

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

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

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

Картинки, распечатанные на одном листе бумаги

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

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

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

PPI

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

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

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

Retina, 398 КБ

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

Не 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. Его бесплатной версии будет достаточно для задач, реализуемых в рамках этого руководства.

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

Плагин WordPress Retina 2x

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

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

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

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

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

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

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

Базовые параметра

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

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

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

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

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

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

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-версия.

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

Автогенерация будет важным настройкою

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

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

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

Ширина картинки составляет 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.

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

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

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

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

При помощи плагина Smush Pro картинки без труда конвертировать в более эффективный формат файлов

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

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

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

Это все

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *