Image Compression Problems (Screen Resolution Issue?)

[koryb1]

I'm stumped on why my images aren't as sharp as they should be. To demonstrate, I set up a test product at:

http://www.dancesupplies.com/Capezio-CC600-Adult-Boy-Shorts-Test.html

In this there are two images of the same subject; however the one on the left (let's call it Image A) is not as clear as the one one the right (Image B). Here's how I made them:

Image A - I uploaded a 2000 x 2000 pixel image and let ShopSite create a More Info size of 350 x 350.

Image B - I resized Image A myself to 350 x 350 before uploading, and did not have ShopSite create additional sizes.

In the Image Configuration settings, I have the "JPEG image compression quality" field set to empty, meaning there should be no compression when the More Info Image A was created. So why is Image A blurrier than Image B?

It must have something to do with the re-sizing, as if you click below the image where it says "More Images - Click to Zoom:" the 2000 x 2000 image opens up and is perfectly clear.

If anyone could help with this I would greatly appreciate it. This has effected every image on my store. I didn't really notice it until I purchased a newer laptop with higher quality display, but now that I have one it is really bothering me.

Thanks in advance!

[koryb1]

I've been thinking through this further the last couple of days, and now suspect this is more of a screen resolution issue. While Image A and Image B do appear differently, I think my problem is broader (and bigger).

The "blurriness" of my images was not something that stood out to me until I got a new laptop with a much higher resolution display. As it has a higher ppi, my images are perhaps just not big enough to look good anymore. Some quick Google searches enlightened me a lot about the web and how image quality is being effected by higher-res smartphones, tablets, and laptops (lots of articles like "Are High-Resolution Displays Screwing Up The Web?", etc.)

I'm not sure how to handle this. Perhaps I just need to use larger image files?

I designed my site two years ago with these defaults:
Page Width - 900 pixels
Product Page Image Size - 200 x 200 pixels
More Info Page Image Size - 350 x 350 pixels

What is recommended in this regard?

Further, I haven't yet made the move towards a Responsive theme. How are images sizes and resolutions effected? I know a responsive theme's layout will adapt to the size of the device's display, but does the image size change along with the layout?

Thanks in advance to all for any guidance/feedback.

[Jim]

Your store is using ShopSite 12. Under Images > Configure there is an option JPEG image compression quality which is blank by default and that will represent a compression of 75. Try setting it to 95 and then recreate the resized images and see if that improves the quality.

As for the size of images to use on your pages the 350 and 200 sizes should be fine. I would stay away from super large images like the 2000 x 2000 image at http://www.dancesupplies.com/media/CC600-boy-short-2000.jpg . Having an image that large will force the browser to display it at a different, compressed size because most browser windows aren't that big. My browser displays that image at 768 x 768. So unless you need to show extremely small detail an image that size is not going to help.

[koryb1]

Hi Jim, and thank you so much for the reply.

I set that field to 95 and it does make a big difference. The help pages actually state that if you leave that field blank no compression will occur ("If this field is left blank, no compression will be used."), so I guess that just needs to be edited. If blank uses a compression level of 75, then yes that versus 95 will make a difference.

One follow-up question:

Is there a way to have ShopSite create resized images with NO compression at all? While Image A on that test page I just had ShopSite recreate does look better, it is still not as clear as Image B. And they are both 20K in size so the 95 level compression doesn't appear to be saving much space.

I know I could upload all my own images set to the 350 x 350 size, but then they would be used for the "More Info - Click To Zoom" images as well. For these I want the full size to appear upon clicking (I generally use 800 x 800 for these).

Much appreciated!

[Jim]

There is no way to save with NO compression using ShopSite resizing, 95 is the best you can get with the library that is included in the code we use.

Every time an image gets resized some compression will always occur, it doesn't matter what application you use. This is similar to making a photocopy of a photocopy of a photocopy where each one gets a little worse. Even though images are digital, and an copy will be the same, any modification of that copy will result in loss of some data. So make sure you use the most original image that you can each time you do any manipulation of the file.

[koryb1]

OK Jim. Thanks again for helping out with this. Have a great weekend!