Spur Help Guide

Welcome to the Spur Help Guide

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?


  • 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


  • 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


  • An option for small images with few colors like small logos or icons
  • Not as popular or high quality as PNGs


  • 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.