Живеем в свят с висока разделителна способност. И тъй като повечето от нас прекарват повече от осем часа на ден, гледайки различни видове екрани, качеството на изображенията и героите, съдържащи се в тези екрани, са много важни.
Въпреки че са достъпни само от няколко години, дисплеите на Retina са пътят към бъдещето. Високата плътност на пикселите в дисплеите на Retina прави изображенията ясни и отчетливи. И кой не обича хубавите, отчетливи изображения?
Да се научиш как да създаваш уебсайт, съвместим с Retina, е важно умение за всеки уеб разработчик. За съжаление, няма перфектно решение за това как да направиш уебсайта си съвместим с Retina.
И така, докато чакаме някой да намери най-пълното решение, разгледахме някои от най-добрите възможни варианти за подготовка на вашия уеб сайт. По този начин няма да се заблудите, когато дойде моментът, когато всички устройства се показват на Retina под една или друга форма.
Но преди да започнете, отделете време, за да разгледате Как да инсталирате WordPress тема, Колко плъгини трябва да се инсталира на WordPress.
Тогава нека да работим!
Създаване на множество файлове с изображения
Нека започнем с основите. Най-лесният начин да получите поддръжка на режим Retina за вашия уеб сайт е да създайте множество вариации на изображения в различни разделителни способности. Това означава, че за всеки тип резолюция (т.е. 1x), трябва да създадете версия на този клип с висока разделителна способност (т.е. 2x).
По принцип можете да създадете множество версии на един и същ файл и да използвате приставка като WP Retina 2x или скрипт като retina.js, за да генерирате автоматично версиите "@ 2x" за всеки размер на изображението или да намерите изображения "@ 2x" и да покажете размер, съответстващ на всяко устройство.
Вярно е, че създаването на множество версии на едно и също изображение може да отнеме много време. За съжаление няма бърз метод, който автоматично да генерира тези изображения вместо вас. Въпреки това, има няколко Photoshop плъгини, които ви позволяват бързо да поправите вашите изображения.
Приставки като „ Върнете я Която е поредица от действия в Photoshop, които ви позволяват лесно да оптимизирате дизайна си за дисплеи на Retina. Ако използвате по-стара версия на Photoshop (pre-CC), можете да използвате нещо като " Четири Което основно прави всичко, което прави текущият инструмент на Photoshop Generator, но за по-старите версии на Photoshop.
Скалируема векторна графика (SVG)
Най-лесният начин да продължите с режима на Retina е да използвате Scalable Vector Graphics (SVG) на вашия уебсайт. SVG е базиран на XML формат на векторно изображение. Както подсказва името, SVG изображението е мащабируемо, което означава, че изображенията могат да бъдат разтегнати доколкото е необходимо (или толкова малко), колкото е необходимо, като същевременно са ясни и ясни. Това може да бъде бърз и лесен начин за внедряване на Ретина на Ретина без много усилия.
Прочетете още: Как да предоставим WebP изображения вместо традиционните PNG и JPG
Има обаче два недостатъка при използването на SVG в WordPress. Първият е, че тъй като е векторен формат, SVG не е подходящ за всички изображения. Така че можете да използвате SVG за лога и икони, но не и за файлове като снимки (което е малко болезнено, ако искате да използвате изображения с висока разделителна способност за вашия уебсайт). Но ако искате да използвате прости икони, анимации или илюстрации, SVG файловете със сигурност могат да бъдат опция за съвместим с Retina уебсайт.
Вторият недостатък на използването на 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 режим, ако е необходимо.
И така, той замества всички изображения със съответната версия с висока разделителна способност, точно като скрипта retina.js.
3 - WP Retina 2x
Последното може да се оприличи на магически генератор на изображения на Retina.
WP Retina 2x е приставка, която създава файлове с изображения, изисквани от High-DPI устройства, и съответно ги показва на посетителите си. За разлика от предишните два скрипта, той генерира изображения с различна разделителна способност от първоначално изображение. Така че, ако не сте прекалено доволни от ръчното създаване на различни изображения с различна резолюция, тази опция е за вас.
Това е всичко за този урок, надявам се, че ще ви позволи да конвертирате вашите изображения в изображение на Retina Ready.
Открийте и някои премиум приставки за WordPress
Можете да използвате други WordPress плъгини, за да придадете модерен вид и да оптимизирате сцеплението на вашия блог или уебсайт.
Предлагаме ви тук няколко премиум WordPress приставки, които ще ви помогнат да направите това.
1. Една фантазия WordPress Автор Списък
Както подсказва името, приставката Fancy WordPress Списък с автори показва списъка с автори за вашия уебсайт в джаджа. Той има прост потребителски интерфейс, който позволява покажете информацията на който и да е автор в страничната лента. Всичко, което трябва да направите, е да плъзнете джаджата за автора към страничната лента и плъгинът ще свърши работата.
Основните му характеристики са, наред с други: възможността за показване на авторите на блога по забавен начин за привличане на нови посетители, възможност за показване на списък с автори в страничната лента или на страницата, възможност за започнете състезание между авторите на вашия блог, отзивчиво оформление, поддръжка за къси кодове и много други.
Изтегляне | демонстрация | уеб хостинг
2. Лесна таблица на съдържанието
Този лесен за употреба плъгин за WordPress ви позволява да вмъквате съдържание в публикациите, страниците и персонализираните типове публикации. Той има много функции, основните от които са:
автоматично управление на съдържанието, поддръжка на маркера , Поддръжка на плъгин Rankin Math, съвместимост с няколко редактора на страници като Gutenberg, Divi, Elementor, WPBakery Page Builder и други, възможността да изберете на кои страници искате да го показват вашите публикации, автоматично вмъкване на съдържанието на определени страници и много други.
Това е безплатен плъгин за WordPress, който има всичко необходимо за показване на съдържанието, така че не се колебайте да го изберете като свой първи избор.
Изтегляне | демонстрация | уеб хостинг
3. WooCommerce Разширено групово редактиране
Публикувате ли редовно продуктовия си каталог? Независимо дали имате 100 продукта или 10.000 XNUMX, този първокласен плъгин за WordPress е по мое скромно мнение „задължителен“: (Това е първата дума, която ми идва на ум).
Само за няколко долара, плъгина WooCommerce Advanced bulk Edit ще улесни живота и ще ви спести чудовищно време. Няма колебание, че е бомба.
Изтегляне | демонстрация | уеб хостинг
Препоръчителни ресурси
Научете за други препоръчани ресурси, които да ви помогнат да изградите и управлявате вашия уебсайт.
- 5 източници на трафик вероятно знаете
- Казус: Съдържание маркетинг, как да се учим от грешките си
- Защо фрилансерите се нуждаят от ежедневен график
- 7 аспекти, които ще ви помогнат да се създаде един успешен блог
Заключение
Тук ! Това е всичко за този урок, надявам се, че ще ви позволи да създадете готови за Retina изображения за вашия уебсайт. Не се колебайте споделяйте с приятелите си в любимите си социални мрежи.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress.
Ако имате предложения или забележки, оставете ги в нашия раздел Връзка.
...