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

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

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

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

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

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

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

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

Доставляючи зображення в Base64, браузер спочатку повинен декодувати кодовані рядки Base64, а потім декодувати і зображення, що створює додатковий шар непотрібної роботи. Base64 дуже ефективний, але враховуйте час обробки GZip або Brotli, який відбувається на сервері, щоб стиснути відповідь, і мілісекунди швидко починають додавати.

Питання кешування

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

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

SEO та користувацький досвід

Проблеми насправді обмежуються не лише продуктивністю. Використовуючи закодовані зображення Base64 на вашому веб-сайті, ви можете також пошкодити як SEO, так і досвід користувачів.

Причиною цього є те, що спільне використання зображень Base64 набагато складніше через те, що вони насправді недоступні через загальнодоступну URL-адресу. Це означає, що веб-сканери та ваші користувачі не можуть отримати посилання, що спрямовують назад на ваш веб-сайт, що значно ускладнює обмін вмістом і може також зашкодити вашому "рейтингу сторінки".

Коли насправді використовувати Base64?

Base64 використовує багато технологій, але якщо у вас немає поважних причин, спробуйте уникати використання його як частини ваших файлів HTML або CSS. Є деякі крайні випадки, коли Base64 може насправді бути корисним.

Одним з таких прикладів можуть бути дуже маленькі зображення, де рядок Base64 насправді менший за довжину рядка URL-адреси та накладні витрати HTTP-запиту при посиланні на файл зображення. Візьмемо для прикладу прозорий PNG розміром 1х1 піксель. Незважаючи на те, що вихідне зображення має розмір лише 68 байт, враховуючи заголовки HTTP тощо, воно фактично виявляється більшим, ніж кодований рядок Base64:

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