Photos must be sized appropriately for different uses. This helps avoid an awkward cropping after the photo is loaded into the site (and makes your pages look great).
Tip: Select an image focal point in the CMS to avoid the most important part of your image being cropped by the screen.
1/2 Div Container
1/3 Div Container, 1/4 Div Container
560px width max, 560px height max
Images need to be sized appropriately but also saved using the following specs:
– Under 1 MB (under 200 kb is industry standard and ideal)
– 40% quality JPG compression (use your best judgment on increasing the quality if needed)
– No metadata
– Use Photoshop's crop tool (w x h x dpi)
– Use Photoshop's Export As function to save images
To check the size of an image in your browser, you can use Chrome's Image Info extension.
It is best practice to follow proper naming conventions. For files on the web, keep the name short, descriptive and omit unnecessary information (“edit_005” for example). Images on the web should be saved with dashes (not underscores) in between and pixel dimensions should be included. Please use the following file name convention:
“YearMonthDay”-“description and/or name”-“pixel dimensions”