Пройшло досить багато часу, коли дисплеї Retina на пристроях iOS були вперше випущені, але все ще існує багато веб-сайтів, які не є готовими до Retina, навіть якщо дизайнери та розробники набули досконалості щодо повноцінного мобільного телефону світ.
Ось те, що потрібно знати про варіанти, щоб ваша робота виглядала якнайкраще, на все частіших дисплеях Retina. Хороша новина полягає в тому, що, як може здаватися, це не так вже й складно.
$config[code] not foundНалаштування веб-сайту для зображень, готових до використання сітківки
Подвійне задоволення
Насправді існує декілька способів очищення цього кішки, так би мовити. У першому вам доведеться трохи збільшити свій CSS і включити версії зображень у подвійному їхньому звичайному дозволі. CSS визначить, яке зображення відображатиметься на основі пристрою, на якому переглядається ваш сайт.
Потрібні вам оновлення CSS можуть змінюватись залежно від ваших цільових веб-переглядачів, але хороша новина полягає в тому, що вона зараз не дуже складна і набагато простіша. Ми залишимо фактичне кодування іншим днем.
Майте на увазі: ви можете розробити правила іменування для зображень сітківки, щоб можна було легко асоціювати дві версії зображення, якщо вони потребують подальшого редагування.
SVG
Іншим підходом є SVG або Scalable Vector Graphics. Як випливає з назви, вони обмежені векторною графікою і не працюють з фотографічними зображеннями, але графіка SVG усуває необхідність використання двох файлів зображень для кожної графіки на вашому сайті. Знову ж таки, існують варіації від веб-переглядача до веб-переглядача, тому потрібно виконати додаткові дослідження в залежності від ваших потреб.
І, як зазначено вище, SVG, ймовірно, не буде працювати як єдине рішення на більшості сайтів, якщо сайт не містить фотографій.
Груба сила
Звичайно, ви також можете просто скинути файли з низькою роздільною здатністю і просто подати зображення, готові до Retina. Ми рекомендуємо це лише для використання з дуже чітко визначеною аудиторією. Якщо ви знаєте, що пропускна здатність не буде проблемою, це може бути правильний шлях, але це, звичайно, не найкраща практика
Інші рішення для кодування
На іншому кінці спектра зусиль і елегантності використовуються методи кодування, які спираються на деякі зміни на стороні сервера (наприклад, записи файлу.htaccess), а також кодування PHP і Javascript.
Це може бути ваш найкращий підхід, хоча залучені зусилля можуть не коштувати для менших проектів.
Загалом, підхід, який ви дотримуєтеся, залежатиме від аудиторії, характеру візуальних даних вашого сайту та рівня технічної експертизи вашої команди розробників. Є хороше рішення для майже кожної ситуації. Єдиним поганим рішенням є повністю ігнорування показів Ретіна.
Фото NASDAQ через Shutterstock
