Когда встраивать изображения
При кодировании изображения в Base64 сетевой запрос заменяется файлом большего размера. Это выигрыш для небольших, часто используемых ресурсов — значков, крошечных логотипов, изображений-прокладок — где задержка туда и обратно обходится дороже, чем дополнительные байты. Большие фотографии храните в отдельных файлах.
Использование URI данных в CSS и HTML
URI данных — это просто строка, начинающаяся с data:image/png;base64,. Поместите его в фоновое изображение CSS или в HTML-файл img src, и браузер отобразит его в строке. Этот инструмент генерирует оба фрагмента, поэтому вы можете напрямую вставить нужный.
Компромисс по размеру
Кодировка Base64 увеличивает размер файла примерно на 33%, поскольку она представляет двоичные данные в текстовом виде. Встраивание также означает, что ресурс нельзя кэшировать отдельно на разных страницах. Используйте его намеренно для небольших, важных для страницы изображений, а не для чего-либо еще.
- 01
- Кодирование изображений методом перетаскивания
- 02
- Генерация фрагмента фонового изображения CSS
- 03
- Вывод URI данных HTML img src
- 04
- Мгновенное декодирование Base64
