Пропустить

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

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

Несмотря на то, что они доступны только в течение нескольких лет, дисплеи Retina - это путь в будущее. Высокая плотность пикселей на дисплеях Retina делает изображения четкими и четкими. А кому не нравятся красивые и четкие картинки?

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

Создание нескольких файлов изображений

Давайте начнем с основ. Самый простой способ поддержать режим Retina для вашего сайта - создать несколько вариантов изображения в разных разрешениях. Это означает, что для каждого типа разрешения (т. Е. @ 1x) необходимо создать версию этого элемента с высоким разрешением (т. Е. 2x).

По сути, вы можете создать несколько версий одного и того же файла и использовать плагин, такой как WP Retina 2x, или скрипт, такой как retina.js, чтобы автоматически генерировать "@2x" версии каждого размера изображения или находить "@2x" изображения и отображать размер, соответствующий каждому устройству.

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Плагины типа " Retinize It , Который представляет собой серию действий Photoshop, которые позволяют легко оптимизировать дизайн для дисплеев Retina. Если вы используете более старую версию Photoshop (pre-CC), вы можете использовать что-то вроде " 4 По сути, это все, что делает текущий инструмент Photoshop Generator, но для более ранних версий Photoshop.

Масштабируемая векторная графика (SVG)

Самый простой способ продвинуться в режиме Retina - это использовать формат Scalable Vector Graphics (SVG) на вашем сайте. SVG - это векторный формат изображения на основе XML. Как следует из названия, SVG-изображение является масштабируемым, что означает, что изображения могут быть растянуты настолько, насколько это необходимо (или немного), при этом оставаясь четкими и четкими. Это может быть быстрым и простым способом внедрения режима Retina без особых усилий.

Тем не менее, есть два недостатка использования SVG на WordPress. Во-первых, поскольку это векторный формат, SVG подходит не для всех изображений. Таким образом, вы можете использовать SVG для логотипов и значков, но не для файлов, таких как фотографии (что немного больно, если вы хотите использовать изображения с высоким разрешением для вашего сайта). Но если вы хотите использовать простые значки, анимацию или иллюстрации, SVG-файлы, безусловно, могут стать вариантом для Retina-совместимого веб-сайта.

Второй недостаток использования SVG в WordPress заключается в том, что он не является официально совместимым с WordPress из-за проблем безопасности. Поскольку SVG-файл по сути является XML-файлом, он открывает его для всех известных уязвимостей, связанных с форматом XML-файла, таких как принудительный анализ, атаки на внешние объекты XML (XEE), атака Атаки типа «отказ в обслуживании» (XDoS) и т. Д.

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

Как безопасно включить SVG на WordPress

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

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Некоторые плагины для интеграции совместимости Retina на WordPress

Существует несколько сценариев и плагинов для совместимости с Retina, которые могут упростить вашу жизнь при попытке настроить Retina-совместимый веб-сайт. Однако, как упоминалось ранее, большинство доступных плагинов и скриптов заменяют ваши изображения изображениями с высоким разрешением только для дисплеев с высоким разрешением. Они не удлиняются, как SVG: вам все равно нужно создавать несколько изображений с разным разрешением.

retina.js

retina.js http://imulus.github.io/retinajs/ - один из наиболее часто используемых сценариев для обслуживания изображений с высоким разрешением. Это скрипт с открытым исходным кодом, который может легко передавать изображения высокого разрешения на устройства с дисплеями Retina.

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

Плотный

Похож на retina.js, Плотный это плагин jQuery, который предлагает простой способ предоставления изображений в формате с соотношением пикселей. Сценарий вызывает метод инициализации $ .fn.dense (), который нацелен на теги «img», которые будут при необходимости использовать Retina-совместимые изображения.

Таким образом, он заменяет все изображения соответствующей версией с высоким разрешением, как и скрипт retina.js.

WP Retina 2x

Последнее можно сравнить с магическим генератором изображений Retina.

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [FREE]

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

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

Эта статья содержит комментарии 0

Оставить комментарий

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
7 акции
доля6
чирикать
Регистрация1