Image Caching Increasing Image Size & Slowing Page?

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

open: system/library/image.php

find change to

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

probably need to delete the cache, yes

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?

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

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.

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?

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

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.

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.

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

And how do I disable cache?

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

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.

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

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.

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: edit \catalog\model\tool\image.php
change to that way all resized images will stay in same directory.
using 1.5.4.x opencart version

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.