Eight Tips for Optimizing Images to Boost SEO
Images are indispensable to your web designs, and they should be for your search engine optimization (SEO) strategy too. Following SEO best practices around using images on your clients’ websites doesn’t just help with search performance. It can make the websites more functional, accessible, and future-proof. Follow these eight tips for building stronger and more effective websites.
1. Name images so search engines can find them
Naming images helps search engines find and organize—or index—them, since the search engines can’t technically see and interpret images alone. A name helps search engines know what it’s “looking at” so visitors searching the web can ultimately find your client’s website. For instance, file names like “IMG_465” don't tell search engines what’s in the image and are therefore not advised.
Name your image files using lowercase letters, numbers, and hyphens. Describe what’s in the picture as succinctly as possible. Lastly, try to avoid “keyword stuffing” (i.e., using the same keywords over and over again in content), and focus on a few high-impact key words and integrate them in a clear way.
To name your images in Squarespace:
Find the image you want to name and click Edit
Update the Filename field in the Content tab
Click Apply
2. Add alt text to boost keywords
Alt text is the description of a picture that appears on the screen if the image itself doesn’t load. Alt text helps search engines crawl and rank your client’s site. From an accessibility standpoint, it also helps assistive screen readers or browsers with images disabled communicate to visitors using assistive technology.
Some approaches to writing alt text are more effective than others. For instance, let’s say the alt text for an image is “common space organized decor gray couches plants green home space house.” While the language is simple, a more succinct way this could be written is “A living room space with modern decor and gray couches.”
You want to strike a balance between descriptive and concise. Keep the alt text to a maximum of 125 characters, and jump right into the description of what’s in the image. There’s no need to start with “A photo/illustration of ____.” You can use your keyword if it fits in naturally, but try not to overload text unnecessarily.
To add alt text to an image on Squarespace:
Find the image you want to edit, hover over it, and click Edit
Add alt text to the Image Title field (Note:if you don’t add an image title, text in the description field becomes alt text)
Click Save
3. Save images in RGB color mode
Since images on your client’s website will be displayed on screens, you (or your client) should save them in RGB color mode. RGB stands for red, green, blue, and creates the full spectrum of color that you see on digital screens by using different proportions of these three primary colors. Because it’s the standard method for getting the colors to appear correctly on all types of digital screens, using images in this mode will ensure that they render correctly across as many screens as possible. CMYK mode, by contrast, uses a mix of cyan, magenta, yellow, and black to accomplish the same spectrum of colors, but is optimized for printing, since those are the commonly used ink pigments. CMYK won’t render the image’s true colors as well (or at all) across as many browsers and screens.
4. Remove text from banner images
In Squarespace, section background images can act as banner images, and change shape to adapt to different browser widths, depending on the device your client’s site is being viewed on. If text is contained within section background images, parts of the text can be cropped when your client’s site is viewed from a smartphone or tablet, parts of the text can be cropped. This can create a subpar experience for the viewer. Further, computers can’t read this text, so search engines won’t index it for results. It also won’t be optimized for screen readers and other assistive technologies.
Instead, try these tips to improve section background images images:
Overlay text over the image. This way, the message you want to send will scale seamlessly along with the image, while remaining legible, no matter what device is being used.
Pick images that are within a certain color range. You can choose an adequately contrasting text color that will work throughout your client’s website, giving it a more uniform look.
Verify the section background image and text work together in the context of your client’s site. Put yourself in the position of the visitor and go to multiple pages on the site, ensuring the user journey makes sense and is cohesive.
5. Use properly sized images
Section background images that act as banner images can be the trickiest to get right, and since it’s the first thing visitors see, it’s important that it looks professional.
Save your banner image between 1500 pixels and 2500 pixels in landscape orientation. This helps Squarespace automatically resize it for any screen size. Any images over 2500 pixels may extend page-loading times.
After adjusting your background image, always check how it looks on mobile. Many visitors will view your client’s site on a smartphone, so it’s extremely important that every page looks great in that setting.
6. Use beautiful, crystal-clear images
Try using high-quality images so that when visitors find your client’s site, they are delighted with great content. High-quality images don’t have to be professionally taken, but you should stay away from images that are blurry, pixelated, or stretched. Remember that if you’re even questioning the image’s quality, it probably shouldn’t be used. High-quality images build credibility. Low-quality images, on the other hand, are a major red flag, and may cause visitors to quickly abandon the site, resulting in worse site performance, reputational damage, and lost conversions.
Remember, too, that when one of your images appears in a search, it is much more likely to draw visitors if it is compelling. Images can both entice visitors to click to your client’s site and to take a look around once they get there.
If you’re stuck between choosing your client’s own slightly blurry images or crisp stock images, use one of the thousands of professional stock images available on Squarespace. You can always replace them with high-quality custom images later.
7. Size images effectively
There are a few different ways to save image files and each affects the way the images render on your client’s site. Since we’re focused on generating organic traffic to your client’s site, optimizing an image size can make a big difference in the load time and overall first impression of your client’s site. If you’re concerned about the image resolution, focus on the image’s dimensions and keep file sizes under 500 KB. The more images you have on a single page, the more important it is to stay below 500 KB for each image.
Learn more about formatting images for the web.
8. Curate images to increase page-load speed
Oftentimes, visitors will abandon a website if it takes longer than a few seconds to load. A site that loads too slowly can hurt your client’s SEO and click-through rate (CTR), which can mean lower conversions.
Common search engine algorithms scan for how fast a page loads, which is why optimizing your images for page-load speed is so important. The tips below can not only help improve your client’s SEO, but encourage visitors to stay on their site longer since they don’t have to wait for it to load.
Upload as a .jpg: The best practice for uploading an image is to first edit the image in .png format, then convert it to a .jpg for uploading to Squarespace. This is because .png files take up more digital room than a .jpg file but have higher quality for editing.
Keep the amount of images reasonable: Too many images on your client’s site can slow down the load time, too. A safe ratio is three to five galleries with three to five images in each, resulting in no more than 25 images. Of course, depending on your client’s business or website goals, this might vary.
Compress your images: Scaling down images to a smaller size can help the page load faster and keep visitors on your client’s site longer. Each photo should be 300 KB or less. It’s considered best practice to have no more than 500 MB of images on each page.
It’s not a coincidence that many SEO best practices around images don’t just improve search performance but also enhance overall functionality. Search engines are constantly updating their protocols to preferentially select high-quality sites that make the internet better and more accessible for all its users. With that in mind, when you select, size, and name your images with quality and functionality in mind, you’re already on the path to strong SEO.
**This post was originally published on August 4, 2020. It has since been updated.Want more?
Check out Squarespace Circle, Squarespace’s program for professional designers. Along with exclusive content, discounts, and other perks, Circle brings professionals together from all across the globe to exchange advice while connecting with new clients and collaborators.
