Images

Agency Homepage

The homepage contains four different image sizes. Using the image sizing standards below and incorporating the guidelines will ensure your images are consistent with CT.gov and across Agencies, in addition to meeting ADA compliance and display optimization.

  1. Logo
  2. Banner Background
  3. Feature Box
  4. Commissioner

NOTE: Image sizes are based on a measurement called pixels, usually written as px after the size.

Guidelines:
  • Ensure the image has been saved at 72dpi (common screen resolution).
  • Ensure the image has been optimized for fast downloading (compressing the image and choosing the optimal file type without sacrificing quality).
  • Ensure any text in the image is legible.
  • Ensure the image includes an Alt text description when uploaded into Sitecore.
  • Export the image as a .PNG file if a background needs to be transparent (typical for circle shaped images).
  • Name your images descriptively and in plain language to improve search engine optimization (file names are searched by search engines too).
 
1. Agency Logo
Image sizes:

sample logo - square image   sample logo - wide image

  • circle: 150px by 150px (max height/width: 150px)
  • rectangle wide: 150px by 250px (max height: 250px)

How to edit the Logo

 

2. Banner Background
  • 1200px by 226px (max height: 1200px)

How to edit the Background

 

3. Feature boxes

Featured Box images are located in under the links to highlighted content (either internal or external) on your agency landing page and primary navigation pages.

sample feature - square image   sample feature - wide image

  • square or circle: 336px by 336px (max width: 336px)
  • rectangle wide: 150px by 336px (max width: 336px)

For the best visual results, all of your featured item images should be the same size.

How to edit the Feature Box

 

4. Commissioner

sample commissioner - square image  sample commissioner - tall image   sample commissioner - wide image

  • square or circle: 150px by 150px (max height/width: 150px)
  • rectangle tall: 120px by 150px (max height: 150px)
  • rectangle wide: 150px by 120px (max width: 150px)

How to edit the Commissioner