Page 1 of 1

Image Caching Increasing Image Size & Slowing Page?

Posted: Sat Sep 17, 2011 8:15 pm
by JoaniesGifts
Hi Guys,

I've stumbled across a strange problem today and apologies in advance if this is an obvious one - i'm not a developer and am learning opencart as i go for our shop.

I ran a speed test of my site using http://www.webpagetest.org/ and pointed it directly to my store page - http://www.joaniesgifts.co.uk/store/

I noticed from the results that it was taking a long time to load the 3 Nuvo Slider images on the homepage which was weird because i'd optimised them. I noticed that the jpgs were 70kb each instead of the original loaded size of under 25kb. I also noticed the cache version was being used and the images were low quality.

I looked in my cache/data folder and sure enough the image sizes seem larger than my originals even though they seem lower quality than the originals...

Very confused whats going on - is it because i enabled cache in my htaccess file? How can i tell opencart to use my original files?

Any help/tips would be appreciated as i dont even know where to start with this one :)

Joan
ps. - my slider extension was this one here - http://www.opencart.com/index.php?route ... on_id=1475

Re: Image Caching Increasing Image Size & Slowing Page?

Posted: Sat Sep 17, 2011 11:50 pm
by uksitebuilder
open: system/library/image.php

find

Code: Select all

    public function save($file, $quality = 100) {
change to

Code: Select all

    public function save($file, $quality = 70) {

Re: Image Caching Increasing Image Size & Slowing Page?

Posted: Sun Sep 18, 2011 12:19 am
by JoaniesGifts
Brilliant - thanks Simon!

Do you know if I'll have to reload my images or delete the cache somehow for this to take effect after i've made the change?

Many thanks for your quick response :-)

Best wishes,
Joan

Re: Image Caching Increasing Image Size & Slowing Page?

Posted: Sun Sep 18, 2011 12:33 am
by uksitebuilder
probably need to delete the cache, yes

Re: Image Caching Increasing Image Size & Slowing Page?

Posted: Fri Sep 30, 2011 3:53 am
by tjonnyc
Wouldn't setting the JPEG compression/quality to 70% decrease the quality, especially in fine detail?

My product images are already optimized, with a good balance between file size & visual quality. The above solution poses a dilemma: let OC compress them further, and lose quality (especially big problem for my type of products, where fine detail and reflections do make a difference) - or risk 8-9MB page load sizes with 40-second delays and occassional SQL server errors?

Is there a way to bypass image caching altogether? Or (in a perfect universe) enable/disable it on a per-folder / per-product basis?

Re: Image Caching Increasing Image Size & Slowing Page?

Posted: Fri Sep 30, 2011 3:58 am
by tjonnyc
In any case, I tried the solution above - and I'm STILL getting 250KB thumbnails from 30KB original files... what the heck is going on here?

For example:

/image/data/PRODUCT/PRODUCT01-01.jpg = 31 KB
/image/cache/data/PRODUCT/PRODUCT01-01-500x500.jpg = 241KB

At this rate, I'd rather disable image caching altogether...

Re: Image Caching Increasing Image Size & Slowing Page?

Posted: Fri Sep 30, 2011 4:36 am
by jcsmithy
Images that are created on the fly are always going to be quite bad at compression, as php doesn't natively support the compression needed to optimise images the same way photoshop would for instance.

There are "plugins" out there that do enhance PHP in terms of image commpression, but it is extremely hard to code and to impliment.

some of these plugin's are:
  • ImageMagick
  • pngcrush
  • optipng
  • pngrewrite
  • jpegtran
  • gifsicle
most I think aren't available on all servers as there not exactly common packages used, And the majority are ones that Yahoo use on their Smuch.it service, and it's taken then a hell of a long time to put this together themselves getting it working 100%, so it's certainly no easy task to do.


The only option at this time, is to adjust the quality setting like UKSB said. If your not happy with the quality it creates, just up the value slightly more, repeating until your happy with the result.

You could remove the caching function, but that'd then mean the same image is used everywhere, and you'd have to scale it down with css / tags... which would make it look even worse.

Re: Image Caching Increasing Image Size & Slowing Page?

Posted: Fri Sep 30, 2011 5:11 am
by tjonnyc
jcsmithy, thank you VERY much for those tips. I'll definitely investigate those plug-ins.

I did adjust the quality setting - from 100 down to 80. It made absolutely no difference in the generated file sizes. The only thing that seems to work is going into Admin -> System -> Settings -> Image, and changing the dimensions from 500x500 to a smaller size (for the sake of the experiment).

Also, all my product images are pre-processed, optimized, and manually cropped and/or resized to 500x500 prior to upload, so scaling is not a problem - 500x500 source, 500x500 browser display. So, in light of this (no penalty for scaling), would disabling cache still be a bad idea?

Re: Image Caching Increasing Image Size & Slowing Page?

Posted: Fri Sep 30, 2011 5:13 am
by tjonnyc
(continuing the above paragraph) ...and anyway, what's worse - the performance hit from disabling cache, or the performance hit from having the cache actually work against me and generate thumbs that are 6X-8X larger than the original filesize?

Going to experiment, and hopefully have some concrete conclusions to post here.

Re: Image Caching Increasing Image Size & Slowing Page?

Posted: Fri Sep 30, 2011 5:20 am
by jcsmithy
Well if your going down the route of manually creating all of the required images yourself, then sure disable it if you want.

So, would you create the images in ALL the sizes needed for OC? ie, category image (180x180), admin views (40x40), admin preview (100x100), blah blah blah? or are we JUST on about the big one that pop's up?

It'd be a lot more work on your side creating all the images manually, but yes it would improve performace a hell of a lot.

Re: Image Caching Increasing Image Size & Slowing Page?

Posted: Fri Sep 30, 2011 5:52 am
by tjonnyc
There's an awesome little freeware image viewer called IrfanView that has a "Batch Conversion / Rename" option. So once I have the product images edited, color-corrected, captioned, etc (which takes hell of a lot longer than resizing, let me tell ya!) - all I have to do is title the filenames properly, open up IrfanView, set the options (resize to NNN x NNN), and let it rip. Same can be done in Corel Photo-Paint with CorelScript, etc.

Re: Image Caching Increasing Image Size & Slowing Page?

Posted: Fri Sep 30, 2011 6:00 am
by jcsmithy
Meh, built into photoshop, no need for several programs ;)

Anywhooo, Yes - disable the cache if you dont feel the need for it, there's nothing wrong with doing so at all :)

Re: Image Caching Increasing Image Size & Slowing Page?

Posted: Wed Oct 12, 2011 5:43 am
by tjonnyc
And how do I disable cache?

Re: Image Caching Increasing Image Size & Slowing Page?

Posted: Wed Oct 12, 2011 5:43 am
by tjonnyc
Also, is it possible to disable caching for product images only, but leave it for the category / search-results thumbnails?

Re: Image Caching Increasing Image Size & Slowing Page?

Posted: Tue Nov 13, 2012 8:08 am
by nnnslogan
I get excellent results with the XAT Image Optimizer. It's much better than Photoshop or any other tool I've ever tried for compression of jpg images with control over image quality. It's especially bothersome for Opencart to recompress my images when I have such an excellent tool for this purpose.

Re: Image Caching Increasing Image Size & Slowing Page?

Posted: Sat Feb 16, 2013 9:01 pm
by napok
Hi. The thread ended suddenly.
I have the same problem, displaying good images (150-250kb) and opencart makes them slightly blurred.
What is the best solution? (Taking into account that I am also a newbie)

Thanks.
Alexandra

hesslejewellery.com

Re: Image Caching Increasing Image Size & Slowing Page?

Posted: Thu May 02, 2013 10:01 pm
by tjonnyc
Reviving an old thread... still no answer apparently.

How can I disable the image cache COMPLETELY?

In other words, I want whatever is in image/data to display, not the /image/cache/data.

Re: Image Caching Increasing Image Size & Slowing Page?

Posted: Tue Sep 17, 2013 6:41 pm
by fob
tjonnyc wrote:Reviving an old thread... still no answer apparently.

How can I disable the image cache COMPLETELY?

In other words, I want whatever is in image/data to display, not the /image/cache/data.
to disable cache edit \system\library\cache.php
like this:

Code: Select all

<?php
class Cache { 
	private $expire = 0; 
//cache stays forever but still will be present in /image/cache/data
	public function get($key) {
		return;	
			}

  	public function set($key, $value) {
    	return;
  	}
	
  	public function delete($key) {
		return;
  	}
}
?>
edit \catalog\model\tool\image.php
change

Code: Select all

$new_image = 'cache/' . utf8_substr($filename, 0, utf8_strrpos($filename, '.')) . '-' . $width . 'x' . $height . '.' . $extension;
to

Code: Select all

$new_image = '' . utf8_substr($filename, 0, utf8_strrpos($filename, '.')) . '-' . $width . 'x' . $height . '.' . $extension;
that way all resized images will stay in same directory.
using 1.5.4.x opencart version

Re: Image Caching Increasing Image Size & Slowing Page?

Posted: Thu Apr 23, 2015 8:16 pm
by paddys_1
You can easily increase your site speed by compressing images with the following extension.

http://www.opencart.com/index.php?route ... n_id=18138

It's enables you to compress all the existing images on your site and then automatically optimises any that you upload afterwards.