Skip to Main Content
Dallas College PEGASUS
Updated: Jan. 21, 2024
Skip to Main Content

Graphics and Banners

Topics On This Page:

Optimizing Images for Web

When creating graphics for the web, it is important that we pay special attention to file formats and file sizes.

File Sizes

For average images on the website, we shoot for about 40 KB (with exceptions being made for banners or larger scale images). We try to keep all website graphics and images under 150 KB.

File Formats

Here are the most commonly used file formats used on web.

  • JPEG – JPEG is the most commonly used file format and is ideal for photographic or photorealistic images. It is lossy and highly compressible.
  • PNG – PNG is lossless and is not suitable for photographs because the file size can be lofty. However, PNG is ideal for logos, shapes, line art and other graphics that have fewer amounts of shading and color. It is also ideal for images that require a transparent background.
  • GIF – GIF files are popular because they can be animated. However, they also come in handy when outputting graphics for web. Similar to PNG files they are ideal for logos, shapes, line art and other graphics with fewer amounts of shading. Because GIF files work with color palettes that are limited in number, they can also yield smaller file sizes than PNG.
  • SVG – SVG is rarely used in our website with the exception of the header and the main map on the maps page. SVG is a vector graphic that can either be called in using the <img> element or simply embedded as code onto the page. Because they are vector, file sizes are small but they are only suitable for logos. SharePoint does not play nicely with SVG and can only be used in Script Editor web parts.
Watch Video Tutorial on Optimizing for Web (9 min)

Image File Naming Conventions

We should adhere to the following best practices when naming any graphics published on the website:

Guidelines:

  • No capital letters
  • Dashes in places of spaces
  • No underscores
  • Keep verbiage concise
  • End with dimensions (WxH)
  • For headshot images, the file name should be [FIRST NAME LOWERCASE]-[LAST NAME LOWERCASE]-123x123 and not include any titles, degrees, initials or abbreviations

Example File Names:

  • admissions-1600x350.jpg
  • joe-may-300x300.jpg
  • rlc-thunderducks-900x600.jpg

Banner Sizes and Templates

Home Page Banner

Top Level Landing

Subsite Landing

  • 1600 by 350
  • <100 KB
  • Download Subsite Landing Template PSD file
  • Special Note: For pages in the /campaigns subsite, we have been using CSS to hide the breadcrumb (and centering the page title). Because there is no breadcrumb, there is no top safe zone border in this template for use on those pages.

Interior Banner

Featured Image

  • 300 by 300
  • <40 KB
  • No PSD Template

Accessibility and Best Practices for Banners

No Text in the Banner

We discourage including any text in the banner graphic itself, for accessibility and usability reasons. Banner graphics are rendered via CSS which does not even allow for alt text. The only text that could be included in the banner should match what is being used for the title page.

Only For Decoration

Because banner images are meant to be strictly decorative, we recommend using the visuals, shapes, symbols, styles, colors and even textures of the graphic or visual identity that is being adapted. The banner is meant to propel the tone of the content being presented and not include any essential content itself. Here are some examples where the banner complements the content without needing to include any crucial information:

Keep Banner Focus in Safe Zone

Banners are cropped differently depending on the screen size it is being viewed on which results in parts of the image being cut off. Each banner template has a "safe zone" that shows which part of the image will be viewable on all devices. The focus of the banner image (whether it's a person, figure or logo) should fall within that safe zone.

Graphic showing the same banner image on a desktop, tablet and mobile that also highlights how the banner is being cropped from iteration to iteration.

Social Media Graphics

There is a field under the "Authoring Mode Options" of each page layout designated for providing a graphic perfectly sized for sharing on social media platforms. Here are some guidelines when using graphics for social media:

  • Image dimensions are: 1200 by 630
  • Images do not have to be optimized for web. The social media platform will take care of that.
  • Images should be saved in the publishingimages/ folder of that subsite

Use Facebook's Sharing Debugger to test for how pages appear in social media.