Як дисплеями з надвисоким дозволом позначаються на вашому сайті?

20

Від автора: коли на ринку вперше з’явилися ретина дисплеї, експерти у веб-дизайні хапалися за голови при одній думці, що їм доведеться працювати з такими дозволами.

З точки зору веб-дизайну це був повний кошмар. Адаптивний дизайн добре справляється з різними розмірами екранів на пристроях, але щільність пікселів стало чимось новим. А тепер Apple випустила ще і iMac з 5К дисплеєм, і багатьох веб-дизайнерів кидає в жар від думки, що їм доведеться знову все масштабувати.

Як дисплеями з надвисоким дозволом позначаються на вашому сайті?

Вся проблема в тому, що користуються, зазвичай, такою технікою тільки веб і графічні дизайнери. Ми постійно апгрейда свої комп’ютери. Ми, люди, завжди шукаємо максимальні можливості за наші гроші. І проблема в тому, що, щоб вся графіка чітко відображалася на таких дозволах, необхідно створювати зображення, які більші звичайних, у 4 рази.

Виникають проблеми

При різкому збільшенні роздільної здатності екрана виникають певні проблеми. Для ретина дисплеїв зображення довелося збільшити в два рази. Зараз вже 5К, і зображення знову доводиться збільшувати в 2 рази. У підсумку отримуємо, що готові зображення в 4 рази більше вихідних.

Обмеження пропускної здатності

Працювати з великими зображеннями не становить праці, коли ви сидите за комп’ютером з високошвидкісним підключенням. Але не можна ігнорувати той факт, що 80% відвідувачів вашого сайту переглядають його через мобільні пристрої. Збільшені в 4 рази зображення (4Х) швидко покладуть 3G і 4G мережі. Доведеться робити для мобільних пристроїв маленькі зображення, щоб прискорити завантаження сторінок і заощадити трафік.

Не забувайте про розмір файлу

Крім пропускної здатності каналу необхідно також пам’ятати і про розмір файлу. При створенні сайту доводиться враховувати різні пристрої і підбирати під них оптимальний розмір файлів зображень. Якщо ви хочете заощадити ресурси, то це серйозна проблема. Парочка зображень в 1-4Мб, у принципі, сильно не ускладнять роботу сайту, а якщо їх тисяча?

Як вирішити ці проблеми?

На щастя, все наше співтовариство працює над способами збільшення розміру зображень. Було б надто незручно обслуговувати безліч версій сайту і сторінок, однак простий скрипт полегшує це завдання.

Зображення

В останній версії photoshop’у з’явилася можливість зберігати зображення відразу в декількох розмірах. Вже тільки ця функція допомагає заощадити кілька хвилин вашого часу, причому вона працює з ретина дисплеями. Adobe залишилося додати функцію збереження зображень в 4Х.

Як дисплеями з надвисоким дозволом позначаються на вашому сайті?

Медіа запити дозволяють працювати з різними розмірами зображень під різні пристрої з різною щільністю пікселів (1, 2 або 4). З їх допомогою можна трохи підвищити чіткість зображень під конкретні пристрої.

Як дисплеями з надвисоким дозволом позначаються на вашому сайті?

Ця програма дозволяє працювати з кожним зображенням під кожного користувача і всіма можливими умовами, які можуть виникнути на різних пристроях. У PictureFill є наступні умови: розмір екрана, розмір вікна браузера, дозвіл екрану і т. д.

Інші проблеми

З урахуванням усіх існуючих проблем і завдань, які ми вже розглянули, необхідно ще врахувати вагу сайту. Величезні зображення зроблять ваш сайт непідйомним. У більшості хостингів ресурси обмежені, а дорогий хостинг не кожен може собі дозволити. І це найбільша проблема, яка змушує вас зменшувати вагу файлу.

SVG

SVG постійно розвивається, а, значить, це відмінний спосіб знизити вагу вашого сайту. Файли SVG мають малу вагу, так що де б ви їх не застосували, це відмінний спосіб скинути пару мегабайт. А адаптивний SVG ще і підлаштовує розмір зображення під розмір екранів на різних пристроях.

Як дисплеями з надвисоким дозволом позначаються на вашому сайті?

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

Стиснення зображень ще один спосіб зменшити вагу вашого сайту. Зображення можна зберігати і не в оригінальному розмірі.
Є кілька безкоштовних сервісів за стиску зображень. Найкращі це WP Smushit, TinyPNG і Optimizilla, виберіть собі один який-небудь. Ви можете випробувати їх усі, щоб вибрати, який найкраще підходить вам. Як приклад, зображення вище стисло до 70%, однак я не помітив візуальних відмінностей. А розмір файлу знизився на 50%.

Сервіси

Якщо у вас проблеми з великою кількістю ресурсів, можна скористатися хостингом зображень, як Amazon Web Services. Відмінний спосіб знизити навантаження на хостинг. У такому випадку потрібно турбуватися тільки за завантаження зображень на сайті, даний спосіб значно полегшує ваш сайт.

Висновок

Ні для кого не секрет, що дозвіл екранів постійно збільшується. Технології постійно ускладнюються і змінюються, і підлаштувати нові пристрої під усі ці зміни може бути важко. Важливо пам’ятати, що веб-технології ростуть одночасно з усіма іншими технологіями.

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