Image Best Practices
Recommended Image Ratios and Dimensions
| 16:9 [Top-Crop] | 16:9 | 4:3 | 1:1 | Hero/Sub-Hero Images | 600px – Fixed Width | 300px – Fixed Width | 150px – Fixed Width | |
|---|---|---|---|---|---|---|---|---|
| Infographics/PDFs as Images | Infographics/PDFs as Images | Horizontal Images | Vertical Images | Square Images, Head shots | Hero, Sub-Hero/Banners | Logos | Logos | Logos |
| Size (Width x Height pixels) | 850 x 477 | 850 x 477 | 850 x 638 | 850 x 850 | 1300 x 731 | 600 x auto height | 300 x auto height | 150 x auto height |
Which image file type should I use?
JPG/JPEG
- Most popular image file type; best used for photography and images containing a lot of detail (colors, shapes, etc.). This is because JPGs have a huge color palette to work with
- JPGs are also best utilized for hero images and sub-hero banners
- Can be saved at different quality levels meaning it is best for balancing quality and file size
PNG
- Another popular image file type; best used for handling images with transparency like logos and charts
- Can create a high quality image, but at the cost of a larger file size
GIF
- An option for small images with few colors like small logos or icons
- Not as popular or high quality as PNGs
TIFF
- Highest quality image usually with the largest file size
- Intended for storing digital images, editing, and print
- Do not recommend for web use
How do I resize and/or crop my images files?
Option 1: Submit a Help Desk ticket to the NCBA Web Team to resize/crop image files
Option 2: Use free photo editing resources. Ex. Fotoram!o – free web photo editor
How do I reduce the file size of my images files?
Option 1: Submit a Help Desk ticket to the NCBA Web Team to resize/crop image files
Option 2: Use free photo compressing resources. TinyJPG/TinyPNG – free JPG and PNG compressor
Practices to avoid?
- Using people or animal-focused imagery for Hero or Sub-hero posts. The viewable area of a website hero changes depending on viewing device. This means that a person’s head might get cropped off in certain views.
- The exception to this is Raising Beef rancher profiles utilized on State Beef Council Framework websites which have separate resizing and cropping instructions found on the demo website
- Using images with text or logos embedded on them
- Text embedded within graphics tend to be cropped or illegible depending on viewing device.