import { Meta } from '@storybook/addon-docs/blocks';
# Images
Below are a few examples of image dimensions that we’re currently using on the whitelabel. All images should be associated with appropriate alt tags. For images that are embedded within an article, caption and credits are available for use.
## Current Ratios In Use
| Ratio | Image Size Examples | Usage Examples |
| -- | -- | -- |
| 1:1 | 100x100 | Card Thumbnail (Horizontal, S) |
| 4:3 | 100x64, 328x220, 360x234, 634x412 | Card Thumbnail (Horizontal and Vertical), Gallery Thumbnails |
| Variable | 1100x714 (min-width: 634px , max-height: 733px ) | Gallery Slide, Lead Image, Embedded Images |
## Default Images
Default images are shown whenever there is no image available to pull from the CMS.
| Default Image Brand & Type | Example |
| -- | -- |
| Whitelabel Default | 
|
| Gothamist Default | 
|
| Gothamist Food | 
|
| Gothamist Arts & Entertainment | 
|
| Gothamist News | 
|
## Cropped & Resized Images
Images uploaded should always adhere to the image ratios for the corresponding component. If they do not, images will appear cropped in certain components. The CMS can help specify how the cropped image will appear, but otherwise, try to make sure images abide by the current rules that are set.
### Article Images & Image Constraints
For all article images, the default is a 4:3 ratio. If an article image doesn’t fit into the specified ratio, it must be handled in a way to not break layout. Below illustrates how an image would appear if it fits into one of our other supported ratios.
**Rules:**
* Left and right edges of the image must appear inline with the left and right edges of the article body text.
* Supported ratios for embeds: 1:1, 3:2, 5:9, 16:9 (These should always expand to fit within the 4:3 frame)
* If not a supported ratio: **Portrait** image widths should be no less than 20% the width of the container. **Landscape** image heights should be no less than 20% the height of the container.
| Brand | Rules | Landscape / Horizontal Constraint | Portrait / Vertical Constraint |
| -- | -- | -- | -- |
| Whitelabel | Background: Solid bg color, with main image overlayed; Shown in constraints as 4:3 ratio | 
| 
|
| Gothamist | Background: Low opacity, blurred repeat of featured image over a solid background color. Main image is overlayed; Shown in constraints as 4:3 ratio | 
| 
|
## Examples of Images with Descriptions
| Type | Example |
| -- | -- |
| Embedded Image in Article | 
|
| Card | 
|
## Progressive Loading
For users with slow connections, progressively loading images reduces the bounce rate and creates a more seamless transition between the unloaded and loaded pages. It helps our users understand that the page is still loading. This feature is most important to users on mobile devices or accessing our sites from older devices.
| State | Example |
| -- | -- |
| Initial Page Load Placeholder | 
|
| Low Res Photo Loaded & Blurred | 
|
| Final Loaded Image | 
|