Cropping Images for HFC Websites
This document is provided as a reference for Office of Marketing & Communications staff and those familiar with image preparation.
|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.
- In Photoshop, ensure that "Resize Image During Place" is unchecked under General Options.
- Download and open the necessary Photoshop template: Primary or Secondary.
- Place your image into the template via File > Place. You may need to zoom out in order to fully view the placed image.
- 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.
- If preparing hero images for the HFC home page, enable visibility of the HFC brand (separate layer included in both image templates).
- Save the image via File > Save for Web. Specify a high quality JPEG format with the following options selected: Progressive and Convert to sRGB.