Thumbnail Images Fuzzy

[ntm91307]

I've scoured this forum and the Net in general, found a number of posts and pieces of advise an tried them all...still no luck.  So before I go face first into finding my own solution I decided to post here.  First, my versions:

Site: www.momsfavoritefudge.com
PHP 5.5.x
Joomla!: 3.4.5
VM: 3.0.12

The story in a nutshell: When I first created and brought up the site all my images and thumbnails looked great.  As I further developed the site and replaced old images with new ones my Category and Product thumbnails started coming out blurry.  These are the things I've tried so far.  Some I found from my exhaustive search on the topic, others I just tried on my own.

- Verified that Enable Dynamic Thumbnail Resizing is checked
- Verified thumbnail sizing: W:0  H:45
- Upload higher resolution images: min 900x900
- Delete all product and category thumbnails
- Directly replace thumbnail images with the originals and renamed using the system-generated thumbnail image name

I've actually tried the above several times with ever increasing resolution images.  I've got some .png files out there that are 4-5MB in size, 2600+ x 2800+ pixels at 200ppi and the result is the same.  I notice that when I upload new images to the categories replacing the existing ones with the exact same name either J! or VM adds a number to the end of the file name.  Since the very first images and thumbnails worked perfectly and my problems began when I started trying to replace those images with new ones I'm wondering if the multiple names have something to do with it.  Not sure how but I'm grasping at straws at this point.

My next step is to remove all of the original files (after a full backup of course) and reload them and see what, if any, impact this would have.  The step after that will be .jpg files instead of .png and I'll go from there.  I just decided to put this out there first and let it cook awhile while I flounder around a bit more.  Odds are this is a simple issue with a simple solution that I'm just missing and someone out there has nothing better to do for the next 2 or 3 minutes and can pass along the right answer...

Thanks in advance...

Mike

[ntm91307]

Ok, nevermind.  Seems my head was turned around 180 degrees on this one.  I thought the dynamic thumbnail size determined how big the thumbnail was going to be displayed and I didn't want it to be very big so I kept it small.  After doing a little digging around I find that's not the case at all.  That size refers to the size of the image that will be placed in a container and the results displayed.  The container was twice the size of my image.  So, J!/VM kindly expanded my image to fit, severely impacting image quality.  Doubled my resolution and viola...thumbnail images look like they're supposed to....nice and crisp.

Thanks anyway guys....

Mike

[jenkinhill]

Lets go back to the settings you should be using. Whatever you do is not helped by Elegantstore template which looks like it needs updating for current VM versions.

The maximum size image you should upload should be the same as the maximum size at which it is likely to display, ie usually no more than 800px high with the width set by resizing to 800 while constraining (maintaining) the image proportions.  Actual resolution need not be more than 72dpi, although few users worry about that. This "large" image is used for the lightbox display on the product details page, and is constrained by css for display as the normal image on that page.

The image height for thumbs should be set to the required display height on the category page, as that is the only place the thumb is used.  I see you have now set that to 120px, earlier it was a stupidly small 45px.

Yes, dynamic resizing should be on.

Your main images are way too large like this one:
http://www.momsfavoritefudge.com/images/stories/virtuemart/product/Orange%20Cream4.jpg
3,300.55 kB (3,379,760 bytes)
3,888px × 2,592px (scaled to 613px × 817px for display)

That full 3+Mb file is being used to make a thumb using the gd library on the server. So not surprising that could be a problem, even apart from the bandwidth used to upload images of that size. And then the full size image has to load on the product details page and then be scaled right doen by css - which is bound to cause artifacts in both the default product image and the popup image, the displayed height of which is decided as a percentage of the browser window height.

Uising the right size images at the start is important, saves bandwidth, speeds up product display and prevent the appearance of artifacts in the image. Also is is best to use optimised jpg files for upload and never include spaces in filenames.

[ntm91307]

Thanks for the input and lesson.  The ultra large images were an attempt to increase the resolution on my thumbnail images, before I figured out the real problem.  As soon as I solve a different problem I have now I'm going to go back and re-upload more reasonably sized images.  My originals were a little bigger than you describe but not horrendously huge as some of them are now.

Sometimes, when you just don't have a better way, you just gotta throw "stuff" at the wall until something sticks....

Thanks again...

[ntm91307]

BTW....I took your advice and updated my template.

Thanks again...

[Milbo]

Great written by both of you.

Just to add, you can now use different thumbnail sizes by using the correct call in your template. If you use the vm native call you get thumbnails in different sizes and they dont need to be resized.