Data-URLs in Websites – Bilder in einer Website einbetten

Webseiten werden in mehreren Requests vom Server abgeholt. Zuerst kommt die HTML-Seite. In der steht dann, das eine style.css, Java Script und ein Haufen Bilder nachgeladen werden sollen. Jede weitere Datei stellt einen weiteren Request dar. Jedes mal diesen Request neu aufbauen dauert natürlich Zeit – auch wenn Browser mehrere Anfragen parallel steuert (ungefähr 8) dauert es doch einiges an Zeit, bis alle Bilder auf großen Seiten heruntergeladen worden sind.
Um das zu ändern, habe ich einen Weg gesucht, alles in einer einzelnen Datei – also einer einzigen Anfrage an den Server – auszuliefern.
Am idealsten währe wohl das Verfahren bei E-Mails gewesen, das unterstützen Browser jedoch (noch) nicht.

Data-URLs in Websites – Bilder in einer Website einbetten weiterlesen

„IHTML“ Mit PHP ein Bild in HTML darstellen

Für alle die zu viel Zeit haben:
Ich hab mir die Frage gestellt ob es möglich ist, ein Bild in HTML darzustellen. Sprich: Für jeden Pixel eine DIV-Box erstellen und in der entsprechenden Farbe einzufärben. Natürlich kann man das. Aber kann das auch mit PHP realisiert werden? Natürlich…!
Hier findet ihr das Orginalbild und hier das Bild in HTML dargestellt. Natürlich ohne Qualitätsverlust.
Die Orginal PHP Datei stell ich nicht online da diese Methode doch ein wenig Rechenintensiv ist.
Hier der PHP Code direkt mit entsprechendem HTML dazu:

<html>
<head>
<title>img2html</title>
<style type="text/css">
<!--
.pixel {
width:1px;
height:1px;
float:left;
}
.row {
clear:both;
}
-->
</style>
</head>
<body>
<?php
    $image = new imagick("dialog_ok.png");
    $width = $image->getImageWidth();
    $height = $image->getImageHeight();
    $row = 1;
    $pixel = 1;
    for($row; $row < = $height; $row++) {
        $pixel = 1;
        for($pixel; $pixel <= $width; $pixel++) {
            $tmp = $image->getImagePixelColor($pixel, $row);
            $color[$row][$pixel] = $tmp->getColor();
        }
    }
    foreach($color as $key => $row) {
        print "		<div class=\"row\">\n";
        foreach($row as $key => $row) {
            print "			<div class=\"pixel\" style=\"background-color:rgb(".$row['r'].", ".$row['g'].", ".$row['b'].");\"></div>\n";
    }
    print "		</div>\n";
}
?>
</body>
</html>

Vorraussetzungen hierfür:
– PHP
– Imagick
Sollte tatsächlich jemand dieses Script in den Produktiveinsatz bringen: Ein kleiner Vermerk Seite im Quellcode währe nett!