Ви чули, що веб-сторінка стала більш наочною, а великі зображення на веб-сайті бізнесу є важливими.
Але ці образи можуть бути нападом відвідувачів вашого сайту. Зображення складають 1 Мб із 1,7 Мб, що містить середня веб-сторінка.
Це може бути не дуже проблемою для ваших відвідувачів на настільних комп'ютерах, які використовують високошвидкісне підключення до Інтернету. Однак, якщо ви бачите або хочете побачити збільшення трафіку від мобільних відвідувачів, ці зображення можуть бути проблемою. Для завантаження веб-сторінок із значними розмірами зображення може знадобитися багато часу. Відвідувачі розчаровані і залишають ваш сайт.
$config[code] not foundМожливо, ви реалізували реагуючий веб-дизайн, думаючи, що вирішує всі ваші мобільні проблеми. І це правда, що чуйний веб-дизайн вирішує деякі проблеми. Він автоматично впорядковує та відображає елементи вашого сайту для перегляду на менших, вужчих екранах мобільних пристроїв.
Але чуйний веб-дизайн - це не відповідь на все. Це не обов'язково вирішує проблему завантаження зображення. Навіть з реагуючим дизайном, багато разів ці важкі зображення все одно завантажуються. Як викладач веб-ефективності Yoav Weiss лаконічно вказує на веб-сайті Opera:
«Реагуючий веб-дизайн RWD поєднував нові можливості браузера та технології CSS для створення веб-сайтів, які адаптуються до пристрою, що відображає їх, і виглядають ідеально всюди. Це дозволило розробникам перестати турбуватися про ненадійність виявлення пристроїв і вважати свої веб-сайти розмірами вікна перегляду.
Але, незважаючи на те, що сайти RWD виглядали по-різному на кожному пристрої, внизу, більшість з них продовжували завантажувати ті ж ресурси для всіх пристроїв.
Новий
Якщо ви не знаєте нічого про код HTML, нетехнічне визначення: це спеціальна мова. При використанні за лаштунками в коді веб-сайту ця мова дає інструкції щодо того, як браузер повинен відображати текст і зображення. Новий елемент Picture - це мова розмітки HTML. Це написано так (за групою спільноти "Відповідні зображення"): Елемент "Картина" - це реагування зображення, не відповідає дизайн. Для нетехнічних бізнесменів ця відмінність може здатися невеликою. Але коли мова йде про ефективність вашого сайту на мобільних пристроях, вона може бути значною. Відповідно до звіту ArsTechnica, новий елемент розмітки вирішує проблеми, спричинені зображеннями, які мали бачити на повнорозмірному моніторі - зображення, які не перекладаються на мобільні пристрої. The
Коли браузер зустрічає елемент Picture, він спочатку оцінює будь-які правила, які може вказати розробник Web. *** Потім, після оцінки різних правил, браузер вибирає найкраще зображення на основі власних критеріїв. Це ще одна цікава функція, оскільки критерії веб-переглядача можуть включати ваші налаштування. Наприклад, майбутні браузери можуть запропонувати можливість припинити завантаження зображень з високою роздільною здатністю через 3G, незалежно від того, що може сказати будь-який елемент зображення на сторінці. Після того, як браузер знає, який образ є найкращим вибором, він фактично завантажує та відображає це зображення у старому доброму елементі img. … Те, що відбувається - це обтікання зображення тегом img. Якщо браузер занадто старий, щоб знати, що робити з Спочатку не всі розробники прийняли новий елемент зображення. Історія Ars Technica розповідає про процес, через який пройшли лідери спільноти веб-розробників, щоб дістатися до місця, де $config[code] not found Але тепер це питання вирішується, з новим елементом HTML зображення. The
Як ділові люди, важливо знати, що це Реалізація елемента Picture HTML для зображень - це те, про що потрібно обговорити з вашим веб-розробником. Технічно налаштовані та виконавці можуть піти сюди, щоб дізнатися, як використовувати елемент Picture. Це відмінне письмово від Скотта Гілбертсона. Не соромтеся реалізувати
Зображення: Shutterstock; RICG Що таке елемент зображення HTML?
Ключові моменти про
