How should I handle photos and image files on my 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!)
Image width between 1000px (for larger gallery images) and 2000px (for full-bleed/screen width images).
If images are smaller and will 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:
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 Images and SEO
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 a caption describing each image. Fill in this caption area with a brief description, even if you decide to hide it. Also, this caption MUST be entered in the “In-line” style caption area. If you want to use a different style (like Card, Stacked, Poster, or Collage), start first by entering your alt-text as a caption while viewing the in-line style, hide the caption, and then switch over to a different style.
In galleries, 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