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
  • 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.

If you're looking for a Squarespace Developer, drop me a line. 

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.

If you're looking for a Squarespace Developer, drop me a line. 

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...

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.

If you're looking for a Squarespace Developer, drop me a line. 

Link to comment
  • 1 year later...
  • 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


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

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.