Пропустить

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

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

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

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

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

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

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

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

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

Тогда давайте приступим к работе!

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

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

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

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

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

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

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

Читайте также: Как предложить изображения WebP вместо традиционных PNG и JPG

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

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

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

Второй недостаток использования SVG в WordPress - это то, что он не является официально совместимым форматом с WordPress из-за проблем безопасности. Так как файл SVG по сути является файлом XML, это открывает его до все известные уязвимости, связанные с форматом файла XMLтакие как принудительный анализ, атаки внешних объектов XML (XEE), атаки отказа в обслуживании XML (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-совместимые изображения.

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

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

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

3 - WP Retina 2x

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

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

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

Откройте для себя также несколько премиальных плагинов WordPress

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

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. Список авторов Fancy WordPress

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

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

скачать | Демонстрация | веб-хостинг

2. Легкое оглавление

Этот удобный плагин WordPress позволяет вставлять оглавление в ваши персонализированные публикации, страницы и типы публикаций. У этого есть много особенностей, основными из которых являются:

автоматическое управление оглавлением, поддержка тега <! - nextpage–>, поддержка плагина Rankin Math, совместимость с несколькими редакторами страниц, такими как Gutenberg, Дива, Факир, WPBakery Page Builder и другие, возможность выбора, на каких страницах ваших публикаций вы хотите его отобразить, автоматическая вставка оглавления на определенные страницы и многие другие.

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

скачать | Демонстрация | веб-хостинг

3. Расширенное массовое редактирование WooCommerce

Вы регулярно публикуете свой каталог продукции? Независимо от того, у вас есть 100 продуктов или 10.000, этот премиальный плагин WordPress является ИМХО "Должен иметь": (Это первое слово, которое приходит на ум).

Только для нескольких долларов, плагин WooCommerce Расширенный объем Править облегчит жизнь и сэкономит вам чудовищное время. Без колебаний это бомба.

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

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

скачать | Демонстрация | веб-хостинг

Рекомендуемые ресурсы

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

Заключение

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

Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов по созданию интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.

Если у вас есть предложения или замечания, оставьте их в нашем разделе Комментарии.

...

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

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

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

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

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