Плюсове и минуси на използването на retina js. Как да адаптирате изображения за уеб дизайн на Retina дисплеи. Retinize It Photoshop Plugin

С всяка нова джаджа от Apple се появяват все повече и повече екрани с технология Retina Display. Днес Retina дисплеите се намират в iPhone, iPod, iPad и различни модели MacBook, а общият им брой потребители е впечатляващ. Нека научим как да създаваме персонализирани изображения на ретината за вашия сайт, за да изглежда по-интелигентен, по-ярък и по-отчетлив на този тип мощни екрани.

Защо да поддържате ретина екрани?

Първоначално не очаквах, че броят на потребителите на устройства с екрани на ретината ще бъде толкова впечатляващ, защото тази технология започна да се използва сравнително наскоро. Но след това, чрез моя акаунт в Анализ, прегледах статистиката за мобилните джаджи и стигнах до извода, че продуктите на Apple са водещи във всички отношения и на първо място сред тях iPhone, iPod и iPad - и всички те работят на технология на ретината. Що се отнася до 13″ или 15″ MacBook Pro с Retina дисплей, най-популярните потребителски браузъри са Chrome, Firefox, Safari и Internet Explorer. Така че, ако използвате Opera, тогава е вероятно броят на потенциалните посетители на вашия сайт да е по-малък от броя на потребителите на Retina устройства като цяло (поне според статистиката на моя сайт).

Как да създадете изображения на ретината

Може да приемете, че изображенията на Retina се записват при по-висок PPI, но не това е важното. Всичко, което трябва да направите, е да запазите множество копия на вашите Retina изображения с два пъти по-голям размер, така че например изображение от 200x200px да стане 400x400px. След това тези уголемени изображения се показват в оригиналния си размер, позволявайки онези резки, чисти графики на екрани с висока плътност на пикселите.

Звучи просто, но как ще получите тези уголемени изображения?

Създавайте лога и икони в Illustrator

Идеалното решение за създаване на изображения на ретината е векторната графика. Ако вашето лого или икона е във файлов формат EPS или Ai, тогава неговите параметри могат да бъдат променени, преди да бъдат прехвърлени или копирани във Photoshop. Маркирайте елемент като интелигентен обект и той запазва своята векторна форма, така че да може да бъде удвоен и записан отделно като персонализирано изображение на ретината.

Използвайте векторните функции на Photoshop

Photoshop се основава предимно на пикселно изкуство, но това не означава, че няма функции за векторни изображения. Всеки инструмент за преоформяне може да създаде векторен слой вместо пиксели и всичките ви ефекти за оформлението на стила на слоя все още ще могат да се мащабират отново. Когато удвоите мащаба на елементите, всички ефекти ще трябва да бъдат увеличени, за да се създаде почти точно, удвоено копие.

Хитрина за мащабиране на вашите изображения

Един от най-силните принципи на истинските дизайнери е да не увеличавате размера на изображението, но ако вече сте създали сайт и искате да се върнете стъпка назад и да добавите поддръжка на ретината, тогава не ви остава нищо друго, освен да преправяте всяко изображение ръчно. Обикновено мащабирането на изображение води до размазано изображение с много допълнителни линии, но има вратичка в менюто за размер на изображението на Photoshop, наречено Най-близкият съсед. Тази функция ще ви помогне да избегнете замъгляването на вашите изображения и ще остави границите ясни, което я прави полезна за малки икони и твърди обекти. Това няма да доведе до същите резултати като пълното преработване на елемента, но е добра алтернатива за момента.

Какво ще кажете за дизайн, мащабиран до 200% и след това намален отново?

Може би си мислите: „Защо просто не създам свое собствено оформление в двоен мащаб и след това мога да мащабирам обектите до стандартни размери?“ В теорията на печатния дизайн това би проработило, но в уеб дизайна работим на ниво пиксел и създаваме перфектни форми и линии. Дори компресирането на изображения във Photoshop ще доведе до размазано изображение, особено когато става въпрос за малки икони.

Как да кодирате графики на ретината

След като създадете и прехвърлите 2x копия на всички ваши стокови изображения, можете да започнете да ги добавяте към сайта си по различни начини. Няколко думи за името на файла: запазете вашите изображения на ретината директно в папката с изображения със същото име на файл, но с добавяне [имейл защитен]накрая. Например snarf.jpg ще се промени на [имейл защитен]

Просто решение с Javascript

Най-лесният начин да накарате вашите изображения на ретината да работят е да използвате скрипта retina.js. Retina.js ще избере всички @2x изображения във вашия списък с изображения и ще ги преоразмери автоматично.

Използване на ръчен метод [имейл защитен]

заглавие h1 a (
фоново изображение: url(изображения/ [имейл защитен]);
размер на фона: 164px 148px;
}

Друга възможност е да добавите ръчно вашите изображения на ретината, за да запазите целия стил на вашата страница в CSS формат. Междинната заявка съдържа min-device-pixel-ratio: 2 за обекти с два пъти по-голяма плътност на пикселите. По този начин ще замените всяко изображение с неговото удвоено @2x копие, но не забравяйте да върнете изображението към оригиналния му размер с помощта на параметъра за размер на фона.

HTML за вградени изображения

CSS методът е чудесен за фонови изображения, но за изображения, вградени в HTML страница, ще трябва да промените етикетите . Просто добавете изображението @2x към оригиналните атрибути, след което използвайте ширинаИ височиназа връщане на първоначалните настройки.

След появата на устройства с дисплеи с висока разделителна способност, например iPhone, iPad, Samsung Galaxy Note II и, разбира се, MacBook Pro с Retina дисплей, уеб разработчиците и блогърите просто се изправиха пред въпроса за нормалното показване на техните сайтове на тези устройства. По-долу ще обясня как добавих поддръжка за дисплеи с висока разделителна способност на моите сайтове.

Retina дисплеи с висока разделителна способност

Първо трябва да изясним какво представляват дисплеите с висока разделителна способност (Retina е маркетинговото име за дисплеи с висока разделителна способност, използвани в технологията на Apple). Конвенционалните дисплеи, като тези на 15-инчов лаптоп, имат разделителна способност на екрана от 1440 × 900. Това означава, че матрицата на монитора се състои от пиксели (точки) и тази матрица има 1440 точки на дължина и 900 точки на височина.

Всичко е просто, но с появата на дисплеи с висока разделителна способност всичко стана малко по-сложно. За да може човешкото око да вижда не пиксели, а изображения, както на страниците на списание или на истинска снимка, се появиха дисплеи, които за същите 15 инча имат физическа разделителна способност на екрана от 2880 × 1800 пиксела. Точно два пъти по-голям от обикновен монитор. При показване на векторна графика, например елементи на интерфейса, шрифтове, рамки, направени с помощта на CSS на уеб страници, всичко изглежда красиво и прекрасно, но при показване на растерна графика, тоест картини, не всичко е толкова гладко.

Проблем с показване на растерна графика

На конвенционалните монитори на монитора ще се показва и картина от 300 на 200 пиксела - 300 × 200, разбира се, ако не е мащабирана. На матрици с висока разделителна способност картина 300x200 може да се покаже по два начина.

• Като картина с разделителна способност 600×400 пиксела, тогава тя ще заема точно толкова място на екрана, колкото и на обикновен монитор.
• Като снимка с разделителна способност 300 × 200, но тогава тя ще заема половината място на монитор с висока разделителна способност, отколкото на обикновен. Тоест ще бъде наполовина по-малък, защото дисплеите с висока разделителна способност, които имат два пъти по-голяма разделителна способност, са със същия размер като конвенционалните дисплеи.

Опцията по подразбиране при показване на уебсайтове е първата - всички изображения се дублират. Поради това всички изображения на сайта: снимки и особено икони и лога - стават размазани, пример за което дадох в началото на статията.

За да може вашият сайт да се показва перфектно на всички устройства, включително тези с дисплей с висока разделителна способност, е достатъчно да съхранявате всички изображения два пъти по-големи и да посочите реалния размер на дисплея в html:

или в CSS:

Клас на изображението (фоново изображение: url(/image-600x400.png); размер на фона: 300px 200px; )

Това е най-простият начин, но има недостатък - два пъти по-големи снимки ще се дават на всички потребители, включително на обикновените дисплеи. Те ще се показват нормално, точно като обикновените изображения, но имате нужда от два пъти повече трафик, за да изтеглите такива изображения, което е лошо за скоростта и оптимизацията, така че е по-добре да не правите това.

Решение

За да предоставя обикновени изображения на потребители с нормални дисплеи и два пъти по-големи от изображенията с висока разделителна способност, използвам JavaScript retina.js. Оригиналният скрипт се намира на retinajs.com, но имаше някои промени, които бяха необходими на някои места, които вече присъстват в моята версия на скрипта.

Този скрипт проверява по време на зареждане на страницата, за да види дали вашето устройство има дисплей с висока разделителна способност и ако е така, дали вашият сървър има същите изображения, но с име, завършващо на @2x (това е стандартната нотация за изображение два пъти размер, за Retina устройства). Тоест, за изображение src="http://site.com/images-directory/image.png" скриптът ще провери за http://site.com/images-directory/ [имейл защитен], и ако това изображение бъде намерено, ще го покаже на страницата, като зададе необходимата ширина и височина (ширина и височина).

За да използвате скрипта, качете го на вашия сървър и го посочете възможно най-близо до затварящия таг

:

За тези, които използват (по-малко) CSS препроцесор, миксинът може да бъде полезен за избягване на копиране.

Ако откриете грешка или имате въпроси, не забравяйте да пишете за това в коментарите.

Днес ще сложим точка на i по отношение на Retina дисплеите. Най-простото обяснение: Retina е дисплей с висока разделителна способност. Но не само продуктите на Apple имат такива дисплеи. „Ретина дисплей“ е само термин, въведен от Apple, телефоните, таблетите и мониторите също използват технология с висока разделителна способност. Днес такива дисплеи стават все по-често срещани, така че е важно да се създават уебсайтове и приложения, които да ги поддържат добре.

С това казано, позволете ми да обясня какво е ретината е готоваизображения и защо те вървят ръка за ръка с адаптивния дизайн и как да създавате изображения за този много адаптивен дизайн.

Какво означава Retina дисплей?

дисплей тип ретинае марка на Apple, което означава течнокристални дисплеи с висока плътност на пикселите. Изображението по-долу илюстрира по опростен начин как подредбата на пикселите се различава между дисплей с нормална разделителна способност и дисплей Retina. С дисплеите Retina получавате два пъти повече пиксели в пространството със същия размер, отколкото обикновения дисплей. Ето защо иконите или текстът изглеждат по-зле на iPad 2, отколкото на iPad 3.

iPad 3/4 има резолюция от 264 пиксела на инч, а iPhone 4/5 326, докато обикновен монитор е около 100 пиксела на инч, което дава разлика съответно 2,6 и 3,2 пъти. 2 пъти беше казано за опростяване.

Дилема

Дизайнерите и разработчиците вече имат множество типове дисплеи за показване. Това означава 2 неща: потребителите с Retina дисплеи ще трябва да се задоволят с лошо изобразени изображения на сайтове, които не поддържат Ratina, от друга страна, на сайтове с такава поддръжка, всичко ще изглежда много качествено, ясно, точно както ние харесвайте и го очаквайте.

Защо Retina е важна за адаптивния дизайн?

Отговорът на този въпрос е много прост: повечето съвременни мобилни устройства имат Retina дисплеи, така че ако създадете отзивчив сайт за тях, трябва да се погрижите и за Ratina поддръжка, така че вашият сайт да изглежда перфектно. Ако сайтът изглежда добре, тогава потребителят ще получи повече удовлетворение.

Как да създадете готови за Retina изображения за адаптивен дизайн?

Има няколко начина и инструмента за това. Ще разгледаме само основните, тъй като те решават задачата по най-добрия начин.

SVG

Сигурен съм, че вече сте запознати с SVG формата. Жалко е, ако не. Но във всеки случай, нека повторим. SVG е формат на изображение във векторна графика, който може да бъде увеличен до всякакъв размер без загуба на качество чрез използването на вектори. Тъй като векторите образуват специфична форма, а не набор от пиксели, те могат да бъдат манипулирани по всякакъв възможен начин и пак ще изглеждат чисти и чисти. За съжаление, растерните формати като JPG, PNG или GIF не могат да се похвалят с това.

Благодарение на уникалната си способност да преоразмерява безупречно, SVG е чудесен формат за адаптивен дизайн. Без значение какъв размер е дисплеят, изображенията ще изглеждат безупречно на вашия телефон или таблет, както и на вашия монитор. Това работи и за Retina дисплеи, SVG изображенията ще изглеждат по същия начин след преоразмеряване за плътност на пикселите. Следователно SVG трябва да се използва винаги, когато е възможно.

Снимки и растерни изображения

Разбира се, не всички изображения могат да бъдат във формат SVG, особено ако е снимка или готова растерна карта. И за този случай има решение и то се състои в показване на изображението с 50% странични размери. Това, което искам да кажа? Да кажем, че трябва да поставите снимка с размери 150x150 и за това използвате изображение с размери 300x300, но го показвате като 150x150. В този случай изображението на Retina дисплея ще изглежда ясно и висококачествено.

Има няколко начина да използвате двойни изображения на вашия сайт: чрез HTML, CSS или JS. Няма да навлизаме в много подробности, а само да разгледаме основните методи.

Първи начин.Имате изображение, което е 300x300 и го поставяте в HTML и определяте ширина и височина от 150 пиксела.

Вторият начин.Можете да промените височината и ширината на изображението с помощта на CSS или да посочите 50%, ако сте сигурни, че искате изображението да бъде наполовина.

Img(ширина: 50%; височина: 50%;) .box img(ширина: 150px; височина: 150px;)

Третият начин.Ако трябва да използвате такова изображение като фон, тогава имате нужда от следния стил:

Кутия (фоново изображение: url(myIMG.png); размер на фона: 150px 150px; )

Но този метод има и своите недостатъци. Първо, не можете да вземете 2 пъти увеличено изображение от нищото. Очевидно простото увеличаване на мащаба на изображение и след това използването му няма да работи! Освен това, ако вашият сайт има много изображения или някои от тях са просто много големи, тогава с този метод времето за зареждане на сайта може да бъде значително увеличено. Особено като вземете предвид, че повечето мобилни устройства имат много посредствена интернет връзка с малка честотна лента.

Но има начини да избегнете и това.

Медийни заявки

Когато пишете CSS медийни заявки ви позволяват да използвате повече от височината и ширината на екрана на устройството. Следният код ви позволява уверено да определите дали дадено устройство има Retina дисплей. Този метод е най-добър, когато използвате фонови изображения за div, медийна заявка може просто да го замени с по-голямо изображение. В този случай големи изображения ще се зареждат само за устройства с Retina дисплеи.

@media само екран и (-webkit-min-device-pixel-ratio: 2), само екран и (min--moz-device-pixel-ratio: 2), само екран и (-o-min-device-pixel -съотношение: 2/1), само екран и (min-device-pixel-ratio: 2), само екран и (мин. разделителна способност: 192dpi), само екран и (мин. разделителна способност: 2dppx) ( /* CSS за Retina устройства */ )

retina.js

Ако по някаква причина не сте доволни от решението за медийни заявки, помислете за JS опцията. Тук ще разгледаме плъгин за JavaScript, за да решим нашия проблем. „Retina.js е скрипт с отворен код, който улеснява обслужването на изображения с висока разделителна способност за Retina дисплеи.“Този плъгин работи по следния начин: ако имате 2 изображения, едното с нормален размер, а другото двойно увеличено, retina.js открива използването на Retina дисплея и използва подходящото изображение. Работи много просто, така че не забравяйте да го опитате. Всичко, което трябва да направите, за да работи плъгинът, е да наименувате правилно изображенията.

Икони

Благодарение на @font-face и шрифтовете, които използват икони вместо букви, можете лесно да ги използвате вместо изображения. Наистина харесвам този метод поради следните причини: Първо, шрифтовете се мащабират добре, точно като SVG, така че са подходящи не само за различни размери на екрана, но и за различни резолюции, какъвто е случаят с Retina.

Показвам ви как бързо да оптимизирате изображенията на уебсайта си за висококачествено показване на Retina дисплеи, използвани на новите MacBook, iMac, iPhone, iPad и др. Както обикновено, преди това малко теория и моите практически съвети.

Да започнем с определение:

Rétina (от латински retina - ретина) е общото маркетингово наименование на LCD дисплеите, използвани в устройствата на Apple, които се характеризират с толкова висока плътност на пикселите, че човешкото око не може да види, че изображението се състои от тях.

Може би това е краят на теоретичната част. Тези, които се интересуват от устройството на Retina дисплеите, могат лесно да намерят по-задълбочена информация в специализирани ресурси.

И така, вероятно сте забелязали, че на Retina част от графиката на повечето сайтове се размазва. По-правилно е да се каже, че не изглежда много ясно в сравнение с други елементи на интерфейса. Което се забелязва дори с просто око. Не е трудно за разбиране - плаваща растерна графика. Всичко е наред с вектора, той се мащабира перфектно при всяка разделителна способност и всякаква плътност на пикселите. Има няколко начина за справяне с този проблем, разработени са цели библиотеки, с които можете напълно да адаптирате сайта си към Retina. Но днес ще говорим за нещо различно.

Според мен растерната адаптация не е много разумен подход.Вярвам, че е крайно време да се отървете от него в интерфейса и напълно да преведете неговите елементи във векторна графика. Например в SVG. В допълнение, с помощта на новите CSS3 стилове, можете да се отървете от размазване на растерни изображения в градиенти, сенки върху бутони и други елементи на интерфейса. Растерните икони, популярни някога в началото на века, също са умрели отдавна и се използват само от изостанали аматьори. Те бяха заменени от същите векторни SVG и библиотеки с икони на шрифтове, толкова обичани от уеб разработчиците. Ще се изненадате, но интерфейсът на почти всеки сайт може да се отърве от растера без много проблеми.Така завинаги го спасява от проблеми с показването на дисплеи с висока разделителна способност.

Ако не сте успели да се отървете напълно от растера, не се притеснявайте! Няколко растерни изображения в интерфейса на сайта не е проблем и изобщо не е проблем. Ще ви кажа как просто и интелигентно да адаптирате вашата растерна графика, за да се показва правилно на Retina дисплей, като използвате няколко реда CSS.

Без да навлизаме в подробности за ситуацията, нека вземем един прост пример. Вашият сайт има графично сложно лого, което е невъзможно или трудно да се конвертира във векторен формат. Да пропуснем логичните въпроси: как стана така, че няма векторно лого и какво е това лого, което не може да се покаже във вектор. Нашата задача е да направим ясно показването на логото на Retina, като се отървем от сапун.

1. Ще ви е необходимо изображение на лого два пъти по-голямо от оригинала. Например, имате 300x100 px logo.png. Следователно трябва да създадете подобно изображение, но с два пъти по-голям размер, т.е. 600x200 px. Разбира се, не просто чрез мащабиране на старото малко лого във Photoshop. Създаваме нова висококачествена ясна картина, за предпочитане от вектор, наричаме я напр. [имейл защитен] и запазете до основното лого.
2. След това отваряме стиловия файл на вашия сайт в редактора и намираме мястото, където е зададен стилът на показване на вашето лого. Обикновено е нещо подобно:

#logo ( фоново изображение: url("images/logo.png"); фоново повторение: без повторение; дисплей: блок; ширина: 300px; височина: 100px; )

Просто трябва да добавим медийна заявка, така че за дисплеи със съотношение на физически и CSS пиксели по-голямо от 1,5, нашето ново изображение да се зареди logo2x.png

Това се прави много просто:

@media all and (-webkit-min-device-pixel-ratio: 1,5) ( #logo ( background-image: url("images/ [имейл защитен]"); размер на фона: 300px 100px; ) )

Не забравяйте да зададете размерите на фона същите като оригиналното изображение. В нашия случай 300x100 px.

Ясно е, че този метод е препоръчително да се използва за малък брой конкретни изображения.Ако искате да имате поддръжка на Retina, включително в съдържанието, използвайте други методи. За тях ще говорим друг път.

Абонирайте се за моята телеграма и получавате първи нови материали, вкл. които ги няма на уебсайта.

Сега има все повече и повече устройства, оборудвани с екрани с повишена плътност на пикселите, така че при изграждането на модерни сайтове (особено промо сайтове, целеви страници и т.н.) това трябва да се вземе предвид.

Няма да задълбавам в теорията, а ще говоря само за практическото приложение на някои техники.

Основната причина за размазаните изображения на ретиналните екрани е липсата на информация. тъй като един пиксел на изображението е картографиран на четири физически пиксела. С други думи, всички решения се свеждат до това да направят изображенията 2 пъти по-големи или 2 пъти по-малки (изображението не е мащабирано на ретина екрани).

Решение 1 с помощта на html

използвайте изображение, което е 2 пъти по-голямо чрез твърдо кодиране на параметрите за ширина и височина

изображението example2x.png трябва да е 200x400

Решение 1 с JavaScript

Методът е подобен на първия, но малко автоматизиран

$(window).load(function() ( var images = $("img"); images.each(function(i) ( $(this).width($(this).width() / 2); ) ); ));

Решение 1 с CSS

Ако трябва да посочите размерите на фона, а не на изображението, това може да стане по следния начин:

Изображение ( фоново изображение: url(example2x.png); фонов размер: 100px 200px; /* алтернативен фонов размер: съдържа; */ ширина: 100px; височина: 200px; )

Но настройката за размер на фона не се поддържа в IE 7 и 8.

И както можете да видите, всяко от горните решения изисква зареждане на два пъти по-голямо от изображението, независимо дали е обикновен екран или ретина, което не е добре.

Така че трябва да използвате 2 изображения, едно за прости екрани и едно за екрани на ретината.

Решение 2 с CSS

Това се отнася предимно за фонови изображения.

Икона ( background-image: url(example.png); width: 100px; height: 200px; ) @media only екран и (-Webkit-min-device-pixel-ratio: 1,5),
само екран и (-moz-min-device-pixel-ratio: 1,5),
само екран и (-o-min-device-pixel-ratio: 3/2),
само екран и (минимално съотношение на пикселите на устройството: 1,5),
само екран и (min-moz-device-pixel-ratio: 1,5),
само екран и (минимална разделителна способност: 1,5dppx)( .icon ( фоново изображение: url(example2x.png); ) )

където изображението example.png е 100x200, а изображението example2x.png е 200x400

Решение 2 с JavaSctipt

Заменяме снимките с големи, ако е необходимо:

$(document).ready(function()( if (window.devicePixelRatio > 1) ( var lowresImages = $("img"); images.each(function(i) ( var lowres = $(this).attr(" src"); var highres = lowres.replace(".", "@2x."); $(this).attr("src", highres); )); ) ));

Да, и като заключение бих искал да добавя, че дисплеят на ретината не е съвсем правилното име, т.к. е маркетингов термин на Apple и официално се отнася само за нейната технология. Сега обаче се използва за всички екрани с повишена плътност на пикселите.