LPgenerator - професійна Landing Page платформа для збільшення продажів вашого бізнесу
МАГАЗИН Лендінзі НАВЧАЛЬНИЙ КУРС АКЦІЇ ВІД ПАРТНЕРІВ
Почніть користуватися SVG
SVG (від англ. Scalable Vector Graphics - масштабована векторна графіка) - це мова розмітки XML для зберігання векторних зображень. Замість того, щоб використовувати пікселі, для представлення даних зображення (більш знайомі як JPEG, GIF і формати файлу PNG), SVG використовують ряд пунктів, названих "векторами", які відзначені на двовимірної координаційної сітці. Більшість професіоналів створює векторну графіку в векторної креслярської програмі Adobe Illustrator, але вільні мережеві інструменти як Method Draw і Mondrian можуть також створити зображення SVG.
SVG ідеальні для мережі, так у них є необмежена дозвіл і дуже маленькі розміри файлу. Іншими словами, Ви можете збільшити до SVG все, що Ви хочете, і це будуть завжди виглядати чітко. Тому файли SVG представляють зображення в якості серії координат, які формують форми, а не піксельні дані. Ці форми, в свою чергу, автоматично спроектовані в фізичну піксельну сітку, незалежно від її дозволу. Якщо Ви оптимізуєте зображення з інструментом як SVGO-GUI, розміри файлу можуть бути ще менше.
Головним чином, SVG гарні для представлення графічних образів, але це не означає, що SVG хороший у всьому. Для таких зображень як фотографії або твір мистецтва, Ви повинні використовувати формат файлу, заснований на растрі, який використовує пікселі. Однак, спочатку Ви повинні спробувати використовувати SVG для всіх своїх зображень, і тільки в таких випадках як фотографії або твір мистецтва Ви можете використовувати інший формат.
Після стількох років невідповідності браузера, нарешті, прийшла епоха SVG. Всі сучасні браузери поряд з IE9 + має підтримку SVG. (Джерело: caniuse.com). Однак, Ви повинні придумати прогресивну стратегію поліпшення, якщо Ви думаєте, що Ваші сторінки не будуть працювати у користувачів IE8.
Масштабування растрового зображення
SVG - це не залежить від дозволу, таким чином, не потрібно змінювати масштаб зображень. Однак, засновані на растрі формати файлу як JPEG і PNG мають абсолютна здатність в пікселях. Всі подібні фактори показують, що чим більше пікселів, тим довше завантаження сторінки.
Що б там не було мережа не має справу з пікселями; це щось на кшталт рідкого середовища, яка виглядає по-різному на різних екранах. Іноді необхідно щоб браузер повторно змінив масштаб зображення так, щоб він працював в чуйну дизайні. Однак, якщо Ви надсилаєте більше піксельних даних, ніж записано на пристрій, і зображення пропорційно змінюється, то в підсумку виходить, що мережа даремно витрачаємо смугу.
Ви повинні оптимізувати зображення так, щоб вони не були більше, ніж найвища дозвіл, на якому вони можуть бути показані. Це основна причина того, що SVG настільки великі. Тим не менш, частіше за все ми розглядаємо монітори приблизно 27 '- 2560 × 1440 і нижче.
Але все ж у нас є шляхи відступу. Найкраще відправляти пікселі тільки на ті пристрої, які здатні їх прийняти. Зусилля Responsive Images Community Group і Zurb Interchange допомагають просувати в цій області.
SVG ідеально підходить для зображень, зроблених з великих частин і гострих ліній, в той час як JPEG підходить для фотографій і картин. Але іноді графічний об'єкт може не мати доступною SVG версії і стислі об'єкти JPEG можуть виглядати жахливо в плоских областях кольору і з гострими лініями. У Вас може також бути растрове зображення з деякими прозорими областями, які повинні пропускати фонове сяйво. У цих випадках кращий формат - файл PNG, який буває в двох варіантах - PNG-8 і PNG-24.
PNG-8 використовує адаптивну колірну палітру, де є 256 кольору. Один з тих квітів може бути для прозорості, але ця прозорість подвійна (піксель або на 100% прозорий або на 100% непрозорий). Це означає, що будь-які переходи між непрозорими і прозорими областями будуть надзвичайно різкі і без часткової градації. Якщо у PNG-8 будуть будь-які зовнішні пікселі, які головним чином легкі, і він поміщений в темний фон, то краю будуть виглядати зубчастими. Великий плюс у тому, що розміри файлу мають тенденцію бути досить розумними.
PNG-24 здатний працювати в повно кольоровості і повної альфа-прозорості (пікселі можуть бути частково прозорими), що приводить до красивої тонкої прозорості. Часто це єдиний спосіб подарувати частково прозорим фотографічним такі обриси як, наприклад, волосся або розпливчасті краю. Мінус - те, що ці зображення виробляють найбільші розміри файлу будь-якого формату зображення.
Використовуйте анімацію GIF дуже економно
Створюючи растрову графіку DPI пристроїв з екранами як "retina" Apple, звичайно, Ви повинні постачати зображення в 2x або 3x нормального розміру. Це пристрої, у яких є більш високе число фізичних пікселів на екрані, в порівнянні з "віртуальними пікселями". На сучасному iPhone, якщо передбачається, що зображення заповнює 200 px на 200 px на інтернет-сторінці, то Ви повинні фактично поставити файл 400 px на 400 px. Інакше зображення будуть виглядати розпливчастими.
Завантажуйте JPEG правильно
Зображення JPEG зазвичай завантажуються, починаючи з верхньої частини зображення і проглядаються вниз. Однак, їх можна завантажувати "прогресивним" методом, коли спочатку завантажується розпливчасте зображення, а потім поступово воно стає більш чітким. Це не збільшить часи вантажу сторінки, але це збільшить час сприйняття оком і буде здаватися, що веб-сторінка завантажує швидше. Людське око може зосередитися на невеликій частині екрану один раз, таким чином, заповнення областей з великими краплями кольору і потім поступове збільшення їх чіткості зазвичай виглядає швидше, ніж коли ми дивимося, як зображення вантажиться зверху вниз.
УВАГА! Ви використовуєте застарілий браузер Internet Explorer
Даний сайт побудований на передових, сучасних технологіях і не підтримує Internet Explorer 6-ої і 7-ої версії.
