¿Cómo incrustar imágenes en un solo archivo HTML/PHP?

Question

Estoy creando una herramienta liviana de administración de bases de datos de un solo archivo y me gustaría combinar algunos íconos pequeños con ella. ¿Cuál es la mejor manera de incrustar imágenes en un archivo HTML/PHP?

Conozco un método que usa PHP donde llamaría al mismo archivo con un parámetro GET que generaría datos binarios codificados con el encabezado correcto, pero parece un poco complicado.

¿Puedo utilizar algo para pasar la imagen directamente en una declaración CSS background-image? Esto me permitiría utilizar la técnica de sprite de CSS.

La compatibilidad con el navegador no es un problema aquí, por lo que también se aceptan métodos más exóticos.

EDITAR

¿Alguien tiene un enlace/ejemplo de cómo generar datos de URL correctamente con PHP? Me imagino que echo 'data:image/png;base64,'.base64_encode(file_get_contents('image.png')) sería suficiente, pero podría estar equivocado.

Answer 1

Una solución para incrustar una imagen directamente en una página HTML sería el uso de la data URI scheme

Por ejemplo, se puede usar una parte de HTML que se ve así:

<img src="data:image/png;base64, 
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP 
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA 
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J 
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq 
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0 
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" /> 

Hay otras soluciones en la página wikipedia a la que he vinculado:

• incluyendo la imagen como una regla CSS
• Usando algo de Javascript.

Pero tenga en cuenta que esas soluciones no funcionarán en todos los navegadores, depende de usted decidir si esto es aceptable o no, en su situación específica.

Editar: para contestar la pregunta que hizo sobre "cómo generar datos URL correctamente con PHP", tomar un aspecto un poco más baja en la página de Wikipedia sobre el Data URI scheme, que da a esta porción de código (donde se cita):

function data_uri($file, $mime) 
{ 
    $contents = file_get_contents($file); 
    $base64 = base64_encode($contents); 
    return ('data:' . $mime . ';base64,' . $base64); 
} 
?> 

<img src="<?php echo data_uri('elephant.png','image/png'); ?>" alt="An elephant" /> 

Answer 2

¿Algo como esto?

http://www.sveinbjorn.org/dataurls_css

Answer 3

Por un PHP script del lado del servidor de probar un encode base64 del gráfico y el uso de un simple lógica de estilo controlador:

<? 
/* store image mime-type and data in script use base64 */ 
$images = array('photo.png' => array('mimetype' => 'image/png', 
            'data' => '...')); 
/* use request path, e.g. index.php/photo.png */ 
$action = substr($_SERVER['PATH_INFO'], 1); 
switch($action) { 
case (preg_match('/\.png$/', $action)?$action:!$action): 
    header("Content-Type: {$images[$action]['mimetype']}"); 
    /* use expires to limit re-requests on navigation */ 
    $expires = gmdate('D, d M Y H:i:s \G\M\T', filetime(__FILE__) + 365*24*60*60); 
    header("Expires: {$expires}"); 
    $data = base64_decode($images[$action]['data']); 
    header('Content-Length: ' . strlen($data)); 
    echo $data; 
    break; 
... 
} 
?>