Summary
Images create powerful impressions. Choosing strong images that work well on websites can attract attention and convince someone to read the page or take an action. Only use image sources that you know are in the public domain or to which UNH owns the copyright. Resource Space offers images the university owns. If you look online, be sure to find an original source for your images (not Pinterest or other outlets) and dig down until you find a clear copyright notice or notice of public domain. Google images, in particular, require extra diligence before posting.
Details
Imagery
- Avoid drastic changes in texture, color, or patterns
- Include people in photos whenever possible
- Shots of people from farther away tend to be easier to work with than close-ups
- Abstract photos tend to be easier to work with than literal translations
- Avoid photos that include text (signs, white boards, etc.)
- Don’t feel like you need to use an entire photo -- instead, look for pieces and parts of a larger picture to best fit the space.
- Do not add text to an image file, add it in Drupal instead. When placing text over an image, the contrast needs to be high enough to allow the text to be easily read. Select photos that have clear areas for text, typically darker since text is usually white. This helps make the text legible and ADA-compliant.
File formats
- .jpg is the best format for photographs used on the web
- .png-24 is a good format for photographs but choose it rather than .jpg only when your image contains transparency. (JPEG does not support transparency; you must fill it with a matte color.) .png?24 files are often much larger than .jpg files of the same image.
- .gif is the format to use for line art, illustrations with large areas of solid color and crisp detail, and text. Also, if you want to export an animated image, you must use GIF.
- .png?8 is a lesser-known alternative to GIF. Use it for the same purposes (except animation).
File size
Keep file size below 1-2 MB. To reduce the size of an image file, you can:
- Reduce the dimensions to the minimum necessary size
- Use an image tool to reduce the size further. Some image tools let you save images that are optimized for web. For example, Photoshop offers a Save for web option. .jpgs are typically the smallest and so the best option.
File naming
Search engines index everything, so proper file naming can improve search engine optimization (SEO).
- All lowercase
- No spaces
- Use hyphens between multiple word file names
- File name should describe image
File alt text
- All images, when added to Drupal, must be given alt text, a simple text description of the image, in order to be ADA-compliant. Alt text also provides additional information to search engines, improving SEO.
Dimensions
College and schools build
Some templates require certain size images for different areas of the page.
- Hero Images: 1920x475, 4:1
- Slideshow images: 1920x600, 16:5
- Spotlight images: 1920x1036, 2:1
- Head shots: 300x450, 2:3
- Blog posts (minimum size): 300x195, 3:2
These images are displayed at exactly the heights and widths listed. Best practices:
- Upload an image that is at least as big as the specified dimensions. Do not use images that are smaller.
- Choose a focal point in the picture. Drupal will always display that part of the image, even when the image is resized for mobile or tablet displays.
Other templates for uploading images include:
- Full width image over text
- Image rollover panels
These images are constrained by width only, so if they are displayed in a 2- or 3-column grid, it’s important to choose images that use the same aspect ratio in order for them to appear at the same height. Best practices:
- 2-column images: 4x4 ratio
- 3-column images: 4x3 ratio
Drupal 7 builds
Full width images are displayed at 1600 pixels. Upload images that are the largest size they’ll be used at.
Drupal 7 crops images without regard to a focal point, so if you want a certain part of an image to show that isn’t in the center, crop the photograph before uploading.
Drupal 8 Recommended sizes by content type
For card content and image rollover panels use one of these three aspect ratios
- 1:1, 1000 x 1000 pixels
- 2:3, 800 x 1200 pixels
- 4:5, 800 x 1000 pixels
For landing page hero images reduce the image's width to 2000 pixels.
Resources
Suggested locations for acquiring images to use in your website:
Image editing tools (available soon).
Want to learn more?
Additional help on this and other related topics is available during a regularly scheduled Drupal/myPages/Website Tools - Walk-in/Zoom-in Session. More information, including a complete schedule, is available at Drupal/Sites@USNH/Website Tools - Virtual Walk-in Session.
Need additional help?
If you have any additional questions, please fill out the Website, Mobile, & SharePoint Development & Design Support Form.