Optimizing photos and image files on your Squarespace website
We want you to feel confident that you’re sizing, naming, and tagging your images correctly.
Our clients often ask us about this issue, so we’ve created a comprehensive guide to help you ensure that your website’s images are working for you, not against you, in the search engines’ algorithms.
Image Size, Resolution, and File Names
It’s always a good idea to make sure that your images are optimized for web before uploading them to your website, and this is especially true if you have a very image-heavy design. Photographers, artists, and anyone else who plans to use galleries: definitely do not skip this step! Squarespace does a bit of automatic scaling on the images you upload, but that automation is not a replacement for human oversight.
If you want to do this editing yourself to have more control over image quality, the approximate specs for .jpegs are:
Less than 300kb per image (this is very important–less is more!)
72 - 150 dpi resolution
Image width between 1000px (for larger gallery images) and 2500px (for full-bleed/screen width images).
If images are smaller and will only appear nested in a page, make them as small as you can.
Generally speaking, the smaller the files can get without the quality suffering too much, the better it will be for the site's load speed, which is an important SEO issue.
Also, image file names are an excellent place to pack in some keywords for SEO, so we recommend always taking the time to give images unique file names that are "searchable" and relevant to the photo, with words separated by dashes. Long image file names are fine, but just make sure the file names have NO SPACES.
Here are a few examples of good image file names:
bw-portrait-photography-seattle.jpg
woman-smiling-with-child.jpg
blue-vintage-ford-truck.jpg
Squarespace has also rolled out a handy feature that allows you to edit your image file names right within the image block editor, so you can tweak them after they’ve been uploaded. (See image.)
If any of this is overwhelming or confusing, never fear! We can optimize your photos for you, and we're happy to provide this service to our clients. Most of our website design packages include image optimization, unless you specify otherwise.
More About Image SEO and Accessibility
It is also important to pay attention to your images’ alt tags. For a little bit of context, consider that Google’s newer algorithms prioritize accessibility. This is wonderful progress for web users with disabilities, but it also gives us a new set of responsibilities to consider as we set up your site.
The most relevant meaning of all this to you as you oversee your website build is this: the search engines will give higher rankings to websites that are filled with content that screen readers have no trouble finding and understanding. In Squarespace, there are several places where you can plug in alt text:
Image blocks give you the option to write an alt-tag describing each image. (See below.) To access these settings, find the pencil icon for the image block. Fill in the Image Alt Text area with a brief description of the image, and include keywords if possible without compromising the accuracy of your description. For instance, in the example below, the full alt text for the image is “teal, purple, and gray design for charter school website built on Squarespace.”
In galleries, either the “alt text” or the “title” area is read as alt-text.
For page banners and thumbnails, focus on optimizing the image file name, following the examples above.
For product images, we recommend optimizing both the image file name and the product title.
Filling in these areas with meaningful descriptions helps improve accessibility because visually impaired site visitors will be able to get something informative from your images, even if they cannot see them clearly.
We can help with some of these steps during your website build, but we also want to make sure that you feel empowered to continue to use best practices after we’re finished working together. As always, if you know that you need to remember how to do something specific when you’re updating your Squarespace site in the future, just ask us during a live call and we’ll record a custom tutorial for you!
The LightPress Team