Чому; оптимізація; ваші зображення з Base64 - це майже завжди погана ідея

На жаль, навіть донині деякі плагіни для оптимізації та блоги пропонують "оптимізувати" ваші зображення, кодуючи їх до Base64 і включаючи це прямо у ваш HTML.

оптимізація

У цьому дописі я хочу розповісти, чому в наші дні це майже завжди дуже погана ідея, яка переноситься з багатьох років тому. Тоді веб-браузери мали великі обмеження на кількість одночасних з'єднань, які вони могли відправити на сервер. Це означало, що веб-сайту, що переносить зображення, потрібно буде поставити в чергу запити та почекати, поки вони закінчаться. Base64 забезпечив спосіб обійти це шляхом використання вже відкритого з'єднання HTTP для доставки зображень, вбудованих безпосередньо в HTML або CSS. Це фактично позбавило потреби в додатковому зворотному турі, необхідному браузеру для кожного з файлів.

З впровадженням мультиплексування, яке надійшло з HTTP/2, веб-браузери стали неймовірно ефективними в доставці сотень файлів через одне з'єднання. Це працює навколо більшості обмежень, вирішених кодуванням Base64, і насправді означає, що Base64 тепер робить більше поганого, ніж корисного.

Щоб отримати відповідь чому, спочатку нам потрібно встановити, що насправді є Base64. Простіше кажучи, Base64 - це схема кодування, яка використовується для представлення двійкових даних у текстовому форматі. Це корисно, коли носій зберігання або доставки не підтримує двійкові дані, наприклад, при вбудовуванні зображення в базу даних, файлах CSS або HTML. Потрібно бути обережним, щоб не змішувати стиснення з кодуванням. Хоча стиснення насправді стискає дані, кодування просто визначає спосіб кодування даних, що підводить нас до першого випуску.

Збільшення розміру завантаження

Хоча Base64 є відносно ефективним способом кодування двійкових даних, він у середньому все одно збільшить розмір файлу більш ніж на 25%. Це не тільки збільшує ваш рахунок на пропускну здатність, але і збільшує час завантаження.

Накладні витрати на процесор