Вставка Data-URI изображений

Довольно часто возникает необходимость «спрятать» свои оригинальные картинки, загруженные на сервер. Тогда использовать традиционный способ вставки изображения (с помощью HTML, например) не рекомендуется, но можно применить технику кодирования с помощью base64 (а если ещё дополнить её gzip-ом, то получается «полный фарш»). Результат кодировки подставляется всё в тот же src. Кроме того, это полезно для каких-то лендингов, когда, по идее, картинки должны подгружаться сразу и целиком, а не по частям. Это уменьшает количество запросов к серверу и скрывает пути к изображениям, чего никак не скажешь о традиционном способе вставки.

Правда, такая штука несовместима с IE7 и ниже, но пора забывать об архаике.

// A few settings
$image = 'myimage.jpg';

// Read image path, convert to base64 encoding
$imageData = base64_encode(file_get_contents($image));

// Format the image SRC:  data:{mime};base64,{data};
$src = 'data: ' . mime_content_type($image) . ';base64,' . $imageData;

// Echo out a sample image
echo '';

Собственно, если вы не используете PHP для формирования страниц, а делаете это «в рукопашную» на HTML и CSS, то для получения кодированной картинки есть масса онлайн сервисов, например, [здесь]. Вперед!

Print Friendly, PDF & Email

CC BY-NC 4.0 Вставка Data-URI изображений, опубликовано К ВВ, лицензия — Creative Commons Attribution-NonCommercial 4.0 International.


4 нравится это

Добавить комментарий