Jump to content

What’s the optimal image size?

Recommended Posts

Does anyone know the optimal image size to upload so that it is sharp at full screen, but doesn’t unduly slow the loading of your site? Also, does it even matter?

Are images you upload held someplace on “static.squarespace.com…” area? That way it can be re-sized for large screen, tablet, smartphone, etc.

I ask because I find my site can load slow sometimes and I noticed that the image sizes I uploaded were fairly big, 1000 × 1000px.

Just trying to understand it better before I spend a bunch of time re-sizing images to potentially speed up my site.

Thanks in advance for any insights.Ken

Link to comment
  • Replies 16
  • Views 89.3k
  • Created
  • Last Reply

TLDR: You can upload DSLR photos and they will be optimized to approximately the right size before being served, so your users aren’t downloading the original image.

Squarespace’s ImageLoader already looks at the size of your container and picks the appropriate size to load so that the image fits. Retina is accounted for, and people on retina screens get larger images that load slower.

You can use your web browser’s developer tools (typically: right click and hit “Inspect Element” on any image on your site). There should be a big URL that’s clickable in the tools interface, like:

<img … lots of stuff … src="http://THIS…?format=500w">

– that last bit, format, tells you which version of your image got loaded. You can upload a gigantic DSLR photo for your homepage thumbnails, but if you see the format=XXXXw thing, it’s actually a scaled down version of your image, where the Width is whatever XXXX is.

Developer at Thinkful.com Developed the Shutterstock Blog, and a few other SQSP sites while at Big Human. Formerly at Google.

Link to comment

Thanks!So as I understand then, there is no need to re-size my images to lessen the size and hopefully speed up the loading of my site. So long as the aspect ratio is what I want, then SS6 will scale appropriately.This is what i thought.Thank you.

Link to comment

Squarespace online materials state that a width of 1500 pixels is optimal. Images wider than 1500 pixels are resized to 1500 on upload but can have a small delay before becoming available.

The system produces different versions of the uploaded image for different usage scenarios - browser, tablet, retina display - and serves out the most appropriate one for the user's device.

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

I'm not sure if that's 100% true. There was another user who had very slow loading galleries. When he optimised his images and reuploaded them, the site loaded quicker because the images had smaller file sizes.

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

As I said in a comment to another answer in this thread, keep an eye on the performance of your site.

High quality DSLR photos (Jpeg FINE or similar) give a very large file size that Squarespace will then produce versions of for display on different device viewports.

If you experience slow image downloads it may be a good idea to experiment with saving out your original images with more Jpeg compression before uploading (70-90% quality gives good results * much smaller file size). It should be the case that the versions Squarespace creates from the smaller original will also be smaller.

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

To follow up on @silvabokis... It is a good habit to always save your images for web at jpeg quality level 8. At screen resolution, there is no discernible difference between level 8 and 12 (maximum), but level 8 produces a significantly smaller file size.

Link to comment

I use the 'Save for Web' setting in Photoshop, and then manually tweak the 'Quality' setting and sometimes add a very slight blur. My quality setting can be anywhere from 35 to 90, and I will blur up to 0.06. My size goal is usually 250kb to 400kb (for 1500px wide images). Maybe I'm old-school, but I tend to sacrifice a bit of quality for load speed, especially on image heavy pages.

I often encounter slow loading images on users V6 sites, where people have just uploaded large files, and while they are reduced in size by the system, I don't find them optimized at all - they could be reduced in file-size by 2 - 3 times without a huge hit in picture quality.

Link to comment
  • 8 months later...

If you're outputting at a certain pixel size then dpi isn't a factor you need to consider when saving an image.

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

Dpi is a function of the printer/display capabilities.

A 1500 pixel wide image appears 5 inches wide at 300dpi, 10 inches wide at 150dpi & just over 20 inches wide at 72dpi. The file size remains unchanged.

You're correct that if you wanted to display an image 5 inches wide on a computer display then saving 5 inches wide at 300dpi would produce an unnecessarily large file. However, Squarespace resizes your image based on the screen size & supported pixels per inch. That means it will deliver a lower res (smaller file size) file for a standard display than it would for a retina display.

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment
  • 1 year later...

could you please clarify what you're using to save your images for web? You mention the quality levels 8 to 12

Lightroom has a quality range from 0 to 100

Link to comment

8 to 12 is Photoshop. For Lightroom you want to be in the 80-100 range.

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

In fact, you can often get away with even greater compression but 80-100 is a good rule of thumb.

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment
  • 2 months later...

Old thread, but I'm still unclear about image resizing. I have a very clear understanding of compression and file sizes - just unclear about the way squarespace uses these images.

I have an art gallery website. Pages are image heavy. I want to show the paintings in the best possible light but loading times are clearly an issue.

I'm currently exporting from aperture at 1500px wide image quality around 70%. The images look great but each image file size is between 300k and 900k. Probably too large when loading multiple images on a page.

If I go down to 1000px and compress a little further to say 60%, will the additional resized images that squarespace creates be smaller or would they all be the same as if the original image was 1500px and 100%?

Will a smaller compressed image force squarespace to make smaller file sizes for the additional images it creates for different display sizes?

Any clarity on this would be greatly appreciated. Thanks!

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.