How (and Why) To Optimize Images in Squarespace
In this post I’m sharing how to optimize your images in Squarespace —both WHY you want to optimize images, and HOW you optimize images.
Images and graphics are an essential component of any website, whether you're showcasing products, services, or creative work. Images tell a story, showcase your brand, and let your website visitors get to know you.
However - using high-quality images can often lead to slow loading times, which can lead to a poor user experience and negatively impact your website's performance (which will negatively impact your SEO).
That's where image optimization comes in.
Image Optimization is the process of reducing an image's file size without compromising its visual quality.
By optimizing your website images, you can improve loading times, reduce bounce rates, and enhance the overall user experience.
Win-Win-Win.
In this article, I’ll take you through the best practices for website image optimization in Squarespace so you can create a beautiful and speedy website that engages your visitors AND doesn’t slow your site down.
01. Understanding Image Formats
Here’s a quick breakdown on how to choose the right image format for your Squarespace website.
JPEG - usually lower quality than a PNG, but it’s smaller size, and typically the best choice for your website
PNG - high quality but typically larger than a JPEG. You want to use PNG for any transparent images (ie logos)
SVG - great for logos and icons that need to be scaled without using losing quality. Large in size. Use sparingly.
✍️ TIP: If you’re using Canva, I’ve found that if you download the original image or graphic as a PNG, and then convert to JPG and resize, the image quality tends to look crisper.
02. Sizing and Scaling Images
When it comes to website optimization, sizing and scaling images are key elements that can make a big difference in your website's performance.
WHY?
Well, large images can negatively impact your website's loading speed, leading to a poor user experience and possibly affecting your search engine rankings. In order to avoid this, you need to resize images to the correct dimensions before uploading them to your website.
✍️ Tip: A good rule of thumb in Squarespace is to keep your image size under 500KB. Ideally 250KB. Your resolution should be 1500 pixels or less on the longest edge. This ensures that your images look crisp and clear on all devices without negatively impacting your website’s load time.
03. Image SEO
Image SEO involves optimizing your website's images for search engines. Search engines (like Google) use a variety of factors to determine the relevance and ranking of a webpage, including the images used on the page.
Optimizing your images for search engines can improve your website's visibility, increase traffic, and ultimately lead to higher conversion rates.
In order to optimize your images:
Name your image files using descriptive and relevant keywords
EXAMPLE
Say Helen runs a amazing local photography business.
For ‘Helen Hernandez Photography’, rather than an image named ‘helen4.jpg’, you’ll want to enter text that is relevant to your business, like ‘Helen-Hernandez-Photography-Portland-Fashion-2023.jpg’.
When naming an image, you can include things like: your company name, location of your business, and description of services you’re selling.
✍️ TIP: Use hyphens like the example above, or plus signs instead of underscores or spaces.
Note: Every photo needs a unique name. Typically we just add a number to the very end of an image name, so the above example would be:
‘Helen-Hernadez-Photography-Portland-Fashion-2024+1’
Add alt text and title tags to your images
To add alt text and title tags to your Squarespace images, follow these steps:
Click on the image block on your Squarespace website.
Hit the pencil icon to edit.
Under ‘Content’ Scroll down to the “Image Alt Text” section.
Enter your desired alt text and title tags in the “Alt Text” and “Title” fields, respectively.
Click “Save” to save your changes.
Note: All alt text should be descriptive and accurately describe the image’s content. This not only helps with image SEO, but also makes your website more accessible to users with visual impairments who use screen readers.
KEY TAKEAWAYS
Image optimization is vital for website performance, user experience, accessibility, and SEO.
To optimize your images, make sure you use the correct file type that is sized and named accurately.
Keep image sizes under 500 KB, ideally 250 KB.
When you resize an image, make sure that the resolution is 1500 pixels or less on the longest edge.
By following these best practices for website image optimization in Squarespace, you can absolutely improve your website's performance and engagement.
