Image dimensions

To help keep your site neatly organized and flowing easily for reading, all images in GovHub sites display at specific sizes.

1 Text editor embeds
2 Micro-content images
- 2.1 Common crops
- 2.2 Hero
- 2.3 Tile With Text
- 2.4 Other Micro-Content Types
3 Content Types
- 3.1 Bio
- 3.2 Event
- 3.3 Program or Service
- 3.4 Book Cover Image

Text editor embeds

You can embed stand-alone images into the “What You See Is What You Get” (WYSIWYG) text editor of certain content types.

Recommended minimum dimensions: images embedded in the text editor

2000px wide
no height requirements

When you embed an image in a text editor, you have the option of three embed alignments: full width, left, or right. The alignment you choose determines how large the image will display. The image will scale proportionally to the system-determined width, keeping the original aspect ratio of the image.

This chart shows the actual largest dimensions at which an image will appear in each of the described situations:

Embed alignment	Width (px)

Embed alignment	Width (px)
Full width	872
Left	428
Right	428

Note: Images smaller than the available space will not grow to fill the space.

Images that smaller than the available space will not scale up and will leave empty gaps on the page.

Micro-content images

The images in blocks placed on a Landing Page will scale to a specific size and crop to a specific aspect ratio. By default, these images will crop towards the center of the image, but you can adjust the focal point on each individual image. The image will always fill the available space, showing as much of the image within the crop as possible.

Images that do not meet the following minimum dimensions will scale up and may appear pixelated.

Common crops

The following display at a 4:3 aspect ratio:

Spotlight
Promo
Tile without text
- Since Tiles with the “Image” layout are most often used for logos, try to use a more square (rather than wide) logo layout, when possible. You’ll probably need to add some white space around it to make sure no part of the logo is lost when the image is cropped into a square.

Images will grow to fill space, pick a large image with the approximate aspect ratio to ensure the best result.

Hero

Heroes (both large and condensed) display with a flexible crop, which depends on content and viewport width. The image pins to the center, so it’s best to crop it so the focus is in roughly the center of the image. Sometimes it can help to offset the focus a little to the left (if using the large display) or to the right (if using the condensed display) to address where it overlaps behind the text area.

Tile With Text

Images in Tiles display at a 4:3 ratio. When choosing an image, keep in mind that the top and bottom will be cropped.

Other Micro-Content Types

The following types of micro-content display with a 4:3 ratio, but do not use a 4:3 image style:

News teaser

No image style

Call to Action (CTA)

Uses a 3:2 ratio

Link Collection

The ratio of images used in a Link Collection varies on placement and the type of image used

This chart shows the actual largest dimensions at which an image will appear in each of the described situations:

Block placement	Width (px)	Height (px)

Block placement	Width (px)	Height (px)
Full-width & 1/3 width regions	702	468
2/3 width regions	1000	500

Note: When embedded in the WYSIWYG, some images have a 4:3 ratio (720 x 540) and others have a 1:1 ratio (720x720). The ratios are not dependent upon alignment or specific settings in the Link Collection. At this time, we are not sure of what causes the difference.

Image Block in Layout Builder

This chart shows the actual largest dimensions at which an image will appear in each of the described situations:

Block placement	Width (px)	Height (px)

Block placement	Width (px)	Height (px)
2:1	1000	500
3:2	702	468

Note: Images smaller than the available space will grow to fill the space.

Content Types

Some content types have a specific image field.

Bio

The “Portrait” field on the Bio node crops to a circle on the Bio details page and in Bio teasers.

Event

The “Thumbnail” field on the Event node crops to a circle on the Event details page. It does not currently display on Event teasers.

Program or Service

The “Logo” field on the Program or Service node crops to a circle on the Program or Service details page. It does not currently display on Program or Service teasers.

Book Cover Image

Displays at a 1:1 ratio