Кодуйте свої зображення в base64 Bellami
Кодування зображень у base64 є одним із хороші практики веб-оптимізації. Це кодування перетворює файл зображення в ряд символів. Це дозволяє значно зменшити кількість запитів надсилається веб-сервером браузером. Але цей принцип не можна узагальнити для всіх зображень, ви повинні знати, як ним економно користуватися.
Як кодувати в base64
Зазвичай зображення, яке відображається на веб-сторінці, є зовнішнім із веб-сторінкою файлом зображення. Наприклад, у вихідному коді цієї сторінки ви знайдете такий код: Це означає, що коли браузер завантажує веб-сторінку, він колись попросить завантажити файл зображення. Тому браузер надсилає запит веб-серверу, який потім доставить зображення браузеру. Таким чином, загальний час відображення зображення є сумою часу відповіді на запит та часу завантаження зображення. Кодування вашого зображення в base64 буде видалити цей запит оскільки символи, що складають зображення, вставляються в HTML на веб-сторінку таким чином: Веб-сторінка більше не використовує зовнішній файл, зробіть це, щоб 10 графічних дзвінків, і ви заощадите близько 1 секунди на вашій сторінці завантажується! Прибуток далеко не мізерний.
Кодування Base64 також можна використовувати в CSS, тому весь ваш вміст та дизайнерські зображення можуть від цього отримати вигоду.
Недоліки кодування base64
Недоліком кодування base64 є те, що загальна вага зображення збільшується в середньому на 50%. Оскільки час запиту дуже короткий, в середньому близько 100 мс, лише маломасштабні зображення слід перетворювати в base64 для підвищення продуктивності.
Крім того, майте на увазі, що кодування base64 не зрозуміле в Internet Explorer 7 і старіших версіях. Для цих браузерів існують обхідні шляхи, але це не суть статті, ані моя філософія того, що потрібно зламати браузер. Це додасть додатковий обчислювальний час для IE7, який йому насправді не потрібен, враховуючи його повільний оригінальний дисплей.
Але ця непідтримка певних версій IE накладає в деяких випадках додаткове обмеження: вибирайте зображення, які можуть не відображатися в IE7 і нижче.
Обмежте використання зображень, закодованих base64
Якщо для сайту потрібна підтримка IE7, вам слід звернути увагу на дві різні проблеми:
_ Не всі зображення вмісту повинні кодуватися base64, оскільки вони за визначенням важливі для відображення, якщо ви не впораєтеся з текстом alt, який зазвичай не подобається вашому клієнту/босу.
_ Перетворіть дизайнерські зображення в base64, які, на вашу думку, не потрібні для належної роботи сайту. Наприклад, можна запитати: "Якщо я кодую це зображення (яке є стрілкою, що натискається для відображення наступної фотографії), чи зрозуміє користувач IE7, що ця функціональність існує? Якщо відповідь позитивна, спробуйте!
Для технічних деталей base64 я запрошую вас прочитати статтю Вікіпедії про base 64.
Для кодування його зображень у base64 я рекомендую таку веб-службу: http://www.motobit.com/util/base64-decoder-encoder.asp.
Щоб зробити Internet Explorer сумісним з base64, я запрошую вас прочитати чудову статтю Діна Едвардса: Кодовані зображення Base64 для Internet Explorer
Таким чином, для покращити роботу свого веб-сайту, необхідно кодувати в base64 лише зображення невеликого розміру. Якщо підтримка Internet Explorer 7 життєво необхідна для вашого сайту, можна перетворити лише певні зображення вторинного дизайну. А у вас, чи є у вас відгуки від використання кодування base64?