Jump to content
FWR Media

KissIT Image Thumnailer

Recommended Posts

Hello @@marcello,

 

You are using a wrong version which had this error.

Please download and use the latest version r23-3

 

rgds

Rainer

Share this post


Link to post
Share on other sites

:thumbsup: Yep.  I downloaded the 23 version and started testing yesterday.   Must have missed the new updates.  I'll give it a try now.

Share this post


Link to post
Share on other sites

Awesome work Rainer.  I was able to test it with a few transparent gifs and all worked perfectly.

 

I know you have done a great deal to allow for the quality of the image compression to be configurable via the admin; however, from my understanding (which is in no way close to yours) the thumbnails still are tagged with "losslessly compressing" on PageSpeed and YSlow.

 

It appears that there isn't much that can be done within PHP other than to call on some external software or to program your server to do so with some added modules.  Any thoughts regarding this? 

Share this post


Link to post
Share on other sites

Hello Marcello @@marcello,

 

I checked my demo store and a few real stores using KissIt and they only show the "optimize image" flag for very few thumbs. I believe it is not important to save additional 500 bytes or less for a thumb.

Other issue is that there may be some images left where thumbs are not generated.

This may be due to the following:

- hardcoded html image call (<img src="...) is used instead of tep_image function.

- no width and height is defined for the image (both need to be defined and be numeric values).

 

Otherwise I have already prepared the next version r24 which includes a thumb sharpening function.

I'll upload it soon.

 

regards

Rainer

Edited by raiwa

Share this post


Link to post
Share on other sites

That's great Rainer.  Every bit counts.  Some stats for reference.  The transparent feature improved several thumbnails sizes to reduce a category page with 12 products by 4k.  This saved 3 requests when loading a page.  It may be insignificant to some; however, every bit counts.  I am grateful for your efforts.  PM me if you need any help with this.  I am more than happy to help where ever I can.

Share this post


Link to post
Share on other sites

@@marcello,

 

Thank you for the feedback.

Just your opinion about this:

I'm thinking to add a size check to avoid thumbnails for very small images.

Do you think less then 25px width and height is ok? This will prevent for example thumbs for icons etc.

I believe it is not needed to make this configurable in admin, it could be hardcoded in the tep_image function:

  function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '', $responsive = true, $bootstrap_css = '') {
    // Include the Database installation file if executed for the first time.

    if ( !defined('KISSIT_SHARPEN_THUMBNAIL') ) require_once DIR_WS_MODULES . 'kiss_image_thumbnailer/db_install.php';
    // If width and height are not numeric then we can't do anything with it
    // If original image width and height are less than 25px, we do not need a thumb
    if ( is_file($src )) $original_img_size = getimagesize($src);
    if ( !is_numeric ( $width ) || !is_numeric ( $height ) || $original_img_size[0] < 25 || $original_img_size[1] < 25 ) return tep_image_legacy( $src, $alt, $width, $height, $parameters );

    // Create thumbs main dir and .htaccess.	
		if(!is_dir(DIR_WS_IMAGES . KISSIT_THUMBS_MAIN_DIR))mkdir(DIR_WS_IMAGES . KISSIT_THUMBS_MAIN_DIR, 0777);

rgds

Rainer

Share this post


Link to post
Share on other sites

I understand and think it makes sense to add a feature to trigger thumbnails based on size.  Though I am always for a configurable option in the admin.  Anything that keeps one from having to get into the code to make a tweak, I am for.

Share this post


Link to post
Share on other sites

Share this post


Link to post
Share on other sites

Hello,
 
Just found a bug in tep_image function Bootstrap version. $responsive and $bootstrap_css variables are missing here:

    if ( !is_numeric ( $width ) || !is_numeric ( $height ) || $original_img_size[0] < KISSIT_MIN_IMAGE_SIZE || $original_img_size[1] < KISSIT_MIN_IMAGE_SIZE ) return tep_image_legacy( $src, $alt, $width, $height, $parameters );

should be:

    if ( !is_numeric ( $width ) || !is_numeric ( $height ) || $original_img_size[0] < KISSIT_MIN_IMAGE_SIZE || $original_img_size[1] < KISSIT_MIN_IMAGE_SIZE ) return tep_image_legacy( $src, $alt, $width, $height, $parameters, $responsive, $bootstrap_css );

I'll upload the fix during the next days plus Admin thumbnail support :)
 
Sorry for the splitted updates, got new ideas and found bug while working and testing.
 
rgds
Rainer

Share this post


Link to post
Share on other sites

@@raiwa,

 

that happens when ur bussy with 2 different things @ the same time  :)

 

But no worry after xxx updates it should work at a glance a that for a free addon.

The opposite of Micro$hit.

 

Tell us when its done please, if where not retired whe can start over again :P  :P 

 

saludos 

Share this post


Link to post
Share on other sites

@@marcello,

 

I checked the thumbnailer under php 5.5 with error reporting All and found now the undefined variable errors you reported some time ago and the following fixes:

1. this is a new one from the latest updates:

    $original_img_size = null; //this line added
    if ( is_file($src )) $original_img_size = getimagesize($src);

2. this is the one you reported.

    $attributes = array( 'alt' => $alt, 'width' => $width, 'height' => $height );
		$image = null; // this line added
    if (tep_not_null($width) && tep_not_null($height)) {

instead of the suggested dot remove here:

      $image = ' width="' . tep_output_string($width) . '" height="' . tep_output_string($height) . '"';

This should be more stable.

 

Could you please give it a try and confirm.

 

Thank you

 

Rainer

Share this post


Link to post
Share on other sites

@raiwa,

 

I just read your above post.  I was in the middle of installing the new version and will take a look at what you mentioned. 

 

 

Testing v24 now.

 

Very minor recommendation, the following change would eliminate any php notices of $original_img_size not being defined

if ( is_file($src )) $original_img_size = getimagesize($src);

to

$original_img_size = ( is_file($src ) ? getimagesize($src) : array() );
Edited by marcello

Share this post


Link to post
Share on other sites

@raiwa,

 

Everything is functioning as expected.  Visually, the sharpen does appear to improve the thumbnails.

 

Regarding file sizes the following are a few examples regarding losslessly compression (I understand that this feature is not intended to change this; however, I wanted to provide some data regarding different settings):

 

Image1 (gif)   Prior 238B (10% reduction)   Strong 497B (17% reduction)   Medium 459B (16% reduction) Soft 467B (16% reduction)
Image2 (jpg)  Prior 399B (17% reduction)   Strong 385B (15% reduction)   Medium 381B (15% reduction) Soft 391B (16% reduction)

Image3 (gif)   Prior 468B (9% reduction)   Strong 575B (11% reduction)   Medium 531B (10% reduction) Soft 538B (10% reduction)

Image4 (jpg)  Prior 379B (16% reduction)   Strong 374B (14% reduction)   Medium 380B (15% reduction) Soft 388B (15% reduction)

 

From my research it doesn't appear that PHP is capable of removing the data that would improve on lossless compression.  It appears that the thumbnails would need to be passed to an external tool in order to remove the unnecessary information.  The question is how to identify a universal software that handles all image types, is open source, and can run on different OS.  Maybe the best way to handle this is to offer separate instructions to the addon in order for those wanting to install can chose to.  Just as you refer to the product_info page outside of the base install.

Share this post


Link to post
Share on other sites

@@dculley,

 

I'm working on an update for KissIt thumbnailer and would like to get rid of the undefined variable error for $image.

Could you please check if the following modification of the tep_image function in includes/html_output.php works with your carousel module:

    require_once DIR_WS_MODULES . 'kiss_image_thumbnailer/classes/Image_Helper.php';
    $attributes = array( 'alt' => $alt, 'width' => $width, 'height' => $height );
    
    $image = null; // this line added
    if (tep_not_null($width) && tep_not_null($height)) {
      $image .= ' width="' . tep_output_string($width) . '" height="' . tep_output_string($height) . '"';
    }

    $bs_parameters = ' class="';

thank you very much and kindest regards

 

Rainer

Share this post


Link to post
Share on other sites

@@raiwa

 

i will be happy to.  Give a few and I will get back to you.

 

Just to let you know I have not had any errors, things seems to working fine on my end.

 

Dean

Share this post


Link to post
Share on other sites

@@raiwa

 

Installed code to includes/functions/html_output.pnp.  Did not effect the carousel module.  All looks good.

 

Dean

Share this post


Link to post
Share on other sites

Hello Dean @@dculley,

 

Thank you, I'll upload the new version with these fixes very soon.

 

rgds

Rainer

Share this post


Link to post
Share on other sites

Hey there Rainer.

 

I spent several hours yesterday looking into the lossless compression.  To say the least I haven't come up with a solution within PHP as of yet.   To summarize my findings (some of this may already be known to some; however, to help others understand I may be stating the obvious):

 

1. GIFs are not capable of being lossless (must convert to png or jpg)

2. PNG is lossless by default

3. I made a few mods to the addon to convert GIF to PNG (Lossless resolved. Unfortunately, PNG file sizes are larger than GIFs)

4. I made a few mods to the addon to convert GIF to JPG (Lossless remains. However, JPG file sizes are much smaller than GIFs.  Loss of transparency as well)

 

I'll keep trying to figure this out and get back to you if I come up with anything.

Edited by marcello

Share this post


Link to post
Share on other sites

I did notice that in the code PNG compression could be tweaked if you agree. This allows the default compression of 75 for jpg to equate to a 9 for png.  Considering 9 provides the best compression (smallest files) but takes a longer time to compress (quality doesn't change).  For the record, I think we should set PNG compression to 9 by default as the 0-99 quality range of jpg into the 0-9 range of png have opposite relevance.  Note that for jpg 99 is minimum compression (maximum quality) while for png 9 is maximum compression.

         case self::IMAGETYPE_PNG :
           $quality = is_null ( $quality ) ? 1 : $quality;
           $quality = ($quality > 9) ? $quality=floor($quality / 10) : $quality;

to

        case self::IMAGETYPE_PNG :
          $quality = is_null ( $quality ) ? 1 : ceil($quality * 1.1);
          $quality = ($quality > 9) ? 9 : $quality;

or

        case self::IMAGETYPE_PNG :
          $quality = 9;


 

Share this post


Link to post
Share on other sites

@@marcello,

 

I'll give it a try, but for now I'm concentrated to get rid of the undefined errors.

 

1. I checked this modification:

$original_img_size = ( is_file($src ) ? getimagesize($src) : array() );

and it throws "Undefined offset: 0" error.

 

With my original version it's ok:

    $original_img_size = null; //this line added
    if ( is_file($src )) $original_img_size = getimagesize($src);

2. I found another error in image_helper.php if watermark is switched off (Watermark Size = 0):

undefined "_original_image_info" in image_helper.php line 79

 

I added this:

      $image_path_parts = pathinfo ( $this->src );
      $this->_image_name = $image_path_parts['basename'];
      $this->_original_image_info = $this->src; // this line added
      $this->_thumb_filename = $this->_image_name;
      $this->_thumb_src = $this->thumbs_dir_path . $this->_thumb_filename;

I checked as much as I could. It would be good if you could check too if it doesn't mess up anything else.

 

thank you and kind regards

Rainer

Share this post


Link to post
Share on other sites

@@marcello,

 

I'll give it a try, but for now I'm concentrated to get rid of the undefined errors.

 

1. I checked this modification:

$original_img_size = ( is_file($src ) ? getimagesize($src) : array() );

and it throws "Undefined offset: 0" error. Remind to reset thumbs after each change to see errors.

 

With my original version it's ok:

    $original_img_size = null; //this line added
    if ( is_file($src )) $original_img_size = getimagesize($src);

2. I found another error in image_helper.php if watermark is switched off (Watermark Size = 0):

undefined "_original_image_info" in image_helper.php line 79

 

I added this:

      $image_path_parts = pathinfo ( $this->src );
      $this->_image_name = $image_path_parts['basename'];
      $this->_original_image_info = $this->src; // this line added
      $this->_thumb_filename = $this->_image_name;
      $this->_thumb_src = $this->thumbs_dir_path . $this->_thumb_filename;

I checked as much as I could. It would be good if you could check too if it doesn't mess up anything else.

 

thank you and kind regards

Rainer

Share this post


Link to post
Share on other sites

Thank you and I'm glad I can help out.

 

You are correct regarding the array().   I had a module that was disabling my error reporting that kept it from me.  If you like, this defines the var in one line.

    $original_img_size = ( is_file($src ) ? getimagesize($src) : null );

Testing the watermark modification did remove the notice as well.  However, I only received the notice when watermark was > 0.  Your comments above stated that when it was set to 0.  Not sure if I am missing something.  Otherwise, my dev site isn't outputting any errors.

Edited by marcello

Share this post


Link to post
Share on other sites

@raiwa

 

Just an update.  I was able to integrate pngquant into the thumbnailer.  Again, this is just a simple hack at trying to reduce the files sizes and improve on compression.  I will keep testing though this tweak improved a category page by reducing gif files to a png files while saving approximately 24kb on a category page.   The funny part now is that GT is stating that all the png files should be added to a CSS sprite.

 

Note that this is a solution for linux based environments where one has the ability to add additional tools to their environment.  I haven't been able to locate a solution within the GD features of PHP. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×