Adding Photos to Your Website

Your audience’s first impression of your website is influenced by the images you choose to represent your brand. The photos and other media that complement the words on your website are an integral part of building a website that will help you accomplish your goals.

Here’s how to get images for your website, the best image formats, how to upload images to a web page, and how to optimize photos for search engines and accessibility.

Where to get images for your website

The first step to choosing images for your website is to identify what types of imagery align with your brand and web design. Once you determine the aesthetic that represents your brand, you can source the photos and images that will bring it to life. 

Stock photos or image generators are a useful place to start, especially when you’re launching your business and might not have many of your own photos yet. Squarespace offers integrations with stock photo services to help you find high-quality, affordable images for use on your website.

Other ways to get images for your website include taking photos yourself or hiring a photographer, if that’s within your budget.

Squarespace partners with soona to offer product photography services. Ship your products to soona and select the types of images and style you want, from GIFs and videos to modeled product shots. You can build your own set of photos or use their Squarespace Starter Pack or Squarespace Deluxe Pack. 

Taking your own photos or working with a third party professional is more time-consuming than selecting stock photos, but the benefits run deep. Leading with photos that directly represent your brand—photos of yourself, your studio or storefront, your items for sale, or your team in action—can support your credibility and build trust with your audience. 

Remember that regardless of whether you use stock photos or not, if you sell products, have original photos of the products for your online store.

How to format images for your website

When you’re adding photos to your website, choose high resolution images that have similar shapes to the areas where you’re adding them in your website template. For example, if you’re uploading a banner image, choose a banner image that is wider than it is tall. 

Beyond that, Squarespace websites’ responsive design means your images will automatically resize to fit any viewing platform: mobile devices, desktop browsers, or different display widths.

For photos and images to load quickly and cleanly on your website, pay close attention to image file formats, resolution, and sizing. 

Best image formats for websites

The two image file types to prioritize are JPEG (for photos) and PNG (for other images). The best photo format for websites are JPEGs, which can render the wide color spectrum that’s common in photographs. The best image format for websites are PNGs, which support crisp graphics like logos or infographics that don’t have a lot of color variety. 

Best image sizes and resolution for websites

Whichever image format you choose, high-resolution images are key for image uploads. We recommend image dimensions from 1500-2500 pixels wide. 

It’s important to find a balance between high-resolution images and smaller file sizes. If you upload photos or images that are too large, they’ll slow down your page loading. Experiment with adjusting your image resolution and file size by compressing the image file, or try to resize the image if it’s very large. You can do that with most popular image editing programs. 

The best practice for JPEG or PNG file size is a 500 KB limit per image. Each page on your website should stay under 2 MB to optimize page load time. There are a couple of ways you can find the size of each of your web pages: with third-party online tools or with your web browser’s built-in developer tools. 

To find the size of each web page with developer tools: 

1. Right-click on the web page and select “Inspect” or “Page Inspector” (depending on the type of browser you have). The dashboard that pops up is called your developer tools. 

2. Select the “Network” tab from the top of that dashboard. 

3. Refresh the page.

4. The number that appears before the word “transferred” is the size of that web page. For example, it might say “200 KB transferred,” which would tell you that your web page is under the 2 MB size limit.

Adding pictures to your website

Once you select and compress your photos, it’s time to add them to your website. There are two main steps: fitting images into your page layout, and harmonizing images and text. 

Incorporating photos into your website

Start with a website template, which is the simplest way to add photos and other images to your website. Squarespace templates make it easy to place images in effective locations, no design expertise required. You can upload photos directly to your website editor or add them to your Asset Library, where you can organize and reuse them all from one central place.

Website building tools like Squarespace’s also give you ways to customize how your images are displayed. For example, you can upload single images or add multiple pictures in a gallery or slideshow format, which might benefit someone making a portfolio website.

If you don’t like where a larger image is cropped, adjust the focal point. You can also adjust the size and placement of imagery with the Card, Overlap, and Collage Image blocks, and refine their layout by selecting Image Width in the Design panel. To further adjust image layouts, you can crop imagery using the Image Editor and add blocks to modify spacing on the page.

Balancing your images and text

Your images should work to complement your website copy and vice versa—neither one has to do the heavy lifting on its own. For example, a bold image with sparse copy could illustrate your goal just as well as images used to break up pages with denser copy. 

It’s best practice to not include text in your image files. Instead, when you add photos to your website, overlay text onto them with text fields. That method will mitigate browser resizing issues, plus it allows your text to be crawled by search engines.

Optimize the images on your website

Search engine optimization (SEO) is not only for your website copy. The names you give your image files affect how search engines index your website and how people find you. It’s also important to optimize the alt text you give images, which is a more detailed description of the image than the file name. 

Give each of your files a straightforward name that search engines might recognize. Call it what it is, and don’t use punctuation, except for hyphens. For example, a photo of nail art for a nail salon could have the file name “floral-nail-art-nail-salon.” 

It’s even more important to write alt text for all of the photos and images you add to your website. Using image alt text not only helps with SEO, it helps to optimize your website for screen reader accessibility. Be concise with these descriptions, keeping them to a 250-character limit. 

Consider what a visually impaired person might want to know about an image they can’t see. For example, some helpful alt text for that nail art photo could read: “Photo of hands with long squared nails painted white with red floral designs.” It’s OK to remove sentence articles (e.g., a, an, the) and punctuation, as long as your full sentences translate coherently to screen readers.

This post was updated on November 17, 2023.