Optimize your photos before they go on your website
If you use your own photos on your website, you should take the time to optimize them before you add them to your website. Optimized photos load more quickly and improve SEO (search engine optimization) for your website, without sacrificing quality.
Step 1: Start with a quality photo
Follow these best practices for taking a high-quality photo on your camera.
Clean the lens of your camera.
Arrange good lighting without overbright spots.
Have a steady hand or use a tripod.
Avoid distracting backgrounds or busy patterned clothing.
Use colors in the photos that complement or match your website colors.
For privacy, omit the location from your camera settings (instructions here).
Use high-resolution settings for the camera.
Turn the camera so photos are a wide landscape orientation.
Allow extra space around the subject for the most flexibility for sizing the photo for your website (more ideas here).
Step 2: Optimize the photo
An optimized photo is an image file that has been resized, compressed, and renamed so it is high-quality but displays quickly and can be found through online searches. While this may seem a bit tedious, the benefits for your website are worth it.
Methods for optimizing photos
You can optimize photos directly on a photo app on your phone, upload photos to an online image compression service, or process them in an image editing program, but the adjustments you have vary.
Choose the method that is most comfortable for you, factoring in the volume of photos you regularly need to optimize and your comfort level with the different technologies. Easier methods usually have fewer options, but they may be adequate for what you need. The best method is one that allows you to resize the photo dimensions and compress the image and lower its quality to yield a smaller file size.
For example, I learned how to use Adobe Photoshop Elements on my laptop to optimize photos and other images for my website clients. I knew I was going to be optimizing images regularly and I liked that I have very specific control over sizing and cropping to achieve the optimal balance of quality and smaller file size.
Tip: Before optimizing, it’s prudent to start with a copy of the photo in case you need to revert to the original.
Optimizing a photo on your phone
Your phone’s photos app has image editing software with options to reduce photo size or save with a lower quality.
Google Photos (Android)
Apple Photos (iPhone)
Optimizing a photo online
There are many options for uploading your photo directly from your phone to an online service to optimize your photo. Some of these also offer mobile apps.
Optimizing a photo on a computer
If you download the photo to your computer, you can use the online services listed above or use software on your computer, like Microsoft Paint, Microsoft Photos, Mac Preview, Adobe Photoshop or Photoshop Elements.
Not recommended: Optimizing a photo directly in Squarespace
You can also use the image editor within Squarespace after uploading, but you can only crop the photo. You won’t be able to fine-tune the file size or the compression, so it’s much less precise and limits what you can accomplish.
Optimization standards to keep in mind
Aim for these sizing and formatting standards, if available. What’s available to you varies depending on the method you use—your phone, a mobile app, an online compression service, or image editing software.
Format as .jpg
Convert the photo to a .jpg file, the best format for website photos as long as you don’t need a transparent .png file that allows a color background to show through (explanation of .png here).
Resize to 2,000 pixels
Resize the photo width to be about 1,500–2,000 pixels at its largest side (about 20”–26”), but no smaller than 1,000 pixels.
Reduce the file size
Compress and save the .jpg file to reduce the file size (with low- or medium-quality settings if you have that option). The ideal is to reach an image whose file size is about 100K–200K, no more than 500K, but still looks almost as good as the original.
Cropping the photo can also reduce the image file size but you don’t need to do so now unless you can’t achieve the ideal file size. Crop the image to eliminate any background that isn’t relevant and make sure the central part of the image looks good for the version to be shown on cell phones. However, you can also delay cropping and use the image editor in Squarespace later to crop the edges if needed.
Rename the photo with a unique file name
Save the photo with a unique file name that describes the subject, possibly using keywords or your business name.
Use hyphens (-) not underlines (_) for search engines to distinguish separate keywords in a file name.
Use fewer than 50 characters and no other special characters.
Group similar photos together in alphabetical order to make them easier to find for uploading to your website.
Not recommended: While you can change a file name later in Squarespace in the image settings, it’s best to pre-name the photo file before uploading it so the name is the same everywhere.
Step 3: Upload the photo to Squarespace
Uploading a photo from your phone
The easiest way to upload a photo from your phone to your website is by using the Squarespace app. The app gives you the option of adding an image to your page design by finding the optimized photo from your Photos library or from your Files app.
After you add a photo to your website, you can reuse it throughout your website, blog posts, and Email Campaigns. Just search for the photo in your website’s Assets library.
Getting a photo from your phone to your computer
You can choose to copy photos from your phone to your computer or to an online cloud storage service to organize and reuse them before you upload photos to your website.
I recommend organizing files on your computer using folders and sub-folders so you can find the photos you need later. In other words, don’t just copy them to your Downloads folder and leave them there.
There are many ways to copy a photo from your phone to a computer, but these are the ways I know of, from easiest to most complex.
Attach the files in an email that you send to yourself from your phone. Maintain the actual size and quality of the photos. Open the email on your computer and download the files to your computer.
Copy the photos to an online cloud storage service like iCloud or Google Drive that you can access from both your phone and computer.
Use an online file transfer service that works with your phone and computer such as WeTransfer.com or Dropbox.
Connect a cable from the phone to the computer to copy or move files. (Instructions vary depending on your device and your computer.)
Uploading a photo from your computer
With your website open in the Squarespace editor, add an image block or other image design element and upload the photo you want to use. If you’ve used folders for organizing your files, you should be able to find the optimized photo easily on your computer.
Step 4: Add alt text to the image
After you upload a photo to your website and place it on a page, improve the SEO by adding Alt Text as part of the image settings. Alt Text gives sight-impaired visitors using screen readers a description of the photo. Search engines also use the Alt Text to understand the content on your website (instructions here).
The bottom line: It’s worth it…
If you take the time to optimize photos on your website using these techniques, you’ll be making your photos work as hard as your written content. Together, they’ll make finding and visiting your website a great experience.
