Making It Know
Back

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.

In this article, we’ll show you how to get images for your website, the best image formats, how to add images to your website, and how to optimize for search engines and accessibility. 

Find 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. Once you determine the aesthetic that represents your brand, you can source the photos and images that will bring it to life. 

Stock photos 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.

Your other options for where to get images for your website include taking photos yourself or hiring a photographer, if that’s within your budget. Taking your own photos 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, you should take original photos of the products for your online store

Learn the best image formats for your website

In order for photos and images to load quickly and cleanly on your website, it’s important to pay close attention to image formats, resolution, and sizing. 

Best image formats for websites

The two image formats 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 sizing and resolution for websites

Whichever image format you choose, high-resolution images are key. We recommend image dimensions within the range of 1500 to 2500 pixels wide. 

It’s important to find a balance between high-resolution images and smaller file sizes. That way, your images won’t slow down your page loading. Experiment with adjusting your image resolution and file size by compressing the image file. 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 in order 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 building your online presence with a website template, which is the simplest way to add photos and other images to your website. Squarespace offers award-winning templates that make it easy to place images in effective locations, no design expertise required. 

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. From there, Squarespace templates all include responsive design, which means your images will be automatically resized to fit any viewing platform: mobile devices, desktop browsers, or different display widths. Once you upload your photos to your site, Squarespace also makes it easy to manage them all from one central place.

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, or SEO, is not only for your website copy. The names you give your image files affects how search engines index your website and how people find you. It’s also important to optimize the images’ alt text, 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. 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 100-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 okay to remove sentence articles (e.g., a, an, the) and punctuation, as long as your full sentences translate coherently to screen readers.

Related Articles

  1. Know

    How to Optimize Your Website for Search Engines

    How to Optimize Your Website for Search Engines

  2. Know

    How to Make a Website

    How to Make a Website

Subscribe

Subscribe to receive the latest MAKING IT blog posts and updates, promotions and partnerships from Squarespace.

The email you entered is invalid.

Thank you for subscribing.