Squarespace website sharpness loss

G

gpc1

Suspended / Banned
Messages
2,289
Name
Greg
Edit My Images
No
Hi
I use squarespace for my web and upload images in ‘Gallery Blocks’ This is essentially a bulk upload that displays images stacked much like a storyboard.
My workflow for uploading is
Edit in LR
Open is PS
Sharpen (high pass)
Use the PS ‘Save for web’ at 1500px Bicubic Sharpener and fine Jpeg
Then upload to website.
The images in PS are tack sharp (or at least sharp as possible with my skills lol) but when presented on the web they are much softer. It’s noticeably different. Fine details are somewhat lost.
As an example the bride was wearing a headpiece of pearls and diamonds. In the Jpeg you can make out the edges of the diamonds whereas in the web version you can’t….Simple fact is there is definite loss of quality.
I have raised a ticket with squarespace but is there something I should be doing in the edit / post process that would help. Their max image size is 1500px. I have tried at 1500px and 900px wide and the loss is the same…

Thanks all, this is driiving me a bit nuts!!
 
Hiya,
We use Squarespace in work (albeit an older version than the style you have used), can you get some screenshots of the upload process in Squarespace? Perhaps one of us can spot something...
Nowhere near an expert but sometimes it's just an extra set of eyes can help

Vici
 
ok, so i have been back and forth with squarespace re this, andd their customer service as usual has been excellent.

What has transpired is this. Firefox is blurry! I dont know why and am still doing digging but it seems a common problem. I viewed my images / website in chrome and they are spot on. the website looks so much sharper when viewed in chrome......

im slightly astonished by this, FF is such a common browser too, im a bit concerned. I know the average joe (and my site doesnt exactly get many hits anyways) doesnt scrutinise sharpness but i want my images to be as expected, ie as output from photoshop...

im considering putting a note along the lines of 'best viewd in chrome' on the website....shouldnt have to but not sure what else to do...

here is a side by side comparison, check the pearl headpiece....
 
Well b****r me sideways.
Could you ask support if they can suggest any coding that can be added based on the viewers browser? So it only shows the "best viewed in Chrome" text if they are using FF or IE (or just anything other than chrome). If they aren't able to it might be worth putting it forward as a suggestion or feedback type thing. I'm pretty sure it is possible so can't really imagine why they wouldn't be able to do this.
Vici
 
You're hoping for the impossible. As you downscale you must remove sharpness. All you've proved is that for the scaling ratio you tested, with the GPU and screen processing you have that chrome is better.
 
First thing I would ask is, if you're that worried about sharpness, why are you letting a web browser rescale your images? Using the browser rescaling is going to produce a wide variety of results, some of them quite awful.

A quick look at your web site shows the display size for the images in your slide show seems to max out at 662 px wide. Some of the JPEGs are at 900 and most 1500 wide; there seems to be at least one on the Home Page [IMG_7025.jpg] that is full-res 5366 x 3577 px, 17.5 MB file, which is loaded with two different URLs, bringing the total download for your home page to 41 MB (!!! more of this later).

Now, I can see that you're using CSS to dynamically resize the gallery and reflow the layout depending on the window width, but I'm not sure how using images that are nearly three times larger than you're actually using in the page is really helping things out.

I know I'm a bit old fashioned and started designing web pages when people were using often using 9600 baud modems to get on the internet and when the recommendation was that a single page load should be no larger than 100 KB, but the golden rule advice always was that if you care about the appearance of your photos, upload them at the size they're going to be displayed at, especially for a critical element of your site like the Home Page slide show. At least, resize them on the server (statically or dynamically) before delivering them to the users. Rescaling them with the browser is putting things into the lap of the gods.

I took a look at some of the other parts of the site, notably the Wedding Stories and there are some huge pages, in terms of data downloads.

On these pages, you seem to be settling on somewhere around 900 px wide display, but the source images are still 1500 px wide. This means you're delivering image files that are nearly three times bigger than is necessary for display size on the page. The most recently added Wedding Story for Carla and Joe weighs in at a whopping 141 MB!

This no good for your visitors, nor your own server's bandwidth costs, if you're paying per GB.

If someone is going to look at your site with a screen that's only 800 x 600 (I'm thinking this is an adaptation for mobile phone users) and you're going to use CSS to crunch the photo and layout down to fit that frame, then image quality on a device like that is unlikely to be that great anyhow.

Consider that, if you're producing a mobile-friendly CSS theme (from a layout perspective), then the visitor is likely not to be browsing with a fibre connection, either. There seems to be a contradiction built into the design of your site here.
 
Musicman said:
First thing I would ask is, if you're that worried about sharpness, why are you letting a web browser rescale your images? Using the browser rescaling is going to produce a wide variety of results, some of them quite awful.

A quick look at your web site shows the display size for the images in your slide show seems to max out at 662 px wide. Some of the JPEGs are at 900 and most 1500 wide; there seems to be at least one on the Home Page [IMG_7025.jpg] that is full-res 5366 x 3577 px, 17.5 MB file, which is loaded with two different URLs, bringing the total download for your home page to 41 MB (!!! more of this later).

Now, I can see that you're using CSS to dynamically resize the gallery and reflow the layout depending on the window width, but I'm not sure how using images that are nearly three times larger than you're actually using in the page is really helping things out.

I know I'm a bit old fashioned and started designing web pages when people were using often using 9600 baud modems to get on the internet and when the recommendation was that a single page load should be no larger than 100 KB, but the golden rule advice always was that if you care about the appearance of your photos, upload them at the size they're going to be displayed at, especially for a critical element of your site like the Home Page slide show. At least, resize them on the server (statically or dynamically) before delivering them to the users. Rescaling them with the browser is putting things into the lap of the gods.

I took a look at some of the other parts of the site, notably the Wedding Stories and there are some huge pages, in terms of data downloads.

On these pages, you seem to be settling on somewhere around 900 px wide display, but the source images are still 1500 px wide. This means you're delivering image files that are nearly three times bigger than is necessary for display size on the page. The most recently added Wedding Story for Carla and Joe weighs in at a whopping 141 MB!

This no good for your visitors, nor your own server's bandwidth costs, if you're paying per GB.

If someone is going to look at your site with a screen that's only 800 x 600 (I'm thinking this is an adaptation for mobile phone users) and you're going to use CSS to crunch the photo and layout down to fit that frame, then image quality on a device like that is unlikely to be that great anyhow.

Consider that, if you're producing a mobile-friendly CSS theme (from a layout perspective), then the visitor is likely not to be browsing with a fibre connection, either. There seems to be a contradiction built into the design of your site here.
Click to expand...


Rob - Thanks for such a detailed response. If i may, ill go through some of the points you raise just so i can be sure i understand it as, after posting such advice, it would be rude of me not to take it on board and improve the site.

In terms of sharpness, in not TOO fussed. Im no pixel peeper and am fully aware that there are many more components that go into a good image other than sharpness (all of which im working on improving lol). My main concern was the difference between what i saw in PS / LR vs what i saw on the web.
Im still unsure as to WHY FireFox would do something different to chrome. Still learning!!. I dont think its my combinaiton of browser, machine etc etc. I have looked at this on different machines and different screens. All show a noticable differenece between FF and Chrome.

Square space i beleive automatically resizes images and recomends uploading at 1500px. However (lightbulb moment after reading your post) i think that is because some of their galleries can display this size. I think what your saying is that the way i have MY site set up, the slide show will only ever be a MAX of 662px wide and the wedding stories will only ever be a MAX of 900px regardless of what size screen they are viewed on. Is this due to the 'padding' and the template style.... i beleive so..

So i would be far better off uploading the wedding stories at 900px, the slide show at 662 and any smaller images at the relevant size for the contianer they are in? Would Jpeg quality reduction from 100% to, say, 90% also give a better improvement in terms of load speed vs loss of quality?

Squarespace also 'dynamically' resizes and does something else fancy so that it displays on phones and tablets easily. I just checked on a mates ipad (mobile data not wifi) and the images are sharp, but it does take a a little time to load.

Im not sure why i have 2 different URLs on an image. Will check that. Thanks

Thanks again.

I gues the only outstanding point is why the diff between FF and chrome. I still dont understand this, and probbaly never will. I originally uploaded the images at 900px and there was still a noticable difference between FF and chrome....

Thanks again, much appreciated

Rgds
 
I think Rob has made a very good point about both image file size and also resizing. Resizing an image in a browser will always reduce quality, and even if Chrome appears sharp with these, that may not always be the case. It's always best to upload an image at the exact size it will be displayed if quality is important, even to the point of loading different sizes for different situations. Also smaller images seem to benefit from slightly different processing from larger ones to retain detail & impact (but that's another story).
 
You must log in or register to reply here.
Back
Top