Image Aspect Ratio Examples and Their Uses
1:1: This format is for more specific uses such as full width image links, avatars, limited general use, and full screen billboards.
16:9: This is a good general use format for out web pages. They can be used for cards, image buttons, section backgrounds (See Abstract and Pattern Images below), parallax, image sliders, and general images.
4:3/3:4: A second general use format. Ideal for cards, image buttons, and general images. The 3:4 format is also the best format for physician and staff profile pictures.
4:1: This is the general format for all our main tier billboards. Bear in mind that billboards will also have text over part if the image. Because of this it is important the image is either weighted right or left (generally) and extremely wide. (See Effective and Poor Billboard Examples below).
Effective Billboard Examples
Why these work: The background is simple as possible without too much detail that will compete with the text. They are also weighted either left or right giving us a lot of space to place the text. The background colors are generally of the same tone which prevents the font from becoming hard to read. These images are important because they are the first thing a user will see when they visit a page and will set the feeling for the rest of the design.
It is always helpful to shoot the image larger than the final crop rather than cropping the image in frame. By doing this we have the option to move the image around to achieve the ideal positioning.
Poor Billboard Examples
Why these don’t work: The composition of these images places the subject either in the center of the frame or fills the entire frame with the subject. This doesn’t give us room to place the text without overlapping with the main interest of the photo.
Also, there is a lot of detail and color transition in the background. This can make text harder to read and in some cases appear to drop out completely. The less cluttered the background the easier the text will be to read.
Abstract and Pattern Images
With Gloss we have the ability to add background images to individual page sections. This will allow for more visual interest and variety to web pages. Ideally these types of images would be of location (i.e. architectural work, landscaping, skylines, etc.) or service line (tools, offices, etc.) specific details that correspond to the pages they will be used on. The composition of these types of images can be more free form as they will be used primarily as an accent and not and a main focus.
If you have any questions or run into any issues, please submit a ticket via our intake form.