Новий екран від Apple під назвою Retina Display став темою розгорнутою дискусії у середовищі веб-дизайнерів та розробників. WordPress-розробники та дизайнери вже почали представляти відповідні рішення, які враховують вимоги нової технології, почали випускати теми та плагіни із вбудованою підтримкою Retina Display.
Чи є мені сенс переробляти мій сайт так, щоб забезпечити його підтримкою дозволу та параметрів Retina Display?
Це питання зараз невідступно переслідує більшість адміністраторів та власників веб-проектів. Сподіваюся, що цей пост допоможе вам вирішити, чи варто оптимізувати свій сайт під параметри та характеристики нових екранів від компанії Apple з технологією Retina Display.
Що таке дисплей Retina?
Retina Display — це зареєстрована торгова марка, яку в Apple використовують для позначення нової технології: її почали використовувати в найсвіжіших версіях екранів для своїх пристроїв, таких як MacBook, iPhone, iPod і iPad. Особливість технології полягає в тому, що вона відображає більше точок на дюйм, ніж будь-який інший із існуючих екранів. Це означає, що зображення на такому екрані будуть особливо чіткими, а рендеринг шрифтів особливо гладким. Тим не менш, варто згадати, що вже зараз є пристрої, де роздільна здатність серед точок на дюйм істотно вище.
У новому Apple Macbook Pro з екраном Retina роздільна здатність екрану складає 2880 × 1800 при щільності картинки 220 пікселів на 1 дюйм. Ви можете подумати, що така роздільна здатність зробить відображення багатьох об'єктів на екрані набагато менше, ніж вони є насправді. Але технологія від Apple дозволяє не тільки використовувати таку високу роздільну здатність, але й збільшує розмір кожного об'єкта в 2 рази, тому всі деталі виглядають точно такими, якими повинні бути, але більш чіткими, згладженими і яскравими.
У чому особливість роботи з дисплеєм Retina?
Мені напевно подобається ідея створити веб-простір з високою роздільною здатністю. На мій погляд, оптимізація сайтів для сучасних пристроїв та використання на повну потужність усіх переваг від нових екранів – це правильний крок у розвитку веб-проектів. Адже на даний момент не тільки користувачі Apple, але й багато інших використовують доступ до веб-сторінок за допомогою моніторів з такою високою роздільною здатністю. Поліпшення поширюватимуться в технологіях виробництва сучасних дисплеїв, і потім зміни у структурі та дизайні веб-сайтів стануть неминучим і важливим, якщо не необхідним елементом створення дизайну.
З іншого боку, власники веб-сайтів повинні взяти до уваги ряд факторів.
По-перше, використання зображень з більш високою роздільною здатністю вимагатиме істотно збільшити час завантаження сторінок, і для сайтів з великим навантаженням і аудиторією це означатиме збільшення трафіку і потреба у вищій пропускній здатності.
По-друге, треба врахувати те різноманіття пристроїв та браузерів, які люди використовують сьогодні: у такому різноманітті важко відсортувати всі браузери та пристрої так, щоб адаптувати ваш сайт для всіх дозволів екрана та параметрів цих пристроїв. Використання "чуйного" веб-дизайну та "гумовийВерстки може вирішити більшість проблем з роботою різних браузерів і дозволів екрану, але такий дизайн також повинен враховувати гнучкі можливості сучасних екранів у пристроях.
Як пристосувати сайт під Retina Display за допомогою WordPress плагінів
Вже зараз є розробники під WordPress, які створюють веб-дизайн з урахуванням викликів індустрії, що виникли, що надають практичні та творчі рішення для нових типів екранів і нових технологій. Зараз є два основних підходи до створення графіки, яка здатна коректно відображатися на екранах Retina Display в WordPress. Сподіваюся, що ми побачимо ще більше вдалих та досконалих рішень для цієї технології.
плагін WP Retina 2x
плагін WP Retina 2x визначає пристрій, за допомогою якого користувач отримує доступ до вашої веб-сторінки, і якщо такий пристрій оснащений екраном Retina, він відображає картинку з високою роздільною здатністю на вашому сайті замість стандартної графіки. p align="justify"> Плагін, написаний Jordy Meow, забезпечує адміністратора панеллю, в якій можна керувати графікою, сумісною з Retina, на вашому веб-сайті. У цій панелі відображається поточний статус файлів у вашій медіа-бібліотеці, кількість тих, для яких є версія під Retina Display, а також та графіка, з якою виникли проблеми.
Цей відмінний плагін забезпечує 2 способи відображення графіки для Retina. Метод "відображення на стороні серверавикористовує PHP визначення пристроїв, які підтримують відображення графіки рівня Retina Display. Метод "відображення на стороні клієнтавикористовує Javascript, але його робота містить у собі всі "за" та "проти" щодо відображення сайтів, сумісних з Retina Display; тому такий метод недостатньо ефективний і при цьому повільний. За умовчанням цей плагін використовує "клієнтський" метод роботи з графікою.
Після встановлення плагін додає вкладку WP Retina 2x у меню адміністратора, що дає вам доступ до панелі керування плагіном. Там ви побачите 2 вкладки для основних та додаткових налаштувань. На сторінці основних налаштувань ви зможете вказати для плагіна ті розміри зображень, які ви не бажаєте регенерувати для екранів із технологією Retina.
Тут доступні розміри середні, великі та малі, ви також можете додати інші розміри графіка, створеної вашими темами, графічними сладейрами або картинками попереднього перегляду на сайті. Я переважно використовую графіку великого або середнього розміру в постах, а картинки попереднього перегляду використовую як допоміжну графіку на головній сторінці та в архіві сайту. Тому їх я відзначати не буду, а також наголошу на інших, які не хочу оптимізувати під високий дозвіл.
Вкладка додаткових налаштувань дозволить вам вибрати між "серверним" та "клієнтським" методами роботи з графікою (про них йшлося вище). Також цей плагін додає вкладку Retina 2x tab у вашу вкладку Медіа на панелі адміністратора сайту. І тут ви зможете побачити статус зображень, які ви завантажили на сайт; побачите, які з зображень мають версію для Retina, а які помилки у відображенні. Автор плагіна рекомендує використовувати параметр плагіна "Увімкнути заміну медіа", що розмістить кнопку, яка дозволить замінювати графіку, поряд із зображеннями, які мають проблеми в коректному відображенні, і так ви зможете легко замінити "проблемні" фотознімки та картинки.
плагін Simple WP Retina
Цей плагін є простим і легким способом додати функціональність сумісності з екранами Retina на ваш сайт. Плагін Simple WP Retina працює на стороні сервера, щоб визначити графіку у високій роздільній здатності та екрани Retina, і показати відвідувачам з такими екранами відповідні графічні елементи. Він простий, не займає багато місця і добре працює.
Однак даний плагін має кілька обмежень. Наприклад, якщо ви використовуєте плагіни для кешування графіки, цей плагін працювати коректно не буде. Тут також немає своєї панелі управління і немає доступного способу для дебаггінгу та контролю того, що він дійсно правильно визначає та відображає графіку в подвоєному розмірі для моніторів з високою роздільною здатністю.
Після встановлення плагін Simple WP Retina не робить автоматичну регенерацію картинок, вам доведеться зробити це самостійно, використовуючи плагін регенерація Ескізи. Він також генерує версії вашої графіки у вирішенні 2х. Так що якщо у вас у темі використовується безліч графіки у різних розмірах та дозволах, всі вони отримають версію з 2x розміром. Цей плагін порівняно новий, так що сподіваюся, що автори його доповнять і покращать його функціональність.
WordPress теми з підтримкою екранів Retina
Я не зміг знайти тему для WordPress, яка автоматично додавала б готові знімки та ілюстрації для Retina Display до списку розмірів графіки, що підтримуються сайтом. Це означає, що більшість тем з підтримкою Сітківка Готовий для WordPress просто заявляють про "сумісність", тому що у них використовується чуйний дизайн та гумова верстка, що дозволяє використовувати графіку з більшими розмірами на пристроях з більшою щільністю пікселів на меншій діагоналі екрану. Ці теми не генерують і не обслуговують коректно графіку 2х для користувача. Тим не менш, графіка, яка використовується в таких темах, може мати версії картинок, збільшених у 2 рази.
Спритний - багатоцільова тема з підтримкою Retina для WordPress
Спритний - Responsive-тема для WordPress, в якій заявлена підтримка екранів Retina. Вона є багатоцільовою темою, що означає: її можна використовувати для бізнес-сайтів, інтернет-журналів, портфоліо або навіть для створення особистого сайту. До теми з коробки пропонується кілька класних можливостей. Тема Nimble поставляється з набором іконок у 2x Дозвіл, і іконки з високою роздільною здатністю використовуються у випадку, якщо визначено пристрій з екраном Retina. При цьому тема не генерує автоматично графіку, сумісну з Retina, так що вам все одно доведеться використовувати плагін, який зробить вам цю роботу. Сама тема йде з іконками та кнопками, які класно виглядають на екрані мобільного пристрою. Графіка у високій роздільній здатності для цієї теми буде по-справжньому чудово виглядати на екранах пристроїв з Retina-дисплеєм.
Чуйний - Безкоштовна тема для WordPress
Чуйний — одна з тем, що найбільш завантажуються в офіційному репозиторії тем для WordPress. Вона є темою, сумісною з Retina Display в тому сенсі, що вона повністю виконана за responsive-технологією, так що коли ви використовуєте плагін Retina Images jQuery або будь-який інший спосіб доставки графіки у високій роздільній здатності, всі вони будуть відмінно працювати з темою Responsive. Назва цієї теми мені не надто подобається, мені здається вона досить "загальною". Це все одно, що корпоративну тему назвати "Corporate Theme". Але крім цієї невеликої незручності з назвою, в цілому Responsive — чудова штука, і якщо ви шукаєте безкоштовну тему, яка використовуватиме всі переваги сучасних пристроїв, тоді вам варто спробувати Чуйний.
Висновок
Вірю, що екрани Retina це лише початок епохи великих змін. Підготовка до таких змін заощадить час для переходу на відображення сторінок у НD, а згодом можливо навіть у 3D. Вважаю, що варто розпочати практику створення дизайну незалежно від типу пристроїв. Застосування векторної графіки у форматі SVG також може стати вирішенням цієї проблеми.
Джерело:WPLift.com
Коментарі до запису: 1
тобто як я зрозумів можна завантажити будь-яку картинку, а ці плагіни дозволять оптимізувати картинку під ретіну?
як оптимізувати картинку вручну (тобто без плагінів)?