Source: Google sheet
| Usage | Recommended size in pixels, 72 ppi ( < 2MB) | Notes / specifics / complications Source: Google sheet |
|---|---|---|
| Page Banner | 1550 x 550 | Banners use background images. See below for explanation and special rules for background images |
| Page Banner (Homepage) | 2050 x 727 | Banners use background images. See below for explanation and special rules for background images |
| CTA(Stacked) | 1010 x 569 | Ratio of 16:9. The size is for the largest the image could be (in a 50/50 grid) |
| CTA(Horizonal) | 1100 x 655 | at certain screen sizes, the image turns in to a 'background-image'. See explanation on why we use background images below |
| Slider | 1550 x 453 | |
| Free Form | 1010 x 569* | The images restraints on 'Free form' components are more 'free'. We do not 'crop' images here, we 'scale' them. This means that you can create an image with whatever image ratio you want (you could add a portrait style image here and have it show in full, whereas if you add a portrait type image to a CTA - that image will be cropped and you will lose the edges. We have left this component more open ended, but you can consider the main CTA size images as a general starting point (but you don't need to follow the ratio). |
| News Article | 1010 x 569 | |
| Fact Background | 1010 x 569 | Fact backgrounds are 'background images' |
| Profile | 500 x 500 |
Note
We use responsive breakpoints so large images will be cropped at smaller sizes (keeping the same ratio) as we enter different screen sizes. Client does not need to worry about this when creating images, they should just add the largest size, based on recommendations and the Drupal system does the rest of the work. It's just worth noting so they are aware of this technology that helps with page load time.
Background Images
A background image is used when we want to make sure that:
- Our image area reaches the end / is flush with the content/body area (example, horizontal CTAs) OR
- when we have an unlimited amount of text/copy that can go overtop of an image, and we want to make sure the image stretches with that variable content, and we never have the text running off of the image area (example: banner with text overlay).
In the first instance, if the body text area gets stretched / longer on smaller screens, the image area will stretch with it, to match the same height. The background image will get as big as it needs to to fill the whole area, with the center of the image being the point from which it grows. So, for best results, for this kind of CTA, we recommend you add images where the subject matter is as centered as possible within your image. This will yield best results. In summary -- Background images are used to safeguard content where a variable length of long text has potential to create a broken look to the layout.
- Pros: The layout will not look broken
- Cons: we have less control with what part of the image shows in the 'viewport'. Because we have less control, again, we recommend your main subject of the image be centered within.