Come incorporare le immagini in un singolo file HTML/PHP?

Question

Sto creando uno strumento di amministrazione del database leggero e con un singolo file e vorrei raggruppare alcune piccole icone con esso. Qual è il modo migliore per incorporare le immagini in un file HTML/PHP?

Conosco un metodo che utilizza PHP, dove chiamerei lo stesso file con un parametro GET che emetterebbe dati binari con hardcoded con l'intestazione corretta, ma ciò sembra un po 'complicato.

Posso usare qualcosa per passare l'immagine direttamente in una dichiarazione CSS background-image? Questo mi permetterebbe di utilizzare la tecnica CSS sprite.

Il supporto del browser non è un problema qui, quindi anche i metodi più esotici sono i benvenuti.

EDIT

Qualcuno ha un link/esempio di come generare dati di URL correttamente con PHP? Immagino che lo echo 'data:image/png;base64,'.base64_encode(file_get_contents('image.png')) sia sufficiente ma potrei sbagliarmi.

Answer 1

Una soluzione per incorporare un'immagine direttamente in una pagina HTML sarebbe quella di utilizzare il data URI scheme

Per esempio, si potrebbe utilizzare una parte di codice HTML che assomiglia a questo:

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

Ci sono altre soluzioni sulla pagina di wikipedia che ho collegato a:

• compresa l'immagine come regola CSS
• Utilizzo di alcuni Javascript.

Tuttavia, queste soluzioni non funzioneranno su tutti i browser, a te decidere se questo sia accettabile o meno, nella tua situazione specifica.

Edit: per rispondere alla domanda che hai posto su "come generare dati URL correttamente con PHP", prendere uno sguardo un po 'più basso nella pagina Wikipedia sulla Data URI scheme, che dà questa porzione di codice (citando):

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

Qualcosa di simile?

http://www.sveinbjorn.org/dataurls_css

Answer 3

Per uno script PHP lato server provare una codifica Base64 della grafica e utilizzare una semplice logica di controllo in stile:

<? 
/* 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; 
... 
} 
?>