Post by JoaniesGifts » Sat Sep 17, 2011 8:15 pm

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

Thoughtful Gifts by Joanie's Gifts - The Thought Counts...


User avatar
Active Member

Posts

Joined
Fri Oct 29, 2010 8:59 pm
Location - UK

Post by uksitebuilder » Sat Sep 17, 2011 11:50 pm

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) {

ImageImageImageImageImage

For Friendly Professional Support - Click Here


User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by JoaniesGifts » Sun Sep 18, 2011 12:19 am

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

Thoughtful Gifts by Joanie's Gifts - The Thought Counts...


User avatar
Active Member

Posts

Joined
Fri Oct 29, 2010 8:59 pm
Location - UK

Post by uksitebuilder » Sun Sep 18, 2011 12:33 am

probably need to delete the cache, yes

ImageImageImageImageImage

For Friendly Professional Support - Click Here


User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by tjonnyc » Fri Sep 30, 2011 3:53 am

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?

Active Member

Posts

Joined
Tue Dec 21, 2010 5:05 am

Post by tjonnyc » Fri Sep 30, 2011 3:58 am

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...

Active Member

Posts

Joined
Tue Dec 21, 2010 5:05 am

Post by jcsmithy » Fri Sep 30, 2011 4:36 am

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.

Active Member

Posts

Joined
Fri Oct 01, 2010 9:54 pm

Post by tjonnyc » Fri Sep 30, 2011 5:11 am

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?

Active Member

Posts

Joined
Tue Dec 21, 2010 5:05 am

Post by tjonnyc » Fri Sep 30, 2011 5:13 am

(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.

Active Member

Posts

Joined
Tue Dec 21, 2010 5:05 am

Post by jcsmithy » Fri Sep 30, 2011 5:20 am

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.

Active Member

Posts

Joined
Fri Oct 01, 2010 9:54 pm

Post by tjonnyc » Fri Sep 30, 2011 5:52 am

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.

Active Member

Posts

Joined
Tue Dec 21, 2010 5:05 am

Post by jcsmithy » Fri Sep 30, 2011 6:00 am

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 :)

Active Member

Posts

Joined
Fri Oct 01, 2010 9:54 pm

Post by tjonnyc » Wed Oct 12, 2011 5:43 am

And how do I disable cache?

Active Member

Posts

Joined
Tue Dec 21, 2010 5:05 am

Post by tjonnyc » Wed Oct 12, 2011 5:43 am

Also, is it possible to disable caching for product images only, but leave it for the category / search-results thumbnails?

Active Member

Posts

Joined
Tue Dec 21, 2010 5:05 am

Post by nnnslogan » Tue Nov 13, 2012 8:08 am

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.

Newbie

Posts

Joined
Tue Sep 20, 2011 9:44 pm

Post by napok » Sat Feb 16, 2013 9:01 pm

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

New member

Posts

Joined
Mon Feb 11, 2013 1:46 am

Post by tjonnyc » Thu May 02, 2013 10:01 pm

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.

Active Member

Posts

Joined
Tue Dec 21, 2010 5:05 am

Post by fob » Tue Sep 17, 2013 6:41 pm

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

fob
Newbie

Posts

Joined
Tue Sep 17, 2013 6:33 pm

Post by paddys_1 » Thu Apr 23, 2015 8:16 pm

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.

Image


User avatar
New member

Posts

Joined
Wed Jul 16, 2014 6:04 am
Who is online

Users browsing this forum: No registered users and 57 guests