Кодування d; Зображення Base64 і швидкість завантаження
Але що це таке "База 64" Америчний? Для тих, хто не знає, і якщо ми дотримуємося визначення Вікіпедії, "base64 - це кодування інформації, що використовує 64 символи, вибрані для доступності в більшості систем". Ми будемо використовувати це кодування для подання двійкових даних у тексті. Я загубив тебе? вже? Гаразд, кінець вступу.
Файл зображення відсутній на сервері
Щоб пояснити вам щось по-своєму, не кажучи вам про 2 × 6 = 8 + 4 = 12 бітів, як Вікіпедія, ми надсилаємо рядок символів base64 користувачеві Інтернету через схему URI (URI даних, URI = єдиний ідентифікатор ресурсу ) На HTML-сторінці цей рядок декодується браузером для відображення зображення. Замість текстів пісень шукайте URL-адресу цього зображення:
Ти бачив? їх немає. І в цьому вся суть. Але хто виграє? користувачеві Інтернету чи серверу? - Обоє мій капітан!
Менше запитів, але більше байтів
Однією з найбільших переваг цієї техніки відображення для зображень є те, що вона обмежте кількість файлів для завантаження браузером, а отже і кількістю запитів, що призводить до зменшення часу відгуку на веб-сервері.
У разі великого відвідуваності вашого блогу (наприклад, після написання веб-огляду), ви також позбавите свій сервер від кількох з'єднань.
Це також плюс для користувача Інтернету. Ви повинні знати, що браузери мають обмеження кількома одночасними з’єднаннями на один домен. Чим менше буде ресурси, що завантажуються одночасно, тим швидше завантажуватимуться елементи для відображення сторінки. На перший погляд, все це позитивно, але все ж є деякі недоліки.
Перша проблема, Internet Explorer: деякі браузери, як IE5, IE6 та IE7 не підтримують кодування Base64, яке все ще є невеликою частиною.
Друга проблема, вага сторінок: ці дані зображень, що містяться у вигляді тексту у вашому вихідному коді, збільшать розмір вашої HTML-сторінки. Наприклад, для зображення вище, ми додаємо до сторінки 8635 байт (оригінальне зображення JPG важить лише 6459 байт). За допомогою Стиснення Gzip увімкнено на сервері, це дещо зменшує розмір кінцевої сторінки.
Але якщо ми використовуємо кодування зображення base64 для повторюваного зображення між кількома сторінками сайту, ми збільшуємо вагу всіх сторінок, і це не стає настільки вигідним.
3-а проблема, нефізичне зображення: оскільки зображення фізично не знаходиться на вашому сервері, вам доведеться пройти такий кодер: http://www.greywyvern.com/code/php/binary2base64. Кожного разу, коли ви змінюєте своє зображення, вам потрібно буде пройти через інструмент, який виконуватиме кодування. Не дуже гнучке рішення.
Використовуйте кодування Base64 на мою користь
Відповідно до ультраповного тесту на зображеннях base64 проти двійкових файлів, нам слід вибрати таблиця стилів, що супроводжується 5 зображеннями між 130 986 байтами та 5 HTTP-запитами або 133 615 байтами в 1 HTTP-запиті.
Щоб збільшити продуктивність, ми зменшимо час відгуку, а з таблицями стилів, які згодом будуть кешовані, ми не будемо завантажувати кожне зображення в базовій 64 кожного разу, коли завантажується сторінка. Для реалізації зображень на вашому сайті, ось методи зі схемою URI даних дані: [] [; charset =] [; base64],:
Для HTML:
Для CSS:
На щастя, щоб позбавити вас від занять гімнастикою, я модифікую своє зображення, кодую його в base64, PHP створив для вас дуже практичну функцію для кодування в базі 64 на льоту і яка називається base64_encode ().
Наш попередній рядок (за умови, що ми динамічно генеруємо свою таблицю стилів за допомогою правила Apache RewriteRule (. *). Css /$1.php) дасть:
І там стає цікаво. Для таблиці стилів, яка містить близько двадцяти зображень, ми збережемо багато запитів! . Тому в основному в CSS кодування Base64 є важливим для всього, що стосується прикрас/обкладинки сайту. Не забувайте, що спрайти CSS теж існують, але привіт кодування base64 - це справді штука-виродка:)
та Google Images?
Оскільки зображення існують лише віртуально за допомогою тексту, Googlebot-Image/1.0 не буде індексувати зображення цього типу. Це насправді не впливає, якщо ви використовуєте цю систему для своїх таблиць стилів. З іншого боку, це може бути цікаво, але абсолютно незаконно, якщо ви вкрадете вміст зображень і не хочете, щоб вас виявляли. І навпаки, використання кодування Base 64 для зображень, які ви не хочете знаходити в індексі Google Images, є хорошим рішенням (і так, Googlebot і robots.txt не завжди поєднуються).
Висновок: Кодування Base64 корисно для CSS. А ви, ви вже інтегрували свої зображення таким чином?