# Images

### Image Sizes in pixels (double these values for higher resolution)

* Hero Slider - 555 x 395 *with text on the left*
* Hero Slide Wide Setting - 1035 x 405
* Hero Slide Mobile - 330 x 395
* Hero Cards - 347 x 184
* Promotion Cards - 656 x 388
* Used Equipment - 4:3 ratio but resize them to be no larger than about 1400 pixels wide (*which would be 1,050px tall*) so they don't take too long to load.
* Featured Blog - 555 x 395
* Standard Card - 540 x 303
* Staff Images - 125 x 125
* Location Images - 728 x 422
* Featured Promotion Image - 539 x 387
* Showroom Hero Image - 888 x 418
* Logo Lockup - 440 x 110
* Banner Width for images - 1110 width *height is not a determining factor*
* Social Sharing Images - 1200 x 630 industry standard&#x20;

![If the image has text leave some margin around the edges so that the text won't be cut off.](https://2051756409-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3MbuyGt2hSNJg4QtdX%2F-M8MIT3cLGaLCJIV6DOQ%2F-M8MJMKh54uDr9NyASRG%2FImageSizes.png?alt=media\&token=5e347fa3-aac5-40a6-95e5-30ec7b5e7b54)

{% hint style="info" %}
Double Image Values to optimize for Retina Screens
{% endhint %}

### Quick & Easy Image Optimization for Site Speed

{% embed url="<https://www.loom.com/share/ff73332d5b6f445bbdf834c761471613>" %}

### The Method for Sizing Images

Consistent sizing of images is absolutely crucial to a solid layout. It will never look right if the images are carelessly sized. Use this method to get your images right every time.

{% embed url="<https://www.loom.com/share/a807165b76e24901ba98f2d9aba8f48c>" %}

### [Image Libraries](https://www.progress.com/documentation/sitefinity-cms/image-libraries)

###
