Website imagery is the visual element that beautifully conveys your culture, products & services and business values to your audience, potential investors and employees. When done correctly, it unifies your website design and leaves a lasting impression on your viewers. We’ve compiled these four best practices to select outstanding imagery that will enable your site to shine.

Tip: Always have a mobile-first mindset when designing your website. In March, Google rolled out mobile-first indexing, meaning that they now “Use the mobile version of the page for indexing and ranking, to better help our – primarily mobile – users find what they’re looking for.” Designing mobile-first will keep your site on par with consumer trends.

Four Best Practices For Website Imagery

Relevancy

Imagery should consistently be related to page content. Choose images that go along with the topic of the page, and if possible, use your own images versus stock photography to make your site more genuine. The overall direction of the imagery should also feel consistent throughout your website. Try to use images that have the same tone, saturation and mood. Images with similar colors and subject matter will make your site feel whole to your audience.

Large Images

  • When selecting images, make sure to take into consideration where it’s going to be used across your site. For large banner images, there should always be enough blank space in the background and an interesting/impactful focal point in foreground. This allows any text that might be placed over the image to be legible while still making the image pop. This also gives you somewhere to zone into when resizing the image for smaller screen sizes.
    • For example, when taking leadership photos, always allow enough space around the person to crop. Taking pictures too close to the person’s face may cause the top of their head to be cut off when cropped on the site.
  • Masthead images: These images will appear at the top of your pages and are typically larger in comparison, somewhere around 1400-1600 pixels. Select an image that will go along with the design of your site. For example, if your page titles are lengthy, having images of people in the masthead may not work well since it will cover their faces.

Sizing

  • Adding illustrated images and infographics to your website creates a more interesting look and feel to your content. To ensure these graphics look crisp and pixel perfect on all screen sizes, we recommend using an SVG file type. This allows for infinite scalability and smaller file sizes.
  • Images within your content should always be sized correctly. Much like Goldilocks, you don’t want them too large or too small.  The maximum size should be 1500 pixels and the minimum width should be 500 pixels. Having unnecessarily large images can slow down page loading times driving away leads.

“39% of visitors leave a website if images won’t load or take too long to load.” – Adobe

Alt Text

Boost SEO by always adding alt text to every image you put onto your site. Alt text is what will be displayed if a user cannot see the image when the site is loaded. It also provides better context to search engines so the image is indexed properly. Use descriptive alt text versus just one word to describe the image. Example: “dog” vs. “golden retriever catching a green tennis ball”

Using these four best practices, your site will reflect relevant, pixel perfect imagery that consistently engages your audience across every page and platform.