Cropping Images for HFC Websites

This document is provided as a reference for Office of Marketing & Communications staff and those familiar with image preparation.

Size Reference

Name Purpose Minimum Pixel Dimensions Aspect Ratio Color Space Resolution (Pixels/Inch)
Primary Front page hero (desktop width), website header areas 1440x480 pixels 3:1 sRGB 72 ppi
Secondary Front page hero (mobile width), news, spotlight items 600x440 pixels 1.36:1 sRGB 72 ppi


  • The image obtained signed media releases from individuals.
  • The image is large enough to work well with the minimum pixel dimensions.
  • The image is from a high quality source. It is not grainy, blurry, or pixelated.
  • The image is visually strong and helps inform the intended story or topic. It does not simply "fill empty space."
  • The image is properly exposed and color corrected.


Templates are provided to ensure minimum pixel dimensions, aspect ratio, color space, and resolution. They also help fine-tune image composition.

  1. In Photoshop, ensure that "Resize Image During Place" is unchecked under General Options.
  2. Download and open the necessary Photoshop template: Primary or Secondary.
  3. Place your image into the template via File > Place. You may need to zoom out in order to fully view the placed image.
  4. Scale and position your image using the Free Transform Tool and the Move Tool.
    • Always hold down the shift key to scale proportionately.
    • Avoid upscaling images that are too small, as this will result in quality loss.
    • Optional: activate guides in order to compose the image using the rule of thirds.
    • Press enter to accept image scaling modifications and to exit the Free Transform Tool.
  5. If preparing hero images for the HFC home page, enable visibility of the HFC brand (separate layer included in both image templates).
  6. Save the image via File > Save for Web. Specify a high quality JPEG format with the following options selected: Progressive and Convert to sRGB.