Images

Crops

Photographs are a powerful means of adding to the meaning and content of a webpage. Ensure your images are of good quality, clear resolution, named properly, and available to use legally. 

Slides on image size and definitions

Photo crop ratios

Images on the websites need to be cropped to three different aspect ratios when first uploaded to the website. These different selections create independent instances of the image that can be used in different locations in the website. 

Image with shapes representing the different aspect ratios avaiable
A nifty image showing how different aspect ratios are declared.

AS thumbnail

Image with shapes representing the different aspect ratios avaiable
A nifty image showing how different aspect ratios are declared.

When adding images to your text block you can choose whichever crop size works for that situation. The image in the paragraph is set as a "AS-thumbnail."  Suspendisse vitae arcu semper felis hendrerit vehicula. In at ullamcorper nisi. Nam tristique at mi sed lobortis. Ut vel nibh nunc. Maecenas sagittis libero vel libero dictum tempor. Pellentesque ullamcorper vestibulum egestas. Nulla viverra auctor sapien, eu ornare est euismod eu.

AS landscape

Image with shapes representing the different aspect ratios avaiable
A nifty image showing how different aspect ratios are declared.

Suspendisse vitae arcu semper felis hendrerit vehicula. In at ullamcorper nisi. Nam tristique at mi sed lobortis. Ut vel nibh nunc. Maecenas sagittis libero vel libero dictum tempor. Pellentesque ullamcorper vestibulum egestas. Nulla viverra auctor sapien, eu ornare est euismod eu.Suspendisse vitae arcu semper felis hendrerit vehicula. In at ullamcorper nisi. Nam tristique at mi sed lobortis. Ut vel nibh nunc. Maecenas sagittis libero vel libero dictum tempor. Pellentesque ullamcorper vestibulum egestas. Nulla viverra auctor sapien, eu ornare est euismod eu.

AS portrait

Image with shapes representing the different aspect ratios avaiable
A nifty image showing how different aspect ratios are declared.

Suspendisse vitae arcu semper felis hendrerit vehicula. In at ullamcorper nisi. Nam tristique at mi sed lobortis. Ut vel nibh nunc. Maecenas sagittis libero vel libero dictum tempor. Pellentesque ullamcorper vestibulum egestas. Nulla viverra auctor sapien, eu ornare est euismod eu.

Suspendisse vitae arcu semper felis hendrerit vehicula. In at ullamcorper nisi. Nam tristique at mi sed lobortis. Ut vel nibh nunc. Maecenas sagittis libero vel libero dictum tempor. Pellentesque ullamcorper vestibulum egestas. Nulla viverra auctor sapien, eu ornare est euismod eu.

AS pano

Suspendisse vitae arcu semper felis hendrerit vehicula. In at ullamcorper nisi. Nam tristique at mi sed lobortis. Ut vel nibh nunc. Maecenas sagittis libero vel libero dictum tempor. Pellentesque ullamcorper vestibulum egestas. Nulla viverra auctor sapien, eu ornare est euismod eu.

Image with shapes representing the different aspect ratios avaiable
A nifty image showing how different aspect ratios are declared.

A test gallery

Image with shapes representing the different aspect ratios avaiable
Image with shapes representing the different aspect ratios avaiable
A nifty image showing how different aspect ratios are declared.
Screenshot showing different heading examples
Screenshot showing different heading examples
Neat image showing examples of headings. Really the caption is here for the gallery.
Image of several screenshots of department webpages
Image of several screenshots of department webpages
A stack of screenshots to show the difference and consistency of webpages.
Image showing photo sizes and small image thumbnails
Image showing photo sizes and small image thumbnails
Just a taste of what's available for images.

Image gotchas

Upload image size

Although the new websites have built in cropping tools, you need to ensure that images start off at least 1600px. The tools do not stretch images. 

Image showing a pano image that is too small and does not fill up the available space.
If an image is uploaded smaller than 1200px, it will not fill out the default largest space for a pano.

Wrong aspect ratio

If a pano image is ever anything other than 16:9 ratio, something went wrong. 16:9 is roughly the same shape as a modern T.V. or computer display

Screenshot of a pano image that is the wrong size.
This pano image is way to tall to be sized properly and should be fixed.

Context and balance matters

When creating images for panos with people, focus on balance and purpose.

image of a poorly composed pano image
This pano image is not well composed and does not align with the standards of the A&S brand.

Some work in a photo editor makes for a much more balanced image.

Screenshot showing a properly formatted pano image with headshots.
Balance has been restored to the pano space of this webpage with some work in a photo editor.
Top