How to Optimize Your Images to Make Your Squarespace Website Better
Nothing ties a website together like the photos you use. They have the potential to grab and hold the attention of your dream customers. If your visuals have that much power, we want to ensure they're performing as well as they can so your website can make the best impression.
Optimizing the images on your website may sound intimidating, but the benefits are worth the effort it takes. And don't worry, we'll explain everything in this blog post so you'll know why it's so important to take the time to ensure your website is full of high-quality images and how you can do it yourself.
Let’s dive in!
Why Optimize Images?
There are two main reasons why you should pay extra attention to your website's images.
The first reason is your customers! This is all part of the user experience, or the process of making all the interactions visitors have with your site into something effortless and enjoyable. So no matter what device your audience is looking at your website on, your pictures and content will show up perfectly.
Most websites are designed on desktops, but most people view them on mobile devices. Optimizing images for responsive mobile design ensures that they adapt and display perfectly on different screen sizes so your website doesn't have awkward cut-offs or distorted images and is visually appealing and user-friendly for all viewers.
Making sure the images on your site are optimized to display well also improves SEO, or search engine optimization. It's all about making your website easier for search engines to find and put in front of the people looking for the content you share online.
When search engines can "read" the images on your site, then they’re better able to understand the overall message of your site – which means that you need to make sure that all your images have a name that describes what's going on in the picture.
Larger images weigh down a site and can negatively affect your page loading time, which means your site will rank lower and turn away visitors who don't want to wait for your site to load.
Optimizing your images is a great idea for both performance and aesthetics, and this blog post is going to teach you the tips and tricks you need to know so your website looks good and works well!
Optimizing Images to Improve the Performance of Your Squarespace Website
Functionality turns a well-designed website into an experience for visitors. What better feeling is there than people coming to your website because they want an answer to a specific question, but staying because they can't get enough and want to explore every corner of your site?
Optimizing images is just one stop on your journey to achieving just that. There are five ways you can elevate your website by optimizing your images...
1. File Types
There are two main types of image files: JPG and PNG. PNG images are typically higher quality and have larger file sizes, but JPG images load quicker, take up less space, and are a better option if your image has lots of colors. PNG files can have a transparent background, whereas JPGs cannot. So for logos and images that you're layering on top of others, PNG is the way to go. You can convert one file type to another using an online tool like png2jpg.com (you can also use jpg2png.com to make the opposite happen).
2. Resizing
The larger your image is, the more time it's going to take to load. And we want your website to be as fast as possible! Instead of uploading an image of whatever size and Squarespace auto-resizing it to fit whatever parameters you've set, crop your image to the dimensions you want before adding it to your website. This will also help to preserve the quality of your image. Use these measurements as a general rule of thumb for specific kinds of images on your website...
Banner images: these are the images "above the fold" on your website, or the ones that people first see on each page of your website. Typically the best image size is 2000px by 1200px but it can vary a bit from one layout to another.
Headshots: these images are typically used for profile pictures or team member bios. A common size for headshots is around 400 pixels by 400 pixels. This size strikes a balance between image quality and loading speed. You can adjust the dimensions based on the specific layout requirements of your website design.
Background images: a background image is a great way to make a section on your website stand out. Because sections can vary in height, it's always best to just make sure that the image can cover the entire background without looking stretched or low-quality. A typical section is around 2500px wide by 1500px tall.
Logos: it's usually best to keep your logos small since they're normally used for site headers, footers, or as a branding accent. Because your logo is typically so small, 250px by 100px is usually a good size. Just make sure it looks sharp and clear.
Pro tip! Squarespace recommends using images that are no wider than 2500 pixels for optimal performance.
3. Compressing Images
Faster-loading images are smaller file sizes. The smaller, the better! Online image compressors make this a super easy and quick process. Use a website like tinypng.com or tinyjpg.com to make your files take up the least amount of space possible. You should always try to make sure that your image file sizes are 500KB or below. If they are taking up a small space on your website, try to get them under 200KB. Follow these steps to compress your images without compromising quality:
Download or select your photo – this could be anything from a stock photo you found online, an image from a brand photoshoot, a screenshot, or a mockup! Make sure it's in an easy-to-access place, like your desktop. If it’s a large file, you’ll need to resize the file following the guidelines in step #2 above.
Upload your image to tinypng.com – all you have to do is drag your image from wherever you saved it and it will automatically start compressing if the original file size is 5MB or under.
Download your compressed photo and upload it to your website
4. Rename Images to Improve Squarespace SEO
Most image file names are typically a jumble of letters, numbers, or something quick we put in to help us identify the file. But when you upload your image to Squarespace, it can be so much more! This is a great opportunity to further optimize your website for SEO. Little SEO robots are constantly analyzing your website to make sure it's showing up in the right search results for the right people and whenever it gets to a picture, it reads the information without viewing it. When your file name includes descriptive information and keywords, then it'll be able to properly categorize your website so it's seen by your ideal clients.
Sometimes, despite how hard we may try to make sure that our websites load quickly, lousy internet connections win over. When this is the case, websites may not always load images. But when visitors hover over the place where an image obviously should be, it will provide them with the image file name instead. This will give visitors a better idea of what's on your site so they can picture it in their minds instead.
Try to include at least one of the following in your image descriptions:
Descriptive information for website accessibility and slow load times
SEO keywords for crawlers and search engines to understand
5. Add Alt Image Descriptions
Last but certainly not least, everyone should be adding alt descriptions to their images! Not only will this score you more SEO points, but it is essential for those who are visually impaired and using screen readers so no one is missing out on the visual content on your website.
As is the case with image descriptions and file names, alt image descriptions act as a text-based representation of the image content, which allows search engines to understand and rank your website accurately. When you pair alt text with relevant keywords, it can positively impact your website's SEO and improve its chances of appearing in relevant search results.
To add alt text to images in Squarespace, follow these steps:
Edit the page: Log in to your Squarespace account and select the appropriate page
Select the image: Click on the image you want to add alt text to
Click the "Edit" icon: In the top-right corner of the image block, you'll see a small pencil, click on it to open the image settings
Open the "Content" tab: In the image settings, click on the "Content" tab
Add alt text: In the "Content" tab, enter your image alt text
Save your changes: Click the "Apply" or "Save" button to update the image with the alt text
See below for an example of where to input the alt text for images in Squarespace:
Squarespace Websites for Health & Wellness Professionals
Optimizing your images isn't only about the backend of your website, it's about the design as well. A well-designed website will utilize images in a way that captures the attention of your dream clients and keeps them scrolling through your website.
A customizable and modern website template will save you tons of time and hassle by including all the prompts, guidelines, and information you need to make sure your site is optimized and accessible to your potential clients.
The video tutorials included in our website templates walk you through image optimization so you can be sure all of these best practices are followed and your site is in tip-top shape! Learn more about our website templates for health & wellness professionals by clicking here.