Video Sizes
Resources
It’s important to optimize your videos for web, as it can quality and load speed of your site. Remember to follow the naming convention.
Recommendations
Limit to a max of 20 seconds
720p
Aim for file size under 20Mb
Save as .mp4, .m4v, .mov
Banner background video
(ex. Homepage), the video will not display on tablet or mobile. A fallback static image will need to be added. Read Squarespace recos.
Image sizes
Resources
It’s important to optimize your images as it can effect how fast or slow your site loads and the images clarity. The goal is smallest files size possible without sacrificing quality. For better quality, avoid screenshots of video, if possible.
Squarespace automatically creates different size versions of every image. The height changes relative to the width to preserve the image's shape. Squarespace's built-in responsive design automatically chooses the appropriate image size based on the visitor's screen. Due to retina screens, images are usually saved at 2x the actual size displayed on the screen.
SAVING
If you’re using the latest version of Photoshop CC, be sure to use their new export dialog under File > Export > Export As…
That usually outputs better results than using File > Export > Save for Web (Legacy), and definitely better than using File > Save As…
Source: Foreground Web
Save via “Export As”
Recommendations
Aim for image file size under 200k (maximum size 1 Mb).
50-70% quality (eyeball and adjust to the quality that is acceptable to you)
Use sRGB Color Space
Follow the naming convention!
full-screen images (banners, video fall-back images)
1500 -2500 pixels wide
Height should be cropped accordingly to how image will be used.
Currently, the only area this image occurs on the
About Page: Hero image (515px h)
About Page: city image (this is a free squarespace image - not sure if you want to use your own)
Video fall-back image (515px h)
Photography projects
1500-2000 pixels on the long edge
Thumbnails + POrtraits
1000-1500 pixels on the long edge
For future-proofing efficiency, crop images to 16:9 before saving.
Client logos
Use psd file provided.
300px x 300px Saved as a transparent .png
Focal POINT
Depending on a layout’s grid, aspect ratios may differ, so the image will become cropped to the focal point of the image (ex. in a thumbnail with aspect ratio of 1:1).
Focal point can be repositioned in Squarespace.
