The size and dimensions of images on your site will vary depending on where and how you intend to use them. When you upload an image, your WordPress site will automatically optimize your image's size and attempt to generate several image crops and resolutions that you can use in the various blocks and sections of your site.
What image crops/sizes are automatically created on upload?
Note: in order for the site to automatically create all of the following image crops, your image will need to be at least as big as the largest crop (the extra large variants). The site will not upscale your images automatically, so if your image is smaller than the largest crop, it will only automatically generate crops for images whose size falls within the crop's width and height values below. For your cropped images, you can refine the focus area of the crop so portions of the image are not cut off (Edit the post and click "Crop Featured Image" from the "Featured image panel").
| Crop | Size in pixels |
|---|---|
Thumbnail | 150x150 |
Medium | 600 wide maintaining original height proportion |
Large | 1000 wide maintaining original height proportion |
| Full Size | 1200 wide maintaining original height proportion |
Extra Large | 1400 wide maintaining original height proportion |
Small | 300 wide maintaining original height proportion |
Square > Extra Large (1:1) | 1400x1400 |
Square > Large (1:1) | 1000x1000 |
Square > Medium (1:1) | 600x600 |
Square > Small (1:1) | 300x300 |
Portrait > Extra Large (6:9) | 1400x2100 |
Portrait > Large (6:9) | 1000x1500 |
Portrait > Medium (6:9) | 600x900 |
Portrait > Small (6:9) | 300x450 |
Widescreen > Extra Large (16:9) | 2560x1440 |
Widescreen > Large (16:9) | 1400x787 |
Widescreen > Medium (16:9) | 600x337 |
Widescreen > Small (16:9) | 300x168 |
Ultrawide > Extra Large (21:9) | 2560x1097 |
Ultrawide > Large (21:9) | 1400x600 |
Ultrawide > Medium (21:9) | 600x257 |
Ultrawide > Small (21:9) | 300x128 |
What image resolutions are used for banners, content sliders, directory entries, and post listings?
Banners & Content Sliders
The typical use case for banners and sliders is to add an image or group of images to the top of a page. For these use cases, the crop you use is dependent on your preferences.
- If you want the image to span the entire width of the screen, make sure your image is large enough to select the Extra Large variants of the Widescreen or Ultrawide resolutions.
- If you only want the image to span the width of the container, make sure your image is large enough to select the Full Size or Large variations.
Whatever you choose, we recommend being consistent throughout your site.
People and the Directory block
People posts and the directory block utilize several crops generated from the person's featured image.
- A person's detail page utilizes the Portrait > Small image
- The Directory block allows you to choose your preferred crop using the Square > Small by default. Alternatively, you can set your Directory block to utilize the Small variants of the Portrait, Widescreen, or Ultrawide crops via the directory block "Fields to Display > Image" settings.
Posts and the Post Listing block
Posts and the post listing block utilize several crops generated from the post's featured image.
- A post's detail page will typically utilize the Medium crop and display it up to a maximum of 50% of the width of the screen.
- The Post Listing block allows you to choose your preferred crop using the Square > Small by default. Alternatively, you can set your Post Listing block to utilize the Small variants of the Portrait, Widescreen, or Ultrawide crops via the directory block "Fields to Display > Image" settings.