Why is my image cropping?

Problem

On a Landing Page, for example, you might have a Hero or a Promo, and it’s not showing the correct part of the image. This unintentional cropping is especially noticeable for images that need a specific crop, like images with a logo or text. For the sake of the example, we’ll use two images:

An especially wide image, with a logo in the bottom-right corner:

Open

A square image with a logo in the top-left corner:

Open

If these images are in Heroes, they look like this this in a wide, desktop-sized window:

And this in a narrower, tablet-sized window:

If these images are in Promos, they look like this on desktop (with no adjustment to focal point):

In all of these examples, you can see part or all of the logo is getting cropped off the edge.

Solution

In many places you can put an image on your GovHub website, it will crop to specific dimensions. In certain cases, the crop won’t even be consistent across different screen sizes.

This question comes up most often when referring to the image in a Hero micro-content block. Hero blocks in particular should not use images that need a specific crop. The visible portion of the image changes with amount of text, display style, and window width. The Hero block works best with high quality, mood-setting images that do not need to be cropped in a very particular way.

If you need to have an image with a specific crop, try using a different block type like a Promo or Call to Action. These block types might still crop the image you upload, but the crop will not change depending on difficult-to-control factors, like screen width. When uploading the image to your site, you can click on an important part of the image to adjust the focal point (in the center by default) and make sure it never gets cropped off.

If you’ve tried different block types and image crops and are still having this issue, please open a support request.