data URI

    A couple of years ago, I dealt with the problem of data URLs in Internet Explorer , I achieved certain results, but what happened was impossible to use. Data URL (sometimes also called the “data protocol:”) - the ability to embed resources (graphics, CSS, JavaScript, and so on) in HTML code.


    You can learn more about the data URL from the latest article on "Habr" " Pictures in the body of the page using data: URL ". I just wanted to supplement it with two remarks: IE8b1 supports data URLs with a length of no more than 32Kb , in modern versions of other browsers it was not possible to see the restrictions, Safari / Opera / FF showed images of about 700Kb in size.


    Now the ambulance.


    Last night I came up with the idea of ​​how to try to correctly combine the data URL and the inclusion of images via the mhtml protocol. What I didn’t succeed two years ago is now.


    The result is a ready-made PHP code of two functions. The first function ("bolk_data_uri_header") must be called at the very beginning before the output of any of your code, the second ("bolk_data_uri") actually to include the picture in the code.


    I hope everything is clear with examples:
    bolk_data_uri_header ();
    bolk_data_uri ('myjpeg.jpg');
    bolk_data_uri ('ourpng.png', 'border: 2px dotted red');
    


    Code of the library itself:
    function bolk_data_uri_header () 
    { 
        echo " \ n \ n";
    } 
    function bolk_data_uri ($ file, $ style = '') 
    { 
        if (! (file_exists ($ file) && ($ data = @getimagesize ($ file)))) return false; 
        $ name = uniqid ('', true); 
        if ($ style <> '') $ style = 'style = "'. htmlspecialchars ($ style). '"'; 
        $ mime = strpos ($ _ SERVER ['HTTP_USER_AGENT'], 'Gecko')? "type = '{$ data [' mime ']}":' ';
        echo " \ n"
            . " \ N \ n"
            . " ";
        return true; 
    }
    



    The secret is to combine the data, so that IE, turning to the page using the mhtml protocol, finds the necessary chunkor “hidden” inside the tag, and other browsers would see the picture through the data URL.


    The code was tested under Opera 9.50b, FF 2.0.0.13, Safari 3.1 and IE6. Suggestions and test results - please comment.


    The original entry was posted on my blog.

    Also popular now: