Мы живем в мире высокой четкости. А поскольку большинство из нас проводит более восьми часов в день, глядя на разные типы экранов, качество изображений и символы, содержащиеся на этих экранах, очень важны.
Хотя дисплеи Retina доступны всего несколько лет назад, это путь будущего. Высокая плотность пикселей в дисплеях Retina делает изображения четкими и четкими. А кто не любит красивые четкие изображения?
Обучаться создать сайт совместимость с экранами Retina является важным активом для любого веб-разработчика. К сожалению, не существует идеального решения, позволяющего сделать ваш веб-сайт удобным для пользователей с дисплеями Retina-Ready.
Итак, пока мы ждем, пока кто-нибудь найдет наиболее полное решение, мы рассмотрели некоторые из лучших возможных вариантов подготовки вашего веб-сайта. Таким образом, вы не собьетесь с пути, когда придет время, когда все устройства будут иметь Retina в той или иной форме.
Но прежде чем начать, найдите время, чтобы взглянуть на Как установить тему WordPress, Сколько плагинов я должен установить на WordPress.
Тогда давайте приступим к работе!
Создание нескольких файлов изображений
Начнем с основ. Самый простой способ получить поддержку режима Retina для вашего сайта - это создавать несколько вариантов изображения в разных разрешениях. Это означает, что для каждого типа разрешения (например, 1x) вам необходимо создать версию этого клипа с высоким разрешением (например, 2x).
По сути, вы можете создать несколько версий одного и того же файла и использовать плагин, например WP Retina 2x, или скрипт, например retina.js, для автоматического создания версий «@ 2x» каждого размера изображения или поиска изображений «@ 2x» и отображения размер, соответствующий каждому устройству.
Это правда, что создание нескольких версий одного и того же изображения может занять много времени. К сожалению, не существует быстрого метода, который автоматически генерирует эти изображения для вас. Однако, Есть несколько плагинов Photoshop, которые позволяют быстро восстановить ваши изображения.
Плагины типа " Retinize It Это серия экшенов Photoshop, которые позволяют легко оптимизировать дизайн для дисплеев Retina. Если вы используете старую версию Photoshop (до CC), вы можете использовать что-то вроде " 4 Который в основном делает все, что делает текущий инструмент Photoshop Generator, но для более старых версий Photoshop.
Масштабируемая векторная графика (SVG)
Самый простой способ перейти в режим Retina - использовать на своем веб-сайте масштабируемую векторную графику (SVG). SVG - это формат векторных изображений на основе XML. Как следует из названия, изображение SVG является масштабируемым, что означает, что изображения можно растягивать настолько далеко (или настолько мало), насколько это необходимо, при этом они остаются четкими и ясными. Это может быть быстрый и простой способ без особых усилий реализовать режим Retina.
Читайте также: Как предоставить изображения WebP вместо традиционных PNG и JPG
Однако у использования SVG в WordPress есть два недостатка. Во-первых, поскольку это векторный формат, SVG подходит не для всех изображений. Таким образом, вы можете использовать SVG для логотипов и значков, но не для файлов, таких как фотографии (что немного больно, если вы хотите использовать изображения с высоким разрешением для вашего сайта). Но если вы хотите использовать простые значки, анимацию или иллюстрации, SVG-файлы, безусловно, могут стать вариантом для Retina-совместимого веб-сайта.
Второй недостаток использования SVG в WordPress заключается в том, что это официально не совместимый формат с WordPress из соображений безопасности. Поскольку файл SVG по сути является файлом XML, он открывает его для все известные уязвимости, связанные с форматом файла XML, такие как принудительный анализ, атаки на внешние объекты XML (XEE), атаки типа XML Denial of Service Attack (XDoS) и т. д.
Однако есть способ включить поддержку SVG для вашего веб-сайта, что сделает ваши файлы SVG безопасными.
Как безопасно включить SVG на WordPress
Сейф SVG - это плагин, который позволяет безопасно включить поддержку файлов SVG на вашем веб-сайте. Этот плагин обеспечивает лечение ваших файлов SVG, чтобы предотвратить любые потенциальные уязвимости XML, влияющие на ваш сайт.
Держитесь подальше от плагинов, которые позволяют типу MIME разрешать загрузку из SVG в медиа-библиотеку WordPress, так как они опасны и потенциально вредны для вашего сайта. Так что, если вы действительно испытываете искушение использовать формат SVG в WordPress, будьте осторожны и не загружайте первый плагин SVG, который вы видите.
Увеличьте количество конверсий в своем блоге, прочитав наш типы контента 15, которые генерируют больше посетителей на свой блог
Некоторые плагины для интеграции совместимости Retina на WordPress
Существует несколько скриптов и плагинов для совместимости с Retina, которые могут значительно облегчить вашу жизнь при попытке настроить веб-сайт, совместимый с режимом Retina. Однако, как упоминалось ранее, большинство доступных плагинов и скриптов заменяют ваши изображения изображениями с высоким разрешением только для дисплеев с высоким разрешением. Они не растягиваются, как SVG: вам все равно нужно создавать несколько изображений с разным разрешением.
1 - retina.js
retina.js - один из наиболее часто используемых скриптов для обслуживания изображений с высоким разрешением. Это сценарий с открытым исходным кодом, который упрощает передачу изображений с высоким разрешением на устройства с дисплеями Retina.
Сценарий проверяет каждое изображение на странице, чтобы узнать, есть ли на сервере версия этого изображения с высоким разрешением. Если существует вариант с высоким разрешением, сценарий меняет стандартное разрешение на изображение с высоким разрешением. Это один из наиболее распространенных способов размещения изображений для дисплеев Retina на вашем веб-сайте.
См. Также: GIF, Emojis или Memes: хорошая идея для сайтов WordPress?
2 - плотный
Похож на retina.js, Плотный - это плагин jQuery, который предлагает простой способ обслуживания изображений в формате пикселей. Сценарий вызывает метод инициализации $ .fn.dense (), который нацелен на теги «img», которые при необходимости будут использоваться в качестве изображений, совместимых с режимом Retina.
Таким образом, он заменяет все изображения соответствующей версией с высоким разрешением, как и скрипт retina.js.
3 - WP Retina 2x
Последний можно сравнить с волшебным генератором изображений Retina.
WP Retina 2x - это плагин, который создает файлы изображений, необходимые для устройств с высоким разрешением, и соответствующим образом отображает их вашим посетителям. В отличие от двух предыдущих скриптов, он генерирует изображения с разным разрешением из исходного изображения. Так что, если вам не нравится создавать вручную разные изображения с разным разрешением, этот вариант для вас.
Это все для этого урока, я надеюсь, что оно позволит вам конвертировать ваши изображения в изображение Retina Ready.
Откройте для себя также несколько премиальных плагинов WordPress
Вы можете использовать другие WordPress плагины чтобы придать современный вид и оптимизировать обработку вашего блога или веб-сайта.
Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.
1. Список авторов Fancy WordPress
Как следует из названия, плагин Необычный список авторов WordPress отображает список авторов для вашего сайта в виджете. Имеет простой пользовательский интерфейс, который позволяет отображать информацию любого автора в боковой панели. Все, что вам нужно сделать, это перетащить виджет автора на боковую панель, и плагин сделает всю работу.
Среди его основных особенностей: возможность для отображения авторов блога в увлекательной игровой форме для привлечения новых посетителей, возможность отображать список авторов на боковой панели или на странице, возможность начать соревнование между авторами вашего блога, адаптивный макет, поддержка шорткодов и многое другое.
Скачать | Демонстрация | веб-хостинг
2. Легкое оглавление
Ce Плагин Wordpress удобный для пользователя позволяет вставлять оглавление в ваши сообщения, страницы и пользовательские типы сообщений. Он имеет множество функций, основные из которых:
автоматическое управление оглавлением, поддержка тега , Поддержка плагина Rankin Math, совместимость с несколькими редакторами страниц, такими как Gutenberg, Divi, Elementor, WPBakery Page Builder и другие, возможность выбора, на каких страницах ваших публикаций вы хотите отображать их, автоматическая вставка оглавления на определенные страницы и многие другие.
Это Плагин Wordpress бесплатное программное обеспечение, в котором есть все, что вам нужно для отображения оглавления, поэтому не стесняйтесь выбирать его в качестве первого выбора.
скачать | Демонстрация | веб-хостинг
3. Расширенное массовое редактирование WooCommerce
Вы регулярно редактируете свой каталог продукции? Если у вас есть 100 продуктов или 10.000 XNUMX, это Плагин Wordpress Премиум, по моему скромному мнению, «должен иметь»: (это первое слово, которое приходит на ум).
Только для нескольких долларов, плагин WooCommerce Расширенный объем Править облегчит жизнь и сэкономит вам чудовищное время. Без колебаний это бомба.
скачать | Демонстрация | веб-хостинг
Рекомендуемые ресурсы
Узнайте о других рекомендуемых ресурсах, которые помогут вам создать и управлять своим сайтом.
- источники трафика 5 вы, вероятно, знаете,
- Пример: Содержание маркетинга, как учиться на ошибках
- Почему фрилансерам нужен ежедневный график
- аспекты 7, которые помогут вам создать успешный блог
Заключение
Вот ! Вот и все, что касается этого урока, я надеюсь, что он позволит вам создавать изображения Retina-Ready для вашего сайта. Не стесняйся поделиться с друзьями в ваших любимых социальных сетях.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов по созданию интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.
Если у вас есть предложения или замечания, оставьте их в нашем разделе Комментарии.
...
