Image Size Guide

This resource is intended to provide rough guidelines for sizing images to place on your website, either during the content gathering stage or post-launch.

We provide these guidelines with the best intentions, hoping that they will help to correctly size 80-90% of images. But there are always going to be special cases, applications, and unique elements that might require different dimensions.

We start collecting content as soon as possible, before the visual designs are approved and the new site is built. This is because the content stage takes the longest, and we want to give you as much time as possible. But this also means that some image adjustments still might be necessary to fit how the image blocks are built and styles. And sometimes, even with the optimal image sizing and preparation, an image will still just not work or be suitable in a certain spot on a website.

How Images Work on Your Site

Before we get into image sizing, there are a few key Refoundry settings you should get familiar with. These are good to have in mind when choosing images, as they can help inform what images will work best where.

Sizing Images

The main goal is to size your images so that they look amazing but also perform well, the highest quality and high resolution images will decrease your site’s speed and performance—which is why images should be sized and compressed for your website.

In general, for all images:

• No image dimension should be over 2560px (in either width or height). This is the threshold where the additional pixel information does not add to the quality of the display of the image.
• Any image file should be under 1MB in size. If it is larger, there are likely sizing or compression issues. The goal should be under 600kb, with the optimal range being 80-400kb in size.
• JPG images should be compressed—see: Image Compression.

Let’s get into more specifics.

---

Full-Width Images

Full width images (often used for headers/banners at the top of a page) touch the farthest left and right edges of the browser window at all times. Generally these have a more horizontal orientation.

---

Mid-Size Images

The bulk of your images probably fit into this category. Might be storytelling content, callouts to other pages, or product and service images, team photos, or other content.

---

Logos

In this section we are referring to logos that are content on a page—not the logo of your own organization as it appears in headers and footers (that is handled differently).

Supplying logos for your page design (like a partners section, associations, or awards) can be a bit more complex. Ideally these would all be supplied as vector SVG files, however we understand that getting vector versions for SVG from other businesses/organizations can be difficult.

It is important to note that due to different compositions and levels of visual dominance, groups of logos can appear unbalanced. Generally they do follow a structured grid (as shown in the image above). When the image frames are all the same size, individual logos can be balanced by adding (or reducing) white space surrounding it in the image file.

---

Social Share Images

Social share images are the images that appear when links are shared on social media, DMs like Slack, and are seen in mobile search results.

These are completely optional to include in your website, but are recommended. There can be a social share image set as a default (or fallback) for your entire site, or you can set images per page as the feature image or in the Yoast SEO box under the Social tab.

If no image is set, apps will pull the first image found on the page and this often doesn’t look right. We recommend configuring at least one of these three places!