Image size (in kB)

  • Posts: 2143
  • Thank you received: 747
10 years 4 days ago #153351

-- url of the page with the problem -- : on local dev server
-- HikaShop version -- : Business 2.3.0
-- Joomla version -- : 3.2.3
-- PHP version -- : 5.3.27
-- Browser(s) name and version -- : irrelevant
-- Error-message(debug-mod must be tuned on) -- : none

Dear Support,

I went back into last year searching here for similar posts, but maybe I'm the only one noticing that HikaShop seems to tend "inflating" image size in kB? I guess we agree that we want to keep file (= image) sizes as small as possible to keep page loads fast.

At this point it's about category/manufacturer images - haven't checked product images yet, though I suspect it'll be an issue there as well. Which is why I'm making this such a lengthy post...

FYI, I won't use images for product categories, but for manufacturers. There'll be many, and I'll do a logo listing page with div's (img_title). However, the largest pixel size I'll ever use on the site for these pix is 120x120px.

So, I set the size in the div settings accordingly: 120x120px.
Then I went through the effort of prepping images as small as possible. PNG with 8 colours and no transparency appeared to be the best quality at smallest size: the test image size turned out to be 2.661kB (here attached as "a.png").

After uploading it via the manufacturer page, I find the following:

  • The image displays correctly with max 120x120px in the frontend - good.
  • It's still PNG, thankfully no format change has happened.
  • When copying the frontend image, it's 7.424kB in size = almost 3 times as large! (I'm attaching it here, too: a_882777240.png)
  • Checking the "upload" folder, I do find this very same image in it, plus 2 more versions in these subfolders:
  • upload/thumbnails/120x120f: 4.397kB
  • upload/thumbnail_100x100: scary 40.221kB!!!
[/ul]

I'd expect HikaShop to leave image sizes alone, or if anything, rather downsize but sure not inflate by such factors.
I haven't configured 100x100px anywhere, so I guess it's a default creation, but (a) it's crazy large at 40kB, so I hope it'll be used nowhere, and (b) even if, on larger sites with lots of images (which is what I expect dealing with), the overall size on the server will shoot up significantly and unnecessarily, and if only affecting backups.

Not happy with the fact of image file sizes getting generally inflated, and quite a bit scared regarding approaching the matter "product images"...

Thanks for comments and ideas on how to keep image files at their original size or smaller,

LF


Need help with customisations of layouts, style or other site development? PM me!
(Don't forget to turn on "E-mail notification of new messages" )
Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 2143
  • Thank you received: 747
10 years 4 days ago #153362

Have other things to do but couldn't wait, so I looked at what happens to product images.

Since it proves to be best for my page width and layouts with div's and product page, after initial tests and measurements I configured the image settings as per screenshot:



Then I uploaded a 1080x1080px JPG of 88kB to a product.

What I find in the upload folder and its subs:
  1. An image of same name and pixel size (1080x1080px), but over 199kB large!!! Which is the one used on the site in the popup...
  2. The 560x560px version of just over 51kB. The one used on product page. Guess it's then logical that it's also the tiny "real thumbnail" next to the large image on the product page.
  3. A 280x280px version of over 43kB! Which is seemingly nowhere used.
  4. Another 280x280px version of 20kB, which is the one used in div's.
  5. The mysterious 100x100px thumbnail of almost 9kB.
  6. Another 100x100px version (in folder '100x100f') of little less than 5kB.
  7. A magic 50x50px version of just over 2kB.

So, I uploaded a single image of 88kB, and what I'm getting is 7 images, of which only 3 are being used! Totaling up in 330kB!!! Now let's imagine one has hundreds of (formerly optimised and small) images on the site... - boom! - it's going to be quickly huge!

Anything that can be done in the short run? A different image scaler? At least preventing from (a) the original growing by a factor of greater than 2, pleeeeease? Avoiding other, unused images being created? Where's the script, what can I do?

Thanks again!


Need help with customisations of layouts, style or other site development? PM me!
(Don't forget to turn on "E-mail notification of new messages" )
Attachments:
Last edit: 10 years 4 days ago by lousyfool.

Please Log in or Create an account to join the conversation.

  • Posts: 81540
  • Thank you received: 13071
  • MODERATOR
10 years 4 days ago #153427

Hi,

HikaShop uses the PHP GD library in order to resize the images that you upload in order to create the thumbnails that you can see everywhere.
So first, the fact that you have different sizes of images is because some are used in listings of the backend interface (like the "mysterious" 100*100 images), and some come from the different image size settings that you have in the configuration of HikaShop and in the options of your products/categories listing menus/modules (menu Display->Content menus/modules). You can remove them if you want, but HikaShop will recreate them automatically when it needs to display them.
Regarding the size of the images, it's the PHP GD library which handles the compression of the images. For GIF images, we can't do anything as GD doesn't provide any option to optimize the compression of the images. For PNG and JPG images, there is a setting to control the quality of the compression. We set it to 100% so that the quality is maximum and that you don't loose any details but because of that the resulting images can be quite big. You can modify the code:

		$quality = array(
			'jpg' => 95,
			'png' => 9
		);
in the file administrator/components/com_hikashop/helpers/image.php by reducing these numbers, the can increase the compression of the resulting images and reduce their quality at the same time.
Note that it will only affect newly created thumbnails and not the ones which are already generated.

The following user(s) said Thank You: lousyfool

Please Log in or Create an account to join the conversation.

  • Posts: 2143
  • Thank you received: 747
10 years 3 days ago #153488

Thank you very much for your response, Nicolas! That's what I need to know.

Been diagonally through the image.php before, but didn't see this. Will do the needful.

Thanks again!


Need help with customisations of layouts, style or other site development? PM me!
(Don't forget to turn on "E-mail notification of new messages" )

Please Log in or Create an account to join the conversation.

  • Posts: 2143
  • Thank you received: 747
10 years 3 days ago #153519

Sorry Nicolas, need to get back to you on this again:

Tried it out with 2 extremely different quality value sets in image.php.
One like this (this was the default):

$quality = array(
			'jpg' => 95,
			'png' => 9
		);
and the other one like this:
$quality = array(
			'jpg' => 10,
			'png' => 1
		);
(BTW, it should be noted that according to the GD manual these compression values work 'in opposite directions': for JPG a higher value means lower compression = better quality/larger file, while for PNG the higher value means higher compression = smaller file. Not sure why you'd then default PNG to 9? And why the images still come out so huge... first indication for a bug? ;) )

Anyway, no change either way. In both cases the results were the very same:
  • a 17kB PNG was saved in */upload at a whopping 585kB at the same pixel size (!!!)
  • a 83kB JPG became 127kB at same pixel count
Again, no difference whichever quality settings I chose.

FYI, I made sure that GD is installed and enabled in my MAMP.

Now what? Is this a bug? :huh:

Thanks again for looking into it. For me not the most urgent thing during dev time, but would be good to solve it in the next few days.


Need help with customisations of layouts, style or other site development? PM me!
(Don't forget to turn on "E-mail notification of new messages" )
Last edit: 10 years 3 days ago by lousyfool.

Please Log in or Create an account to join the conversation.

  • Posts: 81540
  • Thank you received: 13071
  • MODERATOR
10 years 3 days ago #153554

Hi,

Unfortunately, it cannot be a bug in HikaShop. HikaShop simply gives that value to the GD library for the compression of the image data. If you don't see any change when changing these values, it's either that the thumbnails are already created and thus HikaShop does not regenerate them, or a problem with the GD library not taking into account that value properly (so a bug of your version of PHP or version of GD).

Please Log in or Create an account to join the conversation.

  • Posts: 2143
  • Thank you received: 747
10 years 2 days ago #153628

Hmm, good if it cannot be a bug in HikaShop, and rather fortunate, I'd say, haha! And if you say so, then it must be true... I was only wondering if something could have been wrong with the handover at your end, but great if not.

Well, then I haven't touched MAMP's guts other than increasing memory and the occasional glance at the logs, and if there were a bug with GD, I'm sure the huge user community would scream. But instead it's silent there, too.

Unless I find time and another extension utilizing GD, let's leave it there at least until I finally move to a hosting server. In dev world a few kB more or less don't matter, and I hope it later proves to be limited to my environment here.

Thanks again so far!

P.S.: Forgot to say, I had deleted thumbs and regenerated them from scratch.


Need help with customisations of layouts, style or other site development? PM me!
(Don't forget to turn on "E-mail notification of new messages" )
Last edit: 10 years 2 days ago by lousyfool.

Please Log in or Create an account to join the conversation.

  • Posts: 81540
  • Thank you received: 13071
  • MODERATOR
10 years 2 days ago #153630

It's probably just that GD is less good at compressing images than your image editing software.
Read here:
www.ebrueggeman.com/blog/php_image_optim...on#comment-384725596

Please Log in or Create an account to join the conversation.

  • Posts: 2143
  • Thank you received: 747
10 years 2 days ago #153658

Oh thanks, interesting read on GD.
Hey, I sure didn't expect GD to exceed Photoshop fiddling, haha. But it's shocking to see 17kB exploding to 585kB. That's difficult even with Photoshop without a change of format.....

Interestingly, I was gonna shoot for '70' with JPG's anyway... but that was just a wild guess then. Maybe I should go play the lottery, it seems to be my lucky day... - or can you give me the winning numbers too?

The thing is - well, actually 2 things:

  1. With the most extreme swings when testing the Q factor in between HikaShop and my environment there wasn't as much as 10 byte difference. So, something is definitely wrong in the present combo. As said, more testing later with the host server.
  2. High numbers for JPG = larger files, better Q. Vice versa for PNG's! Hmm, perhaps you want to keep that in mind for your default settings?
  3. [/ol

    ]Thanks & cheers - now go have a weekend! ;)


Need help with customisations of layouts, style or other site development? PM me!
(Don't forget to turn on "E-mail notification of new messages" )

Please Log in or Create an account to join the conversation.

  • Posts: 81540
  • Thank you received: 13071
  • MODERATOR
10 years 1 day ago #153666

That's normal.
PNG are lossless anyway, so it's better to pick the higher compression by default as it doesn't degrade the quality.
On the other end, JPG loose quality when you compress them, so you want to keep a low compression by default or the images will be too degraded.

Please Log in or Create an account to join the conversation.

Time to create page: 0.079 seconds
Powered by Kunena Forum