Improving pictures in Skype chat (updated)

Foreword

On January 17, I, like many others, were sent a link to the zhovner article about pictures in Skype chat - http://habrahabr.ru/blogs/skype/136395/ , and it started!
The idea is cool, we immediately began to flip pictures generated by the service img4skype.com , but it turned out that many of them are displayed stretched.


')


After reviewing the zhovner code snippet, we quickly discovered that this can be easily fixed by removing one whitespace character.

You just need to fix this code:

$out .= '<font color="#'.strtoupper(dechex($color)).'">███</font>'; 

on this:

 $out .= '<font color="#'.strtoupper(dechex($color)).'">██</font>'; 

Therefore, a local version of the service was quickly made, allowing you to choose the number of whitespace characters per pixel - 2 or 3.

* However, two whitespace characters instead of three still change the size of the image (instead of 1: 1, it turns out 4: 3), so later we added compression of the original image (1: 1 => 3: 4, after 4: 3 distortion, we again get 1: 1 ) if 2 spaces per pixel are selected.

Optimization

1. Combining similar colors

The idea that lies on the surface and voiced by the zhovner himself is the union of similar colors.
If there are two red pixels in a row, then such code is generated:

 <font color="#ff0000">███</font><font color="#ff0000">███</font> 

It is quite obvious that this can be simplified:

 <font color="#ff0000">██████</font> 

So we will save space in the message occupied by the code <font color = "# ff0000"> </ font>, which will free us 29 characters, which is 9 or 14 pixels (depending on the number of spaces per pixel).
This is very important because the size of the picture is limited by the maximum length of a message in Skype.

This optimization has already been implemented by several habrauser, so I see no reason to reiterate its code once again.
I will describe in more detail only the comparison of colors.

Experimentally, we came to the following function:

 // compare colors function compare_clr( $c1, $c2, $max_dif, $img_px_qs ) { $r1 = ( $c1 >> 16 ) & 0xFF; $g1 = ( $c1 >> 8 ) & 0xFF; $b1 = $c1 & 0xFF; $r2 = ( $c2 >> 16 ) & 0xFF; $g2 = ( $c2 >> 8 ) & 0xFF; $b2 = $c2 & 0xFF; $r_dif = abs( $r1 - $r2 ); $g_dif = abs( $g1 - $g2 ); $b_dif = abs( $b1 - $b2 ); $k = 1; if( $img_px_qs == 1 ) // max quality { $def_k = 0.65; // check difference in color channels $dr = ( $r_dif > 0 ) ? $def_k : 0; $dg = ( $g_dif > 0 ) ? $def_k : 0; $db = ( $b_dif > 0 ) ? $def_k : 0; $k = $dr + $dg + $db; if( $k < 1 ) { $k = 1; } } else // max size { $k = 1; } $rv = true; if( ( $r_dif*$k > $max_dif ) || ( $g_dif*$k > $max_dif ) || ( $b_dif*$k > $max_dif ) ) { $rv = false; } return $rv; } 

The first two parameters are colors, the 3rd parameter is the comparison threshold, the maximum difference between the color channels (0-255), the 4th parameter is maximum quality or maximum size.

If we compare the colors entirely, without making a difference between the channels (r, g, b), the picture quality leaves much to be desired. The picture is very quickly "smeared."
Therefore, we compare the individual channels. If the color difference at least in one channel exceeds the threshold - the colors are considered different.
The formula with the coefficients gives the best quality and best removes the lubrication. It is better suited for complex multi-color images (photo).
A simple comparison gives a larger size, but in complex pictures, blur appears even on small comparison thresholds. But this formula allows you to generate large images for simple smiles and black and white trolleys.

2. Primary color

Another important optimization, also lying on the surface, is the background color.

Quote:

"You can still not paint a black pixel, because it is already black."

The black pixel is actually not black, but default. Its color is set by the first tag in the code, which in img4skype has no color and therefore is default (almost black):

 <font size="1">... 

If you add a color to the first font tag, it will be the default color for the whole image:

 <font size="1" color="#ff0000">... 

And then for each red pixel or their sequence there is no need to insert the tag <font color = "# ff0000"> </ font>, just close <font> from the previous color and write whitespace characters without tags.

If the picture is a logo / emoticon / pattern on a uniform background, then this optimization gives a very large increase in size.

So, before generating the image code, you must first go through all the pixels and find the most common color:

 imagecopyresampled( $newimg, $img, 0, 0, 0, 0, $neww, $newh, $imgw, $imgh ); // find most popular color $c_arr = array(); for( $j = 0; $j < $newh; $j++ ) { for( $i = 0; $i < $neww; $i++ ) { $cur_clr = imagecolorat( $newimg, $i, $j ); if( isset( $c_arr[$cur_clr] ) ) { $c_arr[$cur_clr]++; $found = true; } else { $c_arr[$cur_clr] = 1; } } } $max_cnt = 0; $def_clr = 0; // most popular color foreach( $c_arr as $key => $val ) { if( $val > $max_cnt ) { $max_cnt = $val; $def_clr = $key; } } 

3. Maximum size

Further more, it was quickly discovered that people want to play around with the sizes and change the constant 800 in this formula:

 $newh = floor(sqrt(800 / $ratio)); 

Some pictures can be done more, the code for them is placed on Skype if you replace 800 with 1000 or 1200, and some do not fit even at 800.

Therefore, the next step is to make this constant a variable that the user can select.

But this is a half measure, because now you have to laboriously messing with parameters to make the picture as large as possible in size and quality.

Therefore, we immediately generate the highest possible picture. By dividing the segment in half, we generate the code until we get a result with the maximum value of the constant in the formula above and the maximum possible length that can fit in the Skype message.

Now users only need to care about quality, which only the human eye can assess.
We do the rest for them.

PS

Finding out that img4skype.com is not developing (even implemented ideas with ready-made code are not added), we decided to create our own analog - skypeimg.com . Here everything is implemented about what is written in this article.
All functions are “time tested” - they work on our service since 01.20.2012.

Here are a couple of examples of our generator (screenshots from Skype on a scale of 1: 1):



I would like to say thanks to zhovner for the original idea, and wish in the future to fully implement the simple and self-evident functionality, so as not to provoke the appearance of competitors!

UPD. Comments taken into account, the site is updated, all questionable content removed. The gallery no longer shows what users generate, only pictures from albums.