Product images very poor quality - help!

Site URL: https://www.blueprintsportsguides.com

Hi everyone,

I've been having this issue for a while now with no help from Squarespace support unfortunately. No matter what I do, my product page seems to only load the first 2 and the last images in full quality. Everything in between is compressed.

I've tried everything. Page duplication, new product, saving the files in different formats and sizes and nothing. The crazy thing is, when I move an image that looks bad in slide 3, to slide 2, all of a sudden that image shows full quality! So it's nothing wrong with my images, but something is happening on the site - It's driving me a bit crazy, as the low quality images (especially where there is text) look absolutely terrible. There has got to be a fix for this I'm hoping, otherwise I'll have no choice but to leave Squarespace. This is a basic fucntion that must work properly, and without so could damage sales (sorry for the rant).

Product page > https://www.blueprintsportsguides.com/purchase/p/football

Would really appreciate ANY and ALL help to this including potential fixes with CSS to force load HD images?

Many thanks

Edit: Just used inspect element, Squarespace seem to be compressing the faulty images by half so the width reduced from 1500 to 750. Why would this be and how do I fix it?

39 minutes ago, bluethebear said:

Site URL: https://www.blueprintsportsguides.com

Hi everyone,

I've been having this issue for a while now with no help from Squarespace support unfortunately. No matter what I do, my product page seems to only load the first 2 and the last images in full quality. Everything in between is compressed.

I've tried everything. Page duplication, new product, saving the files in different formats and sizes and nothing. The crazy thing is, when I move an image that looks bad in slide 3, to slide 2, all of a sudden that image shows full quality! So it's nothing wrong with my images, but something is happening on the site - It's driving me a bit crazy, as the low quality images (especially where there is text) look absolutely terrible. There has got to be a fix for this I'm hoping, otherwise I'll have no choice but to leave Squarespace. This is a basic fucntion that must work properly, and without so could damage sales (sorry for the rant).

Product page > https://www.blueprintsportsguides.com/purchase/p/football

Would really appreciate ANY and ALL help to this including potential fixes with CSS to force load HD images?

Many thanks

Edit: Just used inspect element, Squarespace seem to be compressing the faulty images by half so the width reduced from 1500 to 750. Why would this be and how do I fix it?

Hey on which devices/browsers you are seeing this? squarespace generate 7 variants for you images and based on certain condition the ImageLoader will select among them to display

4 minutes ago, Beyondspace said:

Hey on which devices/browsers you are seeing this? squarespace generate 7 variants for you images and based on certain condition the ImageLoader will select among them to display

Hi, basically all. Phone and Mac (Safari, then Safari on Mac and also Chrome). I completely take your point, but it doesn’t explain why images 1,2 & 7 load in full quality, and the others in half quality? When inspect element on an affected images, the URL shows 750w when it should be 1500 (this is the width of the exported image). If you change the end of the URL to 1500w it shows the full image. Why doesn’t it do this on the product page is the question I guess? 

Just looking again on my phone and the quality of the images are particularly bad for the ones affected. Just to reiterate again, I’ve expired all images in full quality (original files are fine) and uploaded all the same way. When I swap the image order those in slots 1,2 & 7 are ALWAYS full quality and those that aren’t are always low quality. 

Hi @bluethebear I also see, that the 3rd to 6th images are 750 x 500 pixels, while the 1st, 2nd, and 7th images are 1500 x 1000 pixels. If you move the 6th image to the last position, will its resolution truly change?

1 minute ago, kalevi said:

Hi @bluethebear I also see, that the 3rd to 6th images are 750 x 500 pixels, while the 1st, 2nd, and 7th images are 1500 x 1000 pixels. If you move the 6th image to the last position, will its resolution truly change?

Hi, yes it will. I’ve just moved the 6th image to the last place so you can see 

12 minutes ago, bluethebear said:

Hi, yes it will. I’ve just moved the 6th image to the last place so you can see 

No, it is still 750 x 500.

2 minutes ago, kalevi said:

No, it is still 750 x 500.

inspect element says 1500 whereas the other lower quality continue to say 750. Regardless the image in last slot has now increased in quality and I’ve not changed the uploaded file.

inspect element link (keeps inserting an image but link below):

all I need is for the images on my production all appear full quality 😞

9 minutes ago, kalevi said:

No, it is still 750 x 500.

Please see this screenrecording which perfectly illustrates it:

Image is first 750 bad quality, swap the order and all of a sudden good quality and 1500!? So strange, and driving me mad!

I’m wondering if something similar to the below could help fix my issue? But I’m just not too sure how to adapt the code to this situation…

https://www.reddit.com/r/squarespace/s/5WwqWXtDCe

16 minutes ago, bluethebear said:

I’m wondering if something similar to the below could help fix my issue? But I’m just not too sure how to adapt the code to this situation…

https://www.reddit.com/r/squarespace/s/5WwqWXtDCe

You can use this

<script>
window.addEventListener('load', function() {
    document.querySelectorAll('.ProductItem-gallery-slides-item img').forEach(function(img) {
        img.src = img.src.replace(/(\?|&)format=[^&]*/, '$1format=1500w');
    });
});
</script>

4 minutes ago, Beyondspace said:

You can use this

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.ProductItem-gallery-slides-item img').forEach(function(img) {
        img.src = img.src.replace(/(\?|&)format=[^&]*/, '$1format=1500w');
    });
});
</script>

Thanks for this. Where would I put it? I've tried code injection in the header but it doesn't seem to have made a difference

3 minutes ago, bluethebear said:

Thanks for this. Where would I put it? I've tried code injection in the header but it doesn't seem to have made a difference

Just updated script to use .load event instead, could you try paste it into Footer injection?

Just now, Beyondspace said:

Just updated script to use .load event instead, could you try paste it into Footer injection?

Still the same unfortunately. Thanks for your help so far though, hoping we aren't far off!

I've just tried a product with less pictures, and it is always pic 1 & 2 and the last one in full quality with the rest compressed no matter what I try. So weird!

Just now, bluethebear said:

I've just tried a product with less pictures, and it is always pic 1 & 2 and the last one in full quality with the rest compressed no matter what I try. So weird!

Out of curiosity, have you tried uploading similar images in PNG format and did you encounter the same problem?

Just now, kalevi said:

Out of curiosity, have you tried uploading similar images in PNG format and did you encounter the same problem?

Yeah exactly them same. No matter what image, size or file. Even when I add a new product, the issue is sitewide for me

Any other help hugely appreciated. Fix suggestions or custom code to force images to load in full quality, thank you so much

9 hours ago, bluethebear said:

Any other help hugely appreciated. Fix suggestions or custom code to force images to load in full quality, thank you so much

it seems that 1500px is the minimum size recommended. I suggest removing all seven of these images and re-uploading them at 2500px. Additionally, please remove and re-upload the images associated with the "With Football" and "Without Football" variations.

1 hour ago, kalevi said:

 

Based on the articles about image formatting: "You don't need to resize your images if they're wider than 2500px and meet our other specifications, but if you're exporting your images specifically to upload to Squarespace, try to scale them to 2500px in width. This will give you access to the full range of resized images we create while minimizing your upload times. If images appear blurry or pixelated, it is likely because they’re too narrow to display well on the web. In most areas of Squarespace, we recommend using images wider than 1500px ..."

it seems that 1500px is the minimum size recommended. I suggest removing all seven of these images and re-uploading them at 2500px. Additionally, please remove and re-upload the images associated with the "With Football" and "Without Football" variations.

I thought we had it then, but unfortunately not. I exported as 3x the size, so the files are now over 2500px width (and each file is over a MB) but still the same outcome. 

Site URL: https://www.blueprintsportsguides.com

Hi,

This has been driving me mad for a while now. My product page seems to load the first 2 and last image at 1500w, but all other images at 750w causing very low quality images. 

See here an example of this happening (proved through inspect element) 

I've tried everything. Exporting images at different sizes, different file types etc. The strange thing is, as show in the video above, when you move a picture from slide 2 (good quality) to slide 3 (bad quality) that image changes quality.

I guess i'm now looking for someone with a bit of know-how who would write some custom CSS to force load the images at 1500w, or tell me what is potentially going on?

It's a really frustrating issue, as my images have text on, so it makes for a pretty unpleasant viewing experience.

Any help greatly apprectiated. Link to my product page: https://www.blueprintsportsguides.com/purchase/p/football

Thanks.

11 hours ago, bluethebear said:

Still the same unfortunately. Thanks for your help so far though, hoping we aren't far off!

I dont think it is a problem with uploaded images (higher variants still acessible), it rather the issue of the product slide keep loading smaller version of the image at 750w

33 minutes ago, Beyondspace said:

I dont think it is a problem with uploaded images (higher variants still acessible), it rather the issue of the product slide keep loading smaller version of the image at 750w

Yeah completely agree, just don’t know why or how to fix it, so frustrating

@bluethebear @Beyondspace Now I see that you have uploaded new images as PNGs and they are all 1500px. - Voilà! 🙂

39 minutes ago, kalevi said:

@bluethebear @Beyondspace Now I see that you have uploaded new images as PNGs and they are all 1500px. - Voilà! 🙂

No, this is because I removed the Wiremo reviews widget... which seems to be causing this issue. Annoying as Squarespace has no good built in review service, but Wiremo seems to be breaking my images. Do you know of any good review services for squarespace? With ability to write reviews and show start ratings on products? I'll either need to ask Wiremo to try and fix, or move review providers. Thanks