How to Optimize Images on a Squarespace Website: 5 Essential Tips
Photos and images are vital to websites:
They grab visitors' attention
They showcase products and services.
They break up text.
As far as we are concerned, photos, images, and graphic elements are essential to great web design. Unfortunately, poorly optimized image files can drag your website down, impacting SEO as well as site performance, usability, and ultimately, conversions.
In this post, we will share some tips on how to best optimize images for a Squarespace website!
Why You Want to Optimize Images on your Website
Optimizing images is the single most overlooked factor by DIY web designers. This is bad news because the images and photos used on your website can impact your website loading speed and your search engine optimization (SEO).
Reason #1 - Website loading speed. Large files load slowly. If you have a lot of large image files on your site, your site and page loading speeds are going to slow way down. You don’t want that to happen! Users expect sites to load fast. How fast? One to three seconds! How many times have you tried to load a site, only to have to wait or had to watch the image files ever so slowly fill in? Did you stick around and wait for the page to load or did you leave? 99% of the time, I leave and go to a site that loads faster. Don't drive your site visitors away before they even get a chance to know you…optimize your images to cut down on loading speeds.
Reason #2 - SEO. Did you know that search engines crawl the image files on your website and use that data to return search results? Yep! Search engines look at image file names and descriptions as well as site loading speed when they are crawling a site. You definitely want to optimize your image descriptors with keywords that accurately describe the image. A filename of IMG_123.jpg doesn’t tell Google anything about the content of the image file, but a filename of Blue_Summer_Dress.jpg does.
5 Tips to Optimize Images for Squarespace
Now that you know why it's important to optimize the images on your Squarespace website, we're going to tell you 5 specific things you can adjust in your image files for improved performance.
Squarespace Fact:
Squarespace makes it easy to get your images just right. The platform has built-in responsive design, which will automatically adjust the site for best viewing on each individual visitor's device. This is hugely helpful for designers and site owners since it takes the guesswork out of image sizing!
First things first…you will need to access the file data of the original image to make the changes suggested below. On PCs, right click and select Properties. On Macs, press Option and click on the image file, then select Get Info from the drop down menu.
Once you have access to the file data, optimize the file using the checklist below.
Check image size and compress if necessary.
Squarespace recommends a file size of less than 500KB per image for best results. Make sure your aspect ratios stay consistent and watch your page size, keeping total page size under 5MB for best performance. We love using the website tinypng.com to compress our image files without sacrificing image quality!
Check image file formats.
Squarespace accepts .JPG, .GIF, and .PNG files. It does not accept .PDF, .PSD, .HEIC or .DOC file formats.
Update filenames and descriptors.
Use letters, numbers, underscores, and hyphens. Avoid accented letters, symbols, ampersands, and question marks. Make sure the names and descriptors accurately reflect the content of the image. Use keywords if possible.
Check pixel dimensions
Images between 1500 and 2500 pixels wide are recommended for optimum performance, unless it is an animated .GIF. Even a 1500 pixel animated .GIF file will slow down your site, so go smaller. Format animated GIFs at the size you want them to display for best results.
Avoid adding text directly to an image file.
Avoid adding text directly to the image file. Instead, if you want to put text over a photo, use the “Poster” layout for image blocks in Squarespace - that will give you added SEO benefit. Overlaid text is searchable, but text in an image is not. If you do use text in the image, save the image as a .PNG file.
That's it! Just tweaking or checking for those 5 little things will optimize images on a Squarespace website. You should notice faster loading speeds, particularly if page loading speed was a problem before, and you may notice an improvement in your SEO performance. SEO benefits can take a while to show up, so track performance over a couple of months to see if your site is making changes in the right direction.
If you’re wanting to take your website to the next level, take our “What Your Website Says About You” quiz. This short quiz will assess your branding, SEO, user experience and functionality and provide additional useful website tips and tricks. Also, it’s pretty fun, if we do say so ourselves. 😉 Spend the next five minutes and take the quiz!
We'd love to hear if optimizing images has helped your website's performance. Tell us all about it in the comments!
Cheers!