Learn the best image sizes and cropping for images in the CMS
October 2, 2020
minute read time
General Size Information
| DISPLAY CONTEXT: | IMAGE SIZING REQUIREMENTS: | Example |
|---|---|---|
| Banner Image | Image will be cropped and needs to be at least1240x400 pixels wide x tall | |
| Featured Item Paragraph: Align Center Full Width | Image will be cropped and needs to be at least 859x409 pixels wide x tall | Example Paragraph Block: Featured Item |
| Featured Item Paragraph: Align Left | Image will be fully displayed and needs to be at least 280 pixels wide. | Example Paragraph Block: Featured Item |
| Featured Item Paragraph: Align Right | Image will be fully displayed and needs to be at least 280 pixels wide. | Example Paragraph Block: Featured Item |
| Featured Item Paragraph: Breakout Float Left | Image will be fully displayed and needs to be at least 280 pixels wide. | Example Paragraph Block: Featured Item |
| Featured Item Paragraph: Breakout Float Right | Image will be fully displayed and needs to be at least 280 pixels wide. | Example Paragraph Block: Featured Item |
| Featured Item: Header: Energy.gov Homepage Primary item | Image will be cropped and needs to be at least 899x725 pixels wide x tall | Updating Homepage Featured Items |
| Featured Item: Header: Energy.gov Homepage Secondary items | Image will be cropped and needs to be at least 899x450 pixels wide x tall | Updating Homepage Featured Items |
| Featured Item: Header: 1 Up Homepage Primary item | Image will be cropped and needs to be at least 1240x600 pixels wide x tall | Updating Homepage Featured Items |
| Featured Item: Header: 3 Up Homepage Primary item | Image will be cropped and needs to be at least 899x600 pixels wide x tall | Updating Homepage Featured Items |
| Featured Item: Header: 3 Up Homepage Secondary items | Image will be cropped and needs to be at least 899x450 pixels wide x tall | Updating Homepage Featured Items |
| Image Paragraph: Align Center Full Width | Image will be fully displayed and needs to be at least 859 pixels wide. | Example Media Block: Images |
| Image Paragraph: Align Left | Image will be fully displayed and needs to be at least 701 pixels wide. | Example Media Block: Images |
| Image Paragraph: Align Right | Image will be fully displayed and needs to be at least 701 pixels wide. | Example Media Block: Images |
| Image Paragraph: Breakout Center Full Width | Image will be fully displayed and needs to be at least 1040 pixels wide. | Example Media Block: Images |
| Image Paragraph: Breakout Float Left | Image will be fully displayed and needs to be at least 701 pixels wide. | Example Media Block: Images |
| Image Paragraph: Breakout Float Right | Image will be fully displayed and needs to be at least 701 pixels wide. | Example Media Block: Images |
| Image Paragraph: Breakout Left Full Width | Image will be fully displayed and needs to be at least 940 pixels wide. | Example Media Block: Images |
| Image Paragraph: Breakout Right Full Width | Image will be fully displayed and needs to be at least 940 pixels wide. | Example Media Block: Images |
| Static/ Dynamic Listing: Horizontal:Image Title and Summary | Image will be cropped and needs to be at least 350x220 pixels wide x tall | Example Paragraph Block: Listing: Horizontal |
| Static/ Dynamic Listing: Horizontal:Title & Image | Image will be cropped and needs to be at least 350x220 pixels wide x tall | Example Paragraph Block: Listing: Horizontal |
| Static/ Dynamic Listing: Horizontal:Title Summary Image & Date | Image will be cropped and needs to be at least 350x220 pixels wide x tall | Example Paragraph Block: Listing: Horizontal |
| Static/ Dynamic Listing: Vertical: Image Title and Summary | Image will be cropped and needs to be at least 150x100 pixels wide x tall | Example Paragraph Block: Listing: Vertical |
| Static/ Dynamic Listing: Vertical: Title & Image | Image will be cropped and needs to be at least 150x100 pixels wide x tall | Example Paragraph Block: Listing: Vertical |
| Static/ Dynamic Listing: Vertical: Title Summary Image & Date | Image will be cropped and needs to be at least 150x100 pixels wide x tall | Example Paragraph Block: Listing: Vertical |
| Photogallery Paragraph Item | Image will be cropped and needs to be at least 516x369 pixels wide x tall | Example Content Type: Photogallery |
| Static Listing: Horizontal displaying Person Nodes | Image will be center cropped and needs to be at least 350x350 pixels wide x tall | |
| Static Listing: Vertical displaying Person Nodes | Image will be center cropped and needs to be at least 100x100 pixels wide x tall | |
| Thumbnail Image | Image will be cropped and needs to be at least 800x600 pixels wide x tall, or larger depending on where the thumbnail is being used in the DISPLAY CONTEXT above |