What’s the optimal image size?

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

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.

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.

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.

Great, I see no point in re-sizing images then, this is what my understanding was.Thanks!

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.

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.

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.

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.

Don't forget DPI! If you're uploading images that are 1500px wide, and 300dpi, you're bloating the file sizes. You should be going for 72dpi (web friendly).

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

You lost me there. Please explain. "Pixel size?" DPI probably shouldn't be used interchangeably with PPI, but even so, it contributes to overall file size and definitely IS a factor ;-).

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.

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

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

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

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!