This is something I made some time ago.

This will allow you to take an image file in this case a jpg and convert it to a css file for use in a webpage.

Why did i make this, partial boredom and a friend of mine had trouble viewing images on her phone.


imgtocss.php
PHP Code:
<?php
//include('class.SimpleImage.php');

$name = ($_GET['file'] == null) ? "whiskers-sam10.jpg" $_GET['file'];
$pic $name;
$name substr($name,0,(strlen($name)-4));
$im imagecreatefromjpeg($pic);
$s getimagesize($pic);
$hex = array('r'=>16,'g'=>8,'b'=>0);
$alpha = array('same_color'=>1,'unique_color'=>1);
for(
$y=0,$m=0,$x=0,$color_index=0$y < ($s[1]); $x++){
    
$rgb[$m] = imagecolorat($im$x$y);
       
    if(
$rgb[$m] === $rgb[$m-1]){
        
$rgbc[$color_index] = ' rgba('.(($rgb[$m] >> $hex['r']) & 0xFF).', '.(($rgb[$m] >> $hex['g']) & 0xFF).', '.(($rgb[$m] >> $hex['b']) & 0xFF).', '.$alpha['same_color'].') '.((( $s[0]-($s[0]-$x) ) / (floor($s[0] / 100)))).'%,';
       
$color_pallete[$color_index] = '#'.dechex(($rgb[$m] >> $hex['r']) & 0xFF).dechex(($rgb[$m] >> $hex['g']) & 0xFF).dechex(($rgb[$m] >> $hex['b']) & 0xFF);
    }
    else{
        
$color_index++;
        
$rgbc[$color_index] = ' rgba('.(($rgb[$m] >> $hex['r']) & 0xFF).', '.(($rgb[$m] >> $hex['g']) & 0xFF).', '.(($rgb[$m] >> $hex['b']) & 0xFF).', '.$alpha['unique_color'].') '.((($s[0]-($s[0]-$x)) / (floor($s[0] / 100)))).'%,';
        
$color_pallete[$color_index] = '#'.dechex(($rgb[$m] >> $hex['r']) & 0xFF).dechex(($rgb[$m] >> $hex['g']) & 0xFF).dechex(($rgb[$m] >> $hex['b']) & 0xFF);

    }
    
$m++;
    if(
$x >= ($s[0]-1)){
    
$newLine implode("",$rgbc);
    
$x 0;
    
$y++;
    
$css['box_'.$y] .= 'linear-gradient(to right, '.substr($newLine0, -1).');';
    
$color_index 0;
    
$m 0;
       
   
    }
   
}
/*
used for finding matching lines
$cc = 0;
$count = 0;
for($c=0,$b=1; $c<sizeof($css); $c++,$b++){
    if($css['box_'.$c] == $css['box_'.$b]){
        $Cs[$cc] = $css['box_'.$c];
        $hh[$cc] = $cc;
       
    }
    else{
       
        $hh[$cc] = 'no match';
        $Cs[$cc] = $css['box_'.$c];
    }
    $cc++;
}
print_r($hh);
*/
$value = ($_GET['size'] == null) ? $_GET['size'];

if(
file_exists($name.".css")){
unlink($name.".css");
}
$h fopen($name.".css""a+");
foreach(
$css as $k => $v){
    
$structure[$k] = "
#"
.$k." {
   
    background: 
$v
    background-size: "
.($s[0]*$value)."px ".($value)."px;
    background-repeat:no-repeat;
    padding-top:"
.$value."px;

}"
;
    
fwrite($h,$structure[$k]);
}
fclose($h);
$in 1;
$size 20;
if(
file_exists($name."_pallete.css")){
unlink($name."_pallete.css");
}
$hh fopen($name."_pallete.css""a+");
$cp array_values(array_unique($color_pallete,SORT_STRING));
//print_r($cp);
foreach($cp as $k => $v){
    
$cp_pal[$k] = "
#color_pallete_"
.$k." {
    float: left;
    top: "
.($in*$size)."px;
    width: "
.$size."px;
    height: "
.$size."px;
    border-style:solid;
    border-color: black;
    background: 
$v;

}"
;
$in++;
    
fwrite($hh,$cp_pal[$k]);
}
fclose($hh);


?>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="<?php echo $name?>.css" rel="stylesheet" type="text/css">
<link href="<?php echo $name?>_pallete.css" rel="stylesheet" type="text/css">
<style>
#box1 {
    position: absolute;
    top: 50px;
    margin-left: <?php echo 10?>px;
    float: left;
    width: <?php echo $s[0]*$value?>px;
    height: <?php echo $s[1]*$value?>px;



}
#box2 {
    position: absolute;
    top: 50px;
    margin-left: <?php echo $s[0]+50?>px;
    float: left;
    width: <?php echo $s[0]*$value?>px;
    height: <?php echo $s[1]*$value?>px;
}

#block {
    width: 500px;
    height: 300px;
    margin-left: <?php echo $s[0]+100+($s[0]*$value); ?>px;
    float: left;
    
}

#content, img {
    border-style:solid;
    border-color: black;
}

#tb{
    border-radius: 5px;
    
    box-shadow: 0px 2px 2px #000;
    
    font-size: 12px;
    font-family: arial, sans-serif;
    list-style-type: none;
    color: #7CB8E9;
    text-shadow: #000 1px 1px;
    margin-bottom: 10px;
    //font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: black;


}

#tb.submit:hover {
        -webkit-box-shadow: 0px 0px 2px #000;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D2DFCB), to(#DFE1CD));
        background:  -moz-linear-gradient(19% 75% 90deg,#DFE1CD, #D2DFCB);
    }
    
#tb.submit:active {
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DFE1CD), to(#D2DFCB));
        background:  -moz-linear-gradient(19% 75% 90deg,#D2DFCB, #DFE1CD);
    }
 
#tb:hover {
        color: white;
        -webkit-box-shadow: 0px 0px 4px #000;
        background: rgb(183,222,237); /* Old browsers */
        background: -moz-linear-gradient(-45deg,  rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(183,222,237,1)), color-stop(50%,rgba(113,206,239,1)), color-stop(51%,rgba(33,180,226,1)), color-stop(100%,rgba(183,222,237,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(-45deg,  rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(-45deg,  rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(-45deg,  rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%); /* IE10+ */
        background: linear-gradient(135deg,  rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


    }

#toolbar {
    height: 30px;
    width: 850px;
    margin:0 auto;
    border-radius: 2px;
    box-shadow: 0px 2px 2px #000;
    background-image:url(laminent.jpg);
}

#toolbar b{
    color: black;
    margin-left: 15px;
    
}

</style>
</head>
<body>
<?php include('toolbar.php'); ?>
<br />
<div id="box1">
<b>Original Image<br /><?php echo strtoupper($pic); ?></b><br />
<img src="<?php echo $pic?>"/>
</div>
<div id="box2">
<b>Css Generated Image of<br /><?php echo strtoupper($pic); ?> at size <?php echo $value?>x</b><br />
<div id="content">
<?php for($i 0$i sizeof($structure);$i++){
echo 
'<div id="box_'.$i.'"></div>'."\n";
}
?>
</div>
</div>
<div id="block">
<?php 
for($b 0$b sizeof($cp_pal);$b++){
        echo 
'<div id="color_pallete_'.$b.'"></div>';
}
?>
</div>

<!--<div id="css"><textarea rows="20" col="70"><?php //echo file_get_contents($name.".css"); ?></textarea><div>-->
</body>
</html>
toolbar.php
PHP Code:
<form id="toolbar" action="imgtocss.php" method="get">
<b>Image:</b> <select name="file">
 <?php 
 $loc 
scandir('C:/xampp/htdocs/user/includes');
 echo 
"<option value='' >Select An Image</option>";
 foreach(
$loc as $list => $file){
    if(
strstr($file,'.') === '.jpg'){
        echo 
"<option value=".$file." >".$file."</option>";
    }
 }
 
?>
</select>
<b>Resolution: </b><input type="text" name="size" size="4">
<input id="tb" type="submit" value="Go">
<input id="tb" type=button value="View CSS" onClick="myRef1 = window.open('view-source:'+'<?php echo $name?>.css','window_name1', 'left=500,top=500,width=500,height=500,toolbar=0,resizable=0,scrollbars=1');
myRef.focus()">
<input id="tb" type=button value="View HTML" onClick="myRef2 = window.open('view-source:'+self.location,'window_name2', 'left=500,top=500,width=500,height=500,toolbar=0,resizable=0,scrollbars=1');
myRef.focus()">
</form>