Product Images Sharp Then Blurry - Please Help!
We would really appreciate your help with this. Our entire eCommerce site is solely dependent on the quality of the images of our jewelry products. When we view a page of images (featured images for our Jigoshop products), after you first load the page, all the images are sharp. A second later, they all go blurry. Likewise, when we zoom in and out on the page (CTRL + scrolling), the images go from sharp to blurry, in a second, with each view. Do you know of a way to keep the images sharp? Is it a responsive issue? We really need our images to be sharp. The blurry images just aren’t showing well.
Here is an example page of images/products: http://dev.simplebeadpatterns.com/all-tutorials/
Also, we’ve done some research about images uploaded to WordPress, and we understand that WordPress saves several different images sizes, as well as the theme. So, for one image, I believe we have six different sizes saved on our website. We would love to decrease that so that there are less copies of each image and less space used, since we have a TON of images on any given page. Under “Media Settings”, we’ve changed the Medium and Large Sizes to be 0, but kept the thumbnails at 256 x 192 (just in case because we read that changing the thumbnails to 0 could break them). Do you know if there is anything we can do to reduce our overhead when loading a page, because our page load time is slow.
Our biggest priority is fixing the blurry images, but if you have any suggestions about speeding up page loads, we’re all ears.
P.S. - A quick response would be sincerely appreciated. We’re in the process of re-uploading all of our images, due to the Jigoshop upgrade, and this is holding us up.
Thank you so much for your help.
It looks like the border applied in the plugin’s plugins/jigoshop-ecommerce/assets/css/shop/list.css file is causing this problem by reducing the image by 2px (1px on each side).
You may be able to see what I mean here:
Removing the border property from the img tag or adding the excess to the max-width/max-height property should fix the blurriness problem.
As for the way WP saves images, I feel your pain. Any given plugin or theme can add an image size via add_image_size() which will generate and save a resized copy of EVERY image upon upload. That shouldn’t have an effect on your site speed, however. It only uses more disk space - which is pretty cheap these days.
I can see that the page is loading very slowly. I don’t think the DNS/server is necessarily to blame here as I can ping files on the same server relatively quickly. I have a hunch that it could be a plugin causing excessive database queries. You might try making a backup of the database, then go through and deactivate each plugin one by one and reload the frontend to see if you can find the culprit. I recently had a similar issue which turned out to be a mega menu plugin.
Thank you SO much for your quick response and helpful feedback!
We removed the borders on the featured images, as you suggested. My business partner, who has an older laptop, says it looks better. But, on my brand new laptop, (with a higher end graphic card), it still seems sharp and then blurry a second later. Would you mind peaking and seeing if there’s anything else we can do to improve image quality?
As for the speed of the website, we just deactivated each plugin, one by one, and ran a speed test after each deactivation. We could not find a culprit for the slowness of the site - it’s loading in 4 - 6 seconds, instead of the ideal 2 seconds. We’re going to try to get a caching plugin that works with Jigoshop eCommerce, but other than that, we’re at a loss of what to try next. Do you have any other suggestions?