Optimize the SEO of your site with images
Why is it important to optimize your site's images?
- improve search engine ranking
- speed up the loading of your site
- create better engagement
Your ranking in Google search results can be affected by site load time. If you don't optimize the images, this difference in loading time could push you to the next page of Google results.
We must therefore do everything in our power to ensure that our website loads as quickly as possible.
To do this you need to reduce the size of your files and name your image files to further improve your search engine ranking.
Image formats
.PNG - graphics, illustrations or anything transparent
If you are using a graphic, line drawing or illustration, it is best to use the .png (portable network graphics) format. PNG is a lossless compression and offers transparency options. So if you want your graphic to be placed on a colored background and not have a white box behind it, the transparent .png format is the perfect solution - perfect for logos.
.JPG - photographs
If you are using a photograph, you will want to use the .jpg (joint photographic experts group) format. JPG is a lossy compressed format that allows photographs to be stored in a smaller size than other formats. The exception to this rule is that if the photo contains text that needs to be crystal clear, you can use the .png format.
The size of the images
The size of your images depends on how you will use them on the site.
Banner images
These are images that span the entire width of your website. They should be 2000px wide. To save on file size, it also helps if they are oriented in landscape rather than portrait, so you can crop them to landscape.
Solid color backgrounds
If you are using a solid color background, you can use a very small sample of the color saved as a .png file. Squarespace will automatically repeat the sample.
Images without banner
Images in landscape orientation
As a general rule, if a landscape image is intended to appear in a lightbox (a popup that displays the image in a larger view, often within the gallery blocks) or to be displayed across most of the width of your website, it should be 1500px wide.
If you are using it as an inline image (displayed on the page in the text) and it will not be enlarged, I recommend saving it at 750px wide.
Images in portrait orientation
As a rule, I save images in portrait orientation at 750px wide.
Optimization of image size
To optimize image size, I recommend using https://www.bulkresizephotos.com/ to set your width based on the pixel dimensions we discussed in the last section. Upload your images in bulk to save time.
Squarespace recommande que chaque image soit inférieure à 500 Ko et que la taille totale de la page soit inférieure à 5 Mo. Je vise encore moins pour chaque taille d'image, <350 KB pour les images de bannière et <200 KB pour les images sans bannière, et une taille totale de page de <3 MB. Dans certains cas, comme les pages de portfolio contenant beaucoup d'images, vous devrez peut-être mettre en balance la vitesse de chargement de la page et la mise en valeur de votre travail. Dans ce cas, je vous recommande de maintenir la taille totale de la page à moins de 5 Mo.
If the size of your image files is still too large after using the Mass Resize Photos feature, you can subject them to another compression method using https://tinypng.com/.
You can check the page size with a tool like this one: https://sitechecker.pro/page-size/.
This cute puppy image was originally 1.3 MB (almost 5 times Squarespace's recommendation) when it was uploaded from Unsplash (a stock photo site - more on that later!) After resizing to 1500px wide on bulkresizephotos.com, the file size was reduced to 83 KB, a reduction of over 10x. The image still looks great and your website has become much faster.
The importance of image file names and how to name yours
Now that our image file size has been optimized, it's time to further optimize our image for SEO. To do this, we start by creating a relevant file name.
Choose your file name thoughtfully.
Your file name should make sense in relation to your website and the image itself. Search engines use this information to understand the context of your website, so relevant file names are useful for search rankings. Your file name is a great opportunity to incorporate your keywords if they are relevant to the image.
TO DO:
Use dashes (not underscores or other characters) to separate words - this allows search engines to analyze them properly.
Keep image names short, but descriptive.
Rename the image before uploading it to Squarespace.
WHAT NOT TO DO :
Use more than five words to name your image.
For example, if I am a photographer and I post a picture of a floppy disk taken during a shooting for the brand Vans I can name the file "shooting-car-vans.jpg".
A word of caution: beware of "keyword stuffing". If you follow the example above, you won't name every image on your website "shooting-car-vans-1", "shooting-car-vans-2", etc. Use words that make sense in the context of your website and the photo, but don't repeat the same words or phrases in the same order more than a few times.
Good: shooting-car-vans.jpg
Bad: shootingvoiturevans.jpg (without hyphen to separate the words)
Good: shooting-laverie-vans.jpg
Bad: shooting-laverie-vans-montantes-jean-bleu-2023.jpg (too long)
Alt text and how to add it to your Squarespace site
Alt text, or alternative text, refers to words that are displayed in place of an image if the image does not load or for people using accessibility devices such as screen readers. Also important, alt text is used by search engines as a ranking factor for your website.
The alternative text should be descriptive and specific. For our wedding cake photo, we could use "vintage photo shoot for the Vans shoe brand". The alt text should not exceed 125 characters.
For Inline images, the caption becomes the alt text. You can set a caption and then hide it using the "Don't show caption" option in the Image panel, under the Design tab. For the other image styles in the image block (Poster, Card, Overlap, Collage and Stack), first set your image as an Inline image to add the caption, then change the image to the style you want to use.
For images in the gallery, the title becomes the alt text. If you do not add a title, the description becomes the alt text.
For product images, the title (under Edit Image Metadata) becomes the alt text.
For blog post and event thumbnails, the title becomes the alt text.
Banner images do not have alternative text. So make sure your file name is descriptive.
Should you use Unsplash's built-in integration?
We have to do everything in our power to make our site load as fast as possible.
Using Unsplash's built-in integration involves much larger image files (and a slower website) than the method I described in this course.
For example, let's look at the image from our shoot:
Image added directly to Squarespace from Unsplash integration: 1.1 MB
Image downloaded from Unsplash.com, optimized, then uploaded to Squarespace: 90 KB
A file size saving of more than 10x.
Smaller is faster - and faster is better
We know that a faster site can potentially mean better visitor engagement and a higher position in search engine results. So while Unsplash integration is easy, if you take the time to optimize the images and upload them yourself, you can speed up the loading of your site.
Did you know that?
You can reuse images that you have already uploaded to your website. When you open the Image block, click on Find Image and then click on Imported in the window that opens. You can scroll through a library of images already on your website to reuse them.
Other ways to optimize your website
All Squarespace websites are designed to be easily indexed by search engines, but there are some important steps you should take to make the most of these features.
Review the official Squarespace SEO checklist to ensure that your site is optimized for both search engines and your site visitors.
Advanced Tip:
If you change the URLs of pages on your website (like /about or /my old page), be sure to use URL mapping to preserve your search engine ranking. If you have more than a few pages to redirect, I've created a handy URL mapping spreadsheet that you can use to create the necessary code.
If you wish, the creative team can optimize the SEO of your site for you, do not hesitate to contact us!
