Resizing Architectural Photographs For Your Squarespace Website

October 17, 2015 Michael Conway

How To Size Photographs For Squarespace

Achieve the highest quality architectural photographs at the right size for Squarespace websites without taking a Google penalty for page load speed.

Websites used to market interior design, architectural, and design-build services require high-quality photography. The recent design trend toward large hero images on homepages and portfolio pages allows you to communicate brand and design aesthetic clearly to your audience. Every photograph on your website presents an opportunity to tell potential buyers about the buildings you design. Illustrating your firm's capabilities in close-up images of details or wide angle views of the entire landscape enable prospective clients to understand your value. The starting point has been, and always will be, taking high-quality professional photographs that capture the essence of your design, inspire visitors to learn more about your business and capture contact information on a landing page.

Using images as part of an online marketing initiative also requires optimizing the technical aspects of your photographic portfolio. That's why we've taken the time to compile a guide on how to size, resize, and format your images.

Correctly Size Your Images For Your Squarespace Website

If you're using Squarespace, there are some user-friendly tools built into the platform. For example, Squarespace automatically formats your images for Web display and creates six variations to help improve image display on any size screen. These variations have different widths of 100 pixels, 300 pixels, 500 pixels, 750 pixels, 1000 pixels, and 1500 pixels. The height is set to change the width to maintain proper aspect ratio. Pixel dimensions measure the number of pixels for the height and width of an image. This number is determined by the setting used in your camera. A 10-megapixel image takes photographs that are 10,000 pixels in width, for example. Thus, the number of pixels refers to the amount of data an image contains. While Squarespace can help you sort out some of these technical details, there's still no substitute for human sizing, resizing and formatting to make sure your images work well on your website.

Images uploaded to Squarespace must still meet some basic requirements. First, your image must be in one of three formats, JPG, GIF, or PNG. JPG is the most common format while GIF images are rare. Some Internet browser will not read PNG images so stick with JPG whenever possible. PDF, PSD, TIF, or DOC files are not compatible with Web display though you can create downloadable document files using the file upload feature on Squarespace. Additionally, you should put your images in RGB color mode. The common CYMK color mode is for printing postcards, catalogs, and brochures and is not compatible with most browsers. The color profile should be sRGB, which ensures your images will display on mobile devices. Almost every case of image display issues with mobile browsing can be traced to an incorrect color profile. If your images are formatted as PSD or TIF files, you'll have to access photo-editing software such as Photoshop, LightRoom or Photoshop Elements, and export the images as JPGs. Other conversion options with free online tools are available if you don't have photo-editing software installed on your computer. The filename you choose should contain only letters, numbers, hyphens, and underscores. Special characters like question marks, ampersands, or percent signs are unacceptable, as they may cause image uploads to fail or display improperly in photo galleries.

Image Size Matters and Will Affect Your SEO Page Rank

Your image size should be no larger than 2500 pixels wide at 500KB. And while oversized photographs may offer more detail, you don't necessarily want the biggest possible version of your image. Squarespace recommends that all images be less than 500 KB for best results. We recommend you stay below 300 KB to avoid an SEO page load speed penalty from Google. Use a photo-editing program and choose the option, "export images for the web", which decreases the file size without losing necessary quality. Remember, assuming quality is equal, smaller is better because of download speed and according to Google it's a best practice for search engine optimization.

Beyond The Basics: Best Practices For Images on Squarespace

Because Squarespace automatically resizes your images, no photograph should be larger than 2500 pixels. Even if you upload a larger photo, it will be resized down to 2500 pixels by Squarespace. Image height is irrelevant. It will be changed to match the proper aspect ratio based on width. The image-editing software built into Squarespace will allow you to set the orientation of your image, but it's best to correct the orientation before uploading it to Squarespace. The rotation of images is a simple process capable with many free software programs but if you want an inexpensive photo editing tool that allows you to compress image size for the web, we recommend Photoshop Elements. Why? An image can be resized and compressed in photoshop Elements faster than the time it takes for Adobe Creative Suite to open and frankly, it’s cheap. (There’s more on this below)

Getting the Best Image Quality

DPI, the dots-per-inch (DPI) of your photograph is entirely irrelevant. The quality of your image's online appearance (rather than the quality of its printed version) hinges on pixels-per-inch (PPI). PPI refers to the resolution of your image, or the amount of image data in a given space (inches, in this case). A higher PPI will yield an image with greater resolution, which visually appears as the fineness of image detail. Importantly, digital images do not contain a physical output size or resolution, which is defined by the DPI measurement.

As you change the image resolution, the physical dimensions change; or, as you change the dimensions of your image, the resolution changes. When you resize images, you have the opportunity to adjust either of the values and the corresponding value, be it image size or resolution, will change to match your adjustments. In programs such as Photoshop, you will be able to enter numbers of percentages about existing size to alter your image. The exact pixel dimensions you'll want will depend on your Squarespace layout although there are ballpark figures to help get you started.

Most images, as Squarespace notes, do not need to be more than about 1500 pixels in width. These will be the largest images in your Squarespace gallery. However, if you're wondering whether other images are large enough, note that,

Banner images should be 2500 pixels wide.
Thumbnail images typically are about 20 pixels by 20 pixels
On Page photographs in a three-column design usually span about 300 pixels
Floating pictures in the main body of your site will probably be about 225 pixels wide.
A headshot for your site should be about 150 to 200 pixels wide.

These measurements will vary based on your exact layout, but you may want to jot down these numbers if you're considering reuse of existing images for which you do not have larger or original versions.

Why not keep all of your images at 2500 px wide and just make the image block smaller? Google’s penalties for page load speed would harm your ability to rank high on mobile device search results.

Using Photoshop Elements or Lightroom To resize Architectural Photographs

In Adobe Photoshop, constraining the proportions of your image will allow you to keep the aspect ratio so that your resizing efforts do not stretch or shrink your image. The resample image option allows you to alter the size of an image without affecting the resolution. It's important to note, however, that resampling can negatively influence the quality of your image, as filling in gaps between pixels will require your photo-editing software to "guess" at the appropriate color for the space.

If you want to resample your image (another way of saying "change the pixel dimensions"), you can choose to downsample or upsample your image. Downsampling your image decreases the number of pixels by removing information. Upsampling your image increases the number of pixels in the picture by adding pixels based on color values of existing pixels—the guesswork mentioned above noted above. This upsampling is what most often leads to a loss of quality in your image. The best way to avoid resampling problems is to start with a photo file that has a high resolution.

Resampling in Photoshop starts by choosing "Image," "Resize," and "Image Size." Then, select "Resample Image" and choose your interpolation method. You have five options of interpolation.

The "Nearest Neighbor" method is the fastest but least precise. Photoshop recommends this method for illustrations with edges that are not anti-aliased, for the preservation of hard edges, and for decreasing overall file size. However, it can also produce jagged edges, especially when the image is being distorted or scaled through multiple manipulations.

The "Bilinear" interpolation method is the medium-quality option, whereas "Bicubic" is the most precise but slowest, resulting in smooth tonal gradations.

"Bicubic Smoother" is the best choice when enlarging images, and "Bicubic Sharper" is the ideal option for reducing overall image size. Bicubic Sharper maintains details in a resampled image but can also over sharpen some parts of the image; if this occurs, try using the basic Bicubic option instead.

If you simply need to see the image size of an open file, click and hold the file information box located at the bottom of the Photoshop screen. This box will display the height and width of your image in pixels, as well as the unit of measurement chosen for the rulers within the Photoshop display. You will also get information on the number of color channels and the image PPI. If you are interested in the printed size of your image, go to "View" and "Print Size." Alternatively, you may also select the Hand or Zoom tool and click "Print Size" in the "Tool Options" bar. A third option to see the printed size of your image is to adjust the magnification of the image to 100 percent, which will display its approximate printed size. However, this value can vary based on the size and resolution of your monitor and is not the most accurate measurement tool for determining the printed size of your image.

what resolution is best for your photographs?

The answer varies based on the type of screen someone uses to view your image, but the Web standard is 72 pixels per inch. Monitors can be set to different resolutions, 1500 pixels by 1000 pixels, for example, in addition to their physical size dimensions. A 1500 by 1000 pixel image would fill the entirety of the screen as mentioned above, but adjusting the screen or image resolution could alter that display. If you're trying to decide on the resolution for your image, use the lowest monitor resolution a viewer may use to view your image to make sure it appears well at that setting.

Odds and Ends: Instructions for Specific Image Types

Your logo is worth a little extra attention to make sure it's formatted to guarantee top appearance in any size on any device. To start, upload your logo at roughly the height you want it to display on your site. Squarespace has a Logo Image Height adjuster on its Style Editor for minor tweaks. However, having to increase the size of your logo using the Style Editor can reduce the quality of your logo, particularly if it's a JPEG. It's best to err on the side of uploading a logo slightly larger than you need and then decreasing its size in the editor. (Additionally, each Squarespace template manages logos differently; template guides will provide information on how to best manage the logo for your site.)

The last unique case is with favicons. Make sure all favicons are saved as ICO or PNG image files. (Internet Explorer cannot display Favicons formatted as PNG files.) Recommended sizes are 100 pixels by 100 pixels or 300 pixels by 300 pixels. Favicons typically display in browsers as 16 pixels by 16 pixels.

A Few Points to Remember Prospective clients on your website don't care about the file type or file size of your image. They simply want to see high-quality, beautiful photographs that load quickly on their browsers at a desktop or from their phone.

Slow Page Load Speed Kills SEO

Speed plays a critical role in their experience on your site and offers another reason to take the time to optimize the images you use before uploading them to Squarespace. For JPGs, this also means selecting a file compression setting. For Web use, you will rarely need the "maximum" file quality and instead can choose a lower quality, depending on your planned display size. You may want to save several compression sizes and test them on your site, to see if there's a noticeable difference. Small files load quickly, so it may be worth overall quality if it saves a second or two of page-load time, which can make all the difference when it comes to keeping visitors on your site. Even if you do not have access to top-quality photo-editing software, don't be tempted to try and resize your images using size attributes in the HTML code of your page. Save your photographs in the appropriate size before being uploaded to your site. Otherwise, you may end up requiring visitors to download a massive image that the browser resizes to a smaller version, which can take up large amounts of load time.

Make sure that you have saved a copy of the original, which will likely be RAW, TIFF, PNG, or PSD images depending on the software you're using to edit your photos. Keep a library of original images. A library means you'll always have access to large, unedited copies that you can go back to if Web standards change or if you make a mistake while editing one of the images for your site.

Of course, we'd also be remiss not to mention the importance of your image alternative or ALT tag. This 100 +/- character, keyword rich description of your photograph does two things. First, it allows people with visual disabilities to understand the content of your image. Secondly, it also helps search engines understand your image, giving your site the chance to rank in a Google image search, which offers another pathway for visitors to encounter your work.

Final Thoughts about Squarespace, Photography, and Your Brand

Squarespace will save you time by providing you with multiple sizes of your images. It is no substitute for personal attention to get the right images uploaded in the first place. Your brand hinges on its online visual appeal, and you simply can't leave that critical part of your marketing up to the work of automated photo resizing. The good news is that modern digital cameras shoot with incredible resolution, more than you'll ever need for your online images. So if you're hosting images of recent projects, you'll have no trouble starting out with images that will display beautifully on any browser. Don't be afraid to work backward when it comes to planning your next shoot. If you have an established website, what are the current ways in which you employ images? How do you frame or crop them on your site? As an example, you will not be able to use a vertical image as a horizontal banner. This information should help you with your next photo shoot and guarantee that you get the right angle to make your image compelling as well as technically sound. Proper structure of your portfolio is your opportunity to jump ahead of competitors, whether it's with better quality photography or simply properly sized images that decrease page load times dramatically. Fast loading pages can bump you up your website rank in search results without any change in content, particularly for users looking for your business on mobile platforms. In whatever way you decide to start improving your website portfolios, just make sure you get started today. There's no better way to grow your business than to improve the quality of your online presence. Make your site a compelling piece of visual content that draws people into your brand—the quintessential definition of content marketing.

Additional Articles On Squarespace SEO

About Michael Conway - My firm, Means-of-Production designs search engine optimized Squarespace websites, writes blogs and builds email campaigns for home design and construction firms If you’re an architect, interior designer, design-build contractor or landscape designer, our marketing tactics can help you attract better clients. Means-of-Production can help sets your firm apart from the competition. Click here for a free-of-charge website and marketing review. It is provided as a 15 minute video and a list of improvements you may not have considered that will make your online presence more attractive to prospects.